You've laid out a couple of pages, but you feel that your knowledge is not enough? Are you looking for proven practice techniques, but an Internet search gives only pieces of information? Then this workshop is for you!

"Accelerates the work with no loss of quality!" - That was the motto of a workshop will be held.
For 7 lessons you'll get an idea of ​​how to typeset a modern adaptive HTML-page of the graphical layout in format PSD. We will analyze how to do it quickly and efficiently.

Course Information:
Title: Workshop on the imposition of adaptive web page
Year: 2015
Author: Nikita Krasnik
Genre: Training video

Contents:
Lesson 1: Setting up development environments: editing code editor and other advanced tools you need for easy and efficient operation.
· On what operating system to work?
· A variety of Web browsers.
· Overview BrowserStack.com service for cross-browser testing, and a little about virtual machines.
· Brief graphic editors.
· About the code editor.
· Google Chrome browser and installing plug-ins. Review PerfectPixel plugins and HTML5 Outline.
· Other browsers and their differences.
· Review LiveReload 2 and a show of force and command-line automation.
· Investigated with "Developer Tools" in Google Chrome (edit DOM-tree and CSS-style access to the resources page, emulation of different devices to test adaptability, etc.)
• What version of Photoshop to put the workshop?
· The code editor Sublime Text 3 how to install plug-ins and how to speed up its work in ST.
· The list of plug-ins that we need to work in the workshop.
· The methodology of knowledge. How to learn web design?

Lesson 2. Analysis of the layout. At this stage, we will touch on how to assess the amount of work looking at the layout of the existing, as well as in the mind or on paper to prepare for the layout.
· Introduction to the problematic issue.
· General aspects of layout analysis.
· Technical aspects of layout analysis.
· Examples of poor PSD-layout.
· An example of a good PSD-layout.
· What else nice layout differs from the bad?
· Analysis of the PSD-layout Jetro, which is typeset in the workshop.
· A little bit about the features work freelance.

Lesson 3. Working with the layout in the environment of Adobe Photoshop and graphics for future extraction of the web page.
· The types of image formats. Raster image.
· The types of image formats. Vector Image.
· A little bit about the format of SVG.
· Ways to transfer a bitmap to a vector (trace).
· Removing the graphics layout of Jetro. The old way.
· Removing the graphics layout of Jetro. New way.

Lesson 4: Preparations and the beginning of HTML-frame layout. We'll use a popular framework Bootstrap. Many would like to learn how to apply it in practice, what we are going to do with you on a real example.
· Introduction and some history: from table layout to the block.
· The semantics of HTML and algorithm HTML Outline.
· Old algorithm: HTML 4 Outline.
· New algorithm: HTML5 Outline.
· Connecting and layout Bootstrap HTML-frame layout Jetro.

Lesson 5: Configure Bootstrap framework and pastiche page through CSS. In our work we use the preprocessor Less. Before that you are not faced with it, you'll be amazed how it accelerates!
· Overview of the official website of Bootstrap.
· Parse garbage Bootstrap'a.
· Configure, compile, and replacement of the standard style file Bootstrap File with customized variables for the layout Jetro. Breakpoints (breakpoints), media requests (media queries) and the width of the layout.
· Start styling. Setting Less and LiveReload.
· Variables in Less. Specifies the color variables for the layout.
· Cross-browser connection fonts and their conversion through service FontSquirrel.com.
· Writing the common styles.
· Styling navigation bar logo.
· Styling slider.

Lesson 6. Continue styling of our pages and customize all the details.
· What is Flexbox'y and how to work with them.
· Continue styling layout Jetro:
Section 1. INTRO ARTICLES.
Section 2. RECENT WORKS.
3. Section FOOTER.
4. finalized slider.

Lesson 7. At the final stage, we will make a web page adaptive, that is good looking on different devices. Along the way, it will be considered associated techniques and approaches.
· Adaptability and responsiveness. What is what?
· Screwed adaptability to layout Jetro:
Section 1. LOGO and NAVBAR.
2. Section SLIDER.
3. Section INTRO ARTICLES.
Section 4. RECENT WORKS.
5. Section FOOTER.
Finished look LAYOUT JETRO!

Lesson 8. Consideration will be given by the maximum web page optimization.
· Analysis of the download speed through the Developer Tools in Google Chrome:
1. A detailed overview of the Network tab and its options.
2. The sequence of file downloads Web pages, how to connect the CSS, JS, and other resources.
3. How to extract information from the waveform download (Timeline) developer tools in Chrome.
4. Troubleshooting 404 (if the resource is not found).
· Reducing the size of HTML, CSS and JS-files:
1. What is minifikatsiya and ofuskatsiya.
2. We remove all unnecessary files Bootstrap using the garbage on the official website getbootstrap.com.
3. CDN-services, which is why you need and how to connect them with resources.
4. Optimize and minifikatsiya our style file style.css. How to write CSS-selectors so that everything worked as quickly as possible.
5. Optimization and minifikatsiya of HTML-pages.
· Graphics and Fonts:
1. Optimizing graphics. JPG, PNG, SVG, and encoding in base64 - when it is better to use?
2. Optimization of fonts and practical use of SVG.
· Removal of unnecessary files.

Issued: Russia
Duration: 19:34:03

File
Format: MP4
Quality: PCRec
Video: AVC / H.264, 1280x720, ~ 958 Kbps
Audio: AAC, 2 ch, 192 Kbps
Size: 7,80 GB

DOWNLOAD LINKS :

http://www.nitroflare.com/view/06EC59518ACDD87/Vorkshope_po_vjorstke_adaptivnoy_veb_stranicy.rar

NO PAS :