Deep Dive into HTML Layout

  • The amount of practice:

    50 hours

  • Entrance level:

    Beginner / Amateur

  • Level to achieve:

    Intern / Freelancer

Learn to create beautiful interfaces

Start Course

The course is built of interactive exercises

This is the most effective way to learn since from the very beginning we teach you with live coding to independently solve tasks similar to real ones.

  • Learning with interactive courses means constant practice

    20% of the time you study theory and 80% of the time you write code. Only this approach allows you to gain knowledge and sharpen your skills to the maximum. A perfect start.

  • Interactive courses allow you to study at a comfortable pace

    You can study at your own pace and visually track your progress.

  • Is the course right for you?

    This course is suitable for those who are already familiar with the basics of HTML and CSS. In it, we will dive deeper into the capabilities of these languages.

  • Your level after the course

    When you complete the course and all its experiments with new tags and properties, you’ll gain the arsenal of skills of a trainee web developer. You will be able to become an intern in a small web studio or take small freelance orders.

  • What you will learn:

    • Add beautiful fonts.
    • Draw with CSS gradients (and even country flags).
    • Make pretty shadows.
    • Make custom layouts of elements using flexboxes and grids.

Syllabus

  1. Section 1. Diving into Decorative Effects
    • Creating shadows using box-shadow. Shadow parameters: offset, feathering, stretching and color.
    • Inner and outer shadows. Multiple shadows.
    • Tricks with shadows: casting a shadow only from one side, multiple borders for one element.
    • Creating linear gradients using linear-gradient().
    • Gradient parameters: direction and colors.
    • Color proportions, color stops, sharp color transitions.
    • Repeating gradients.
    • Creating complex backgrounds using gradients: pseudo-columns, ornaments, flags.
    • Text shadows and their parameters, creating decorative text using shadows.
    • Multicolumn text.
    • Managing text overflow.
  2. Section 2. Diving into Layout Techniques
    • Basic concepts of Flexbox: flex container, flex item, main and cross axes.
    • Alignment of flex items along the main and cross axes.
    • Multi-line flex container, flex lines, flex line alignment.
    • Managing the order of flex items.
    • Features of the block model in flexbox. Features of auto margins.
    • Flexible flex item sizes. How flex-basis, flex-shrink and flex-grow work.
    • Examples of creating layouts using Flexbox: cards, responsive menus, input fields with dynamic width, "perfect" centering.
    • Basic concepts of grids: grid container, grid template, grid item.
    • Grid template concepts: grid cells, grid lines, grid rows and grid areas.
    • Grid item coordinates. Automatic and explicit coordinates and their combination.
    • Overlaying grid items.
    • Grid spacing.
    • Using named grid areas.
    • Examples of creating layouts on grids: laying out an entire page, laying out an online catalog.

Start learning

This course is a logical continuation of the «Introduction to Web Development» course.

Course

Deep Dive into HTML Layout

$149
Buy now

By pressing the «Buy now» button, you agree to our «License Agreement» and «Privacy Policy».