HTML and CSS. Layout from Scratch: What to Learn, Where to Learn, and How Long Will It Take?

May 30, 2026

Jump to Section:

Introduction
CSS sometimes replaces JavaScript
CSS versions
Layout designer’s roadmap
How long do you need to learn HTML to start creating websites?
What you don’t need to learn if you’re a beginner

Introduction

HTML (HyperText Markup Language) is the foundation of any website. It creates the page structure: headings, paragraphs, lists, images, links, and so on. The code tells the browser: “Here’s a heading,” “Here’s an image,” “And this is a list.” Every page on the internet begins with HTML.

For example, this is what a piece of HTML code on the “Getting to Know HTML” page looks like :

<!DOCTYPE html>
<html class='h-100' data-bs-theme='light' lang='en' prefix='og: https://ogp.me/ns#'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<meta content='IE=Edge' http-equiv='X-UA-Compatible'>
<meta charset="utf-8">
<title>Getting to know HTML | Basics of HTML, CSS, and Web Design</title>
<link rel="alternate" href="https://www.365education.org/courses/html/lessons/first_step/theory_unit" hreflang="ru-RU">

Then CSS is added to the HTML. CSS (Cascading Style Sheets) is responsible for the appearance, meaning colors, fonts, indents, animations, and responsiveness. While HTML is essentially the “skeleton” of a page, CSS is its appearance.

In the example above, the CSS does the following:

Using a string, class='h-100'it stretches the HTML (and then the body) to the full height of the screen.
Sets the design theme with the command data-bs-theme='light'.
Binds a specific style to a specific language using lang='en'.

In other words, CSS makes a page understandable, pleasing, readable, and user-friendly. However, HTML code can also work independently.

For example, HTML without CSS will simply display black text on a white background:

<h1>Hello!</h1>
<p>This is 365education —programming school for beginners and professionals</p>

Here’s what needs to be done to make the page look neater: the background should be a soft, light gray instead of pure white, the font more modern, and the text itself less contrasting and more pleasing to the eye:

body {
  background: #f0f0f0;
  font-family: sans-serif;
  color: #333;
}
h1 {
  color: darkblue;

         }

CSS sometimes replaces JavaScript

The current version of CSS makes websites responsive (adapting to the device’s screen). It also adds animations, hover effects, and simple interactive elements. And all this without JavaScript, because CSS animates the interface through styles, not logic.

For example, here’s how you can set up a smooth color change on hover:

HTML:

<input type="checkbox" id="toggle">
<label for="toggle">Show block</label>

<div class="content">Привет!</div>

CSS:

.content {
  display: none;
}

#toggle:checked ~ .content {
  display: block;
}

You can read more about tags, attributes, and how they work in the article “A Little Formality” —brief, to the point, and with examples.

So, when you click the checkbox, a hidden block will appear. No scripting required. CSS uses state :checkedto apply the style.

However, CSS can’t work like JavaScript. It can’t do “if…then…” statements if (...) { ... }. However, it can respond to events like hover, click, and load. And it can bind styles and animations to these events.

However, in the first versions, CSS was much simpler: no animations, responsiveness, or hover effects. You could only specify colors, fonts, margins, and basic alignment.

CSS versions

Everything changed with subsequent versions of CSS. Below is a table with the main differences and comments.

Version	Year of release	What appeared	Comment
CSS1	1996 (revised in 1999)	Colors, fonts, indents, alignment	CSS1 was very limited: no positioning, media queries, animations, flexbox or grid, almost no interactivity, and minimal browser support, full of bugs.
CSS2	1998	Tables, positioning, z-index, media types	CSS2 didn’t have media queries, flexbox, grid, animations, transitions, or modern responsive layout features.
CSS2.1	2004	CSS2 Fixes and Clarifications	CSS2.1 still didn’t have animations, transitions, flexbox, or grid—only clarifications and fixes to the previous version, without any major innovations.
CSS3	Since 2011	Modules: Animations, transitions, flexbox, shadows, gradients without JavaScript	CSS3 did not have the full support for logic and dynamics that JavaScript had: it could not respond to complex user actions, perform conditions, or work with data.
CSS4 *	Since 2011	There is no full version as of early 2025	CSS4 as a complete version does not exist – it is more of a marketing label, because in reality, CSS is developed in modules, and there is no single specification

** — There is nothing new in CSS4 as a version – all the innovations, for example,

(), clamp(), container queries, appeared in separate modules.*

Layout designer’s roadmap

A markup developer’s roadmap might look like this (depending on the course methodology—sometimes markup is separated from JS and logic).

Stage 1: Basic layout

HTML Basics: Document Structure, Semantic Tags.
CSS Basics: Selectors, Color, Padding, Borders, Backgrounds.
Working with text: styling headings, paragraphs, and lists.
Images: insertion, scaling, adaptation.
Working with forms: input fields, checkboxes, buttons.
File system: project structure, connecting styles.

Stage 2: Layouts and adaptation

Flexbox: alignment, positioning, nested structures.
Grid: grids, layouts, combinations with Flexbox.
Media queries: adaptability to different screen sizes.
Retina images and vector graphics (SVG).
Working with Figma, Zeplin, or similar tools: reading layouts, exporting assets.
Mobile layout.

Step 3: Tools and Practice

DevTools: CSS debugging, element inspection.
Methodologies: BEM, Atomic CSS.
Styling UI components (cards, modals, forms, tabs, menus).
Cross-browser support: testing and fixes.
Connecting external content: iframe, video, maps.
Basics of animation in CSS (transition, transform, keyframes).

Stage 4: Teamwork and Code Maintenance

Git (basic): clone, commit, push, branches.
Working with preprocessors: Sass or Less (optional).
Code standards and readability: linters, formatting.
Documentation of components and blocks.
Layout for CMS: understanding the limitations and requirements for templates.
Work according to the technical specifications: decomposition, time estimation, and task management.

How long do you need to learn HTML to start creating websites?

To start creating simple websites at a basic level, such as personal pages, landing pages, or portfolios, the free beginner course “HTML Basics” on the Code Basic platform is all you need.

To begin working in this field and aim for leadership positions, you need to gain a deeper understanding of HTML, CSS, and modern approaches to layout. Typically, such a training program is structured from simple to complex: you’ll first learn how to create responsive websites, understand CSS architecture, use frameworks, and work in a team. From there, everything depends on your goals: you can continue to develop to an intermediate level or move on to learning JavaScript and become a front-end developer. Most beginners in layout follow a similar path.

Junior — a beginner layout designer

What you need to be able to do:

Build basic HTML structure (tags html, head, body, headings, paragraphs, lists, etc.).
Use basic tags and classes, such as p, a, img, div, span, h1-h6, ul/li.form, input
Apply basic CSS properties: colors, fonts, padding, borders, alignment ( margin, padding, text-align, color, font-size).
Connect styles (internal and external), use classes.
Make simple adaptability with media queries (@media, changing the location of blocks on mobile devices).
Work with Flexbox.
Use Google Chrome DevTools to check and debug the layout.

Example task: design a landing page with a headline, text, image, and button. The button should change color when hovered. On the mobile version, the blocks should be arranged vertically.

Middle — a confident layout designer, works from layouts, knows the intricacies

What you need to be able to do:

Write clean semantic HTML ( <section>, <article>, <main>, <nav>etc.).
Proficient in Flexbox and CSS Grid.
Create responsive, pixel-perfect layouts using mockups, such as those from Figma.
Use SCSS or other preprocessors (variables, nesting, mixins).
Structure your code and adhere to methodologies such as BEM.
Use pseudo-classes ( :hover, :focus, :nth-child) and pseudo-elements ( ::before, ::after).
Make simple animations ( transition, @keyframes, animation).
Write adaptive components and reusable blocks (fragments that can be used in different parts).

Example task: Design a product card based on a Figma layout. Implement view switching (list/tile) using classes. Add appearance animations and adaptation for tablets and mobile devices.

Start learning CSS now
A free CSS course is waiting for you!

Senior — Style Engineer, thinks about support and scaling

What you need to be able to do:

Think through the structure of your CSS code in advance.
Use modern CSS features: :is(), clamp(), custom properties, container queries.
Work with accessibility, cross-browser compatibility, and performance.
Create complex UI components without JS (e.g., drop-down blocks, filters).
Configure the build (PostCSS, Vite/Webpack).
Mentor, conduct code reviews, and improve processes within the team.

Courses for senior coders are typically informal—they involve working on real projects, learning through practice, mentoring, code reviews, and deep dives into the details. You begin to see for yourself how to best build code.

Example task: develop a responsive component library for internal services with support for light and dark themes via CSS custom properties, documentation, multilingual support, and dynamism without JavaScript.

What you don’t need to learn if you’re a beginner

If you’re just getting started with programming and, for some reason, have decided to figure out HTML on your own, don’t rush to Google everything. Here are a few tips to help you avoid getting lost in the beginning:

CSS preprocessors (SASS, LESS) aren’t a good starting point. They’re useful, but only after you’ve mastered pure CSS, meaning without preprocessors, frameworks, or unnecessary add-ons.
BEM, CSS methodologies, and architecture are for advanced users. Learning to write clearly and neatly is more important than following a complex system.
Complex movements, backgrounds, and @keyframesframe-by-frame animation descriptions are best left until you’re more confident. However, complex effects like transitions and hovers are what a beginner needs.
Grid is essential, but it’s worth getting comfortable with Flexbox first. It’s simpler and covers 80% of the tasks.
Frameworks and libraries (Bootstrap, Tailwind) speed up your work, but only when you understand what they’re doing under the hood (inside the technology).

Explore More IT Terms

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

#

B

C

D

E

F

G

Go from Zero to Mastering SQL in Under 15 Minutes

H

I

J

K

L

M

O

P

Q

R

S

T

V

W

Y

YAML

CONTINUE LEARNING Next: HTML and CSS: Definition, Application, and Operating Principles →

CSS HTML

HTML and CSS. Layout from Scratch: What to Learn, Where to Learn, and How Long Will It Take?

Introduction

CSS sometimes replaces JavaScript

CSS versions

Layout designer’s roadmap

Stage 1: Basic layout

Stage 2: Layouts and adaptation

Step 3: Tools and Practice

Stage 4: Teamwork and Code Maintenance

How long do you need to learn HTML to start creating websites?

Junior — a beginner layout designer

Middle — a confident layout designer, works from layouts, knows the intricacies

Start learning CSS now

Senior — Style Engineer, thinks about support and scaling

What you don’t need to learn if you’re a beginner

Explore More IT Terms

#

A

B

C

D

E

F

G

H

I

J

K

L

M

O

P

Q

R

S

T

V

W

Y

RELATED ARTICLES

HTML

HTML and CSS: Definition, Application, and Operating Principles

Developing a Website from Scratch

Embedding Video on a Website

Creating Forms in HTML

HTML Frame Structure

Leave a Reply Cancel reply