HTML/CSS is a technology that is easy to master “off the top of your head”, learn the basic tags and properties, and you can create something right away. Many developers do just that.
The goal of this course is to teach not just properties, but proper approaches to layout, including code organization, styles, mobile compatibility, and more.
We also study page construction in general and the various interface components, the nuances of creating and styling them that make them more user-friendly.
We will learn numerous aspects of layout as we build a component library.
The course is advanced, so it is better to come not with zero knowledge. Although it is possible to start from scratch, we will give the basics of layout before the course, in the introductory materials, they are simple, but you will need to look carefully.
The course is also suitable for Javascript-developers and backend-developers who want to increase their level of understanding of layout, to be more competent in this area.
Course Program
BLOCK 1
Fundamentals of modern layout
We’ll start by checking the understanding and nuances of using basic CSS properties, the basics you’ve seen at home in the introductory materials.
Next, we’ll look at the component structure of a web page from an HTML/CSS perspective, approaches to organizing and architecting CSS code: BEM, Atomic CSS, etc.
We will study the basics of adaptive layout, units of measurement. Themization based on CSS variables.
BLOCK 2
Modern adaptive layout
Let’s analyze the different ways of layout: static, rubber, adaptive and the difference between them.
Modern approaches to layout: flex.
Modern approaches to layout: grid.
Layout for different screens, viewport device.
Media queries.
Images. Methods of adding images to the page – pros, cons and limitations of each (background-image, img and object). Ways to optimize loading, support for different resolutions.
BLOCK 3
Forms layout
To order a pizza, you need to leave your phone number, and to pay by card – its details: “fill in the form”. This process should be beautiful, convenient, understandable for the user. Let’s break down the structure of the form and its constituent elements, learn the nuances of proper form layout.
BLOCK 4
Animation
Learn how to animate interface elements in different ways without JavaScript, profile animation to make it beautiful and smooth.
Animation: transition.
Animation: keyframes.
Animation profiling. “Heavy” properties for animation.
Flip animations.
BLOCK 5.
Assembly, Pre- and Postprocessors
Let’s learn how code is written and assembled in modern projects, pre-and post-processors based on postCSS, support for css-properties in different browsers, modern CSS assembly tools, autoprefixer and minification.