Online Course HTML and CSS. Responsive Layout and Automation

The course is designed for those who want to change their profession and become a highly paid professional. It is suitable for working people who have little time.

Why this course is professional

In this course, you will learn to create real projects, with the same level of complexity as in the industry. And you will do them correctly, so that after the course you can deliver high-quality results that companies are willing to pay for.

To achieve such training quality, we use the professional triad "criteria-projects-mentors":

MentorsMentors, who are professional developers, check your projects for compliance with quality criteria.

Quality criteriaWe develop professional quality criteria together with companies and the professional community.

Real projectsDuring the course, you complete real projects.

Real projects

During the course, you complete real projects.

What’s the difference from exercises?

It’s exactly in this triad. In exercises, you study the basic language constructions, while on the professional course you learn techniques and methods for solving real-world professional tasks.

How the
Training Works

What to Expect During the Training

Is This Course Right for You?

We Teach You to Do Things Right

Mentors — experienced professionals working in the industry

Mentor

We believe that students should receive feedback from experienced specialists who are currently working in the market, solving modern problems, and using up-to-date approaches and tools.

To select such specialists, we built a unique recruitment and filtering system.

Together with your mentor, you will develop a project in an ecosystem familiar to professionals. The workflow is very similar to real development in large companies.

Mentor selection process

  1. Formal requirements

    We check where the mentor candidate worked, what experience they have, and also review their code.

  2. Interview

    We conduct a one-hour interview to assess subject knowledge, the ability to explain clearly, and other personal qualities.

  3. Regular feedback

    Candidates who pass the interview start working with students. This is just the beginning of their mentoring journey. After each course, we collect feedback that helps mentors improve.

Working with a mentor

During the course, a mentor will accompany you. They will review your code, check your assignments, answer questions, and share their expertise.

Hi. My last product block is misaligned, I tried everything. Can you take a look?
Let’s call today and figure it out together.
Voice consultation with a mentor

Detailed feedback

Code review is a common practice in large companies when a more experienced developer checks the code of a less experienced one. Most of the feedback you’ll receive from your mentor will be in the form of code reviews.

Voice consultations

When code review isn’t enough, mentors use voice consultations, often with screen sharing. During these sessions, they analyze complex issues or demonstrate advanced techniques.

What’s Included in the Course Program

During the course, you will work like professional front-end developers: create markup using the BEM methodology, write CSS code with preprocessors, build a responsive grid, work with responsive and retina graphics, and set up project build automation for deployment. At every stage, your work will be reviewed and commented on by a mentor.
BEM Markup
Responsive Grids
Responsive & Retina Graphics
Build Automation

Training Projects

During the course, you will work on the project “Cat Energy”. In the individual training program, you will also have access to additional projects: “Sedona” and “Mishka”.

Tablet version of the “Mishka” projectMobile version of the “Mishka” projectDesktop version of the “Mishka” project

During the course, you will have time to develop and defend from one to three projects.

Desktop version of the “Sedona” projectMobile version of the “Sedona” projectTablet version of the “Sedona” project

Company Reviews

We have long established ourselves in the professional community. Both developers and large companies know us and our graduates. Here are some reviews from companies about our courses and graduates.

Overall, the training program at the Academy is well-structured for a start. It helps prepare a universal professional who can work effectively both in an agency and in a large product company. If someone defends their project 100%, it shows that they are capable of learning, motivated, and have the personal qualities needed for future work. After that, everything depends on their activity and ability to prove their skills in practice.

As a mentor in the courses and a former student, I know the Academy’s quality standards and how the work is organized. Everything is as close to real conditions as possible — Git version control is used, projects are divided into stages (iterations), mandatory code review by mentors, and strict deadlines. Much attention is paid to accessibility, which is beneficial for the entire industry.

At Avito, we don’t have layout designers, only frontend developers of different levels. To join us as a junior developer, a person must have certain skills: confident knowledge of HTML, CSS, and JavaScript, understanding how the browser works, knowledge of cross-browser compatibility, API, DOM, and other key basics. In addition, we value responsibility, teamwork, the desire to grow, and initiative.

Yana Kriklivaya Frontend Developer, Avito

Avito

Avito An online service for posting ads about goods, services, jobs, and resumes on the labor market.

When it comes to layout and creating web pages, our team is very attentive to semantic markup, the ability to write clean CSS, and systematic thinking in a developer. Pages should not only look good for users but also load quickly, be well-structured, and of course, convenient for teamwork. With the volume of projects we have, this is very important.

We also value an understanding of accessibility principles, since caring about people who will use the interface is simply good practice. A person joining our team should not be afraid to tackle unfamiliar tasks, look for creative solutions, and take responsibility.

In this sense, the Academy’s approach to training seems adequate: code reviews from experienced developers prepare students well for work. It is especially valuable that all project work is done through Git — in our company, all work also goes through mandatory reviews.

Currently, a graduate of the Academy, Pavel, works in our team, and I am satisfied with him. The necessary basic skills, understanding of semantics, working with clean CSS — all of this is at a good level. As for JavaScript — he quickly adapts if he has done something similar before. He was ready to get to work right away.

Sometimes, when a new junior developer joins, mentoring has to cover even the smallest details. With Pavel, integration into the team was almost effortless.

As a manager, I don’t care about certificates and diplomas; I look at the code a person writes, what drives them to work in this field, and why they chose frontend. If I see that a person is self-developing, taking courses, and determined — for me, that is a good indicator of their motivation.

Sergey Chikirev Wrike Website Team Lead

Wrike

Wrike A popular service for project management and team collaboration.

At Ostrovok.ru, we are constantly looking for talented people: our product is developing rapidly, and extra frontend hands (preferably “golden ones”) are always needed. Finding a good specialist is not easy, so we have turned to the Academy several times when recruiting juniors.

The guys came with a solid foundation and enthusiasm, quickly integrating into our processes and team. Currently, three graduates of the Academy work at Ostrovok.ru — all in junior positions and doing great.

Thanks to the Academy for well-prepared specialists.

Ostrovok.ru

Ostrovok.ru An online service for booking more than 900,000 hotels.

We regularly send our employees to trainings, seminars, and intensives and are always open to educational programs — this is how we got to know HTML Academy.

Employees who completed the courses said that the material in the lectures and assignments was presented clearly and engagingly. They also noted that after the training, thinking shifted to better understand the specifics of the language, which helps in their work. The training required a lot of time, but it was worth it.

For our company’s tasks, the training program covers all the necessary fundamentals and even some tricks. That’s why we send both experienced developers to the Academy to structure their knowledge and beginners to bring them up to the required level.

Valeria Shemyakina Training Manager, Ozon

Ozon

Ozon One of the largest online retailers.

HTML Academy is the best thing that has happened to IT education.

If you’re afraid you won’t understand or think “programming is not for you,” then HTML Academy is perfect for you. There will always be someone to ask and someone to support you.

They worked a lot with the community to understand exactly what knowledge is needed at work. It’s amazing how close everything is to real development.

Andrey Sitnik

Andrey Sitnik Author of many open-source projects. Creator of PostCSS, Autoprefixer, and Logux.io.

A graduate of the Academy applied for our frontend developer position. The knowledge gained in the JavaScript and layout intensives helps him solve tasks with minimal effort.

Overall, the training at the Academy gave our employee the opportunity to grow as a good developer and approach problem-solving professionally.

HyperMethod

HyperMethod A leading developer of solutions for distance learning, knowledge and training management, and employee development and assessment in companies and educational institutions.

A huge thanks to HTML Academy for amazing graduates! We hired three interns, and later two of them stayed with us full-time. Great guys with solid backgrounds! The Academy trains strong specialists!

NORDMOUNT

NORDMOUNT Implementation, customization, and integration of Salesforce in the US and Western European markets.

Course Program

Training

Section 1

Start

Meet the instructors, mentors, and learn about the course workflow. Explore how the web works and what you will do in a job. Install and set up the tools you will need.

  • Get familiar with the course structure, review personal projects, and understand the quality criteria for evaluation.
  • Learn who the authors, curators, and mentors of the course are.
  • Discuss the structure of websites, who builds them, and what the responsibilities of a front-end developer are.
  • Look at the tools used in the course: graphic and code editors, browsers and debuggers, version control system.
  • Understand the process of working on a project and preparing it for defense.
ScreencastsScreencastsArticlesArticles
  • Articles to help choose a code editor, understand the console, and start using version control.
ProjectsProjects
  • Set up development tools, get graphic mockups, and create project repositories.
  • Practice the workflow: make changes in a branch and submit a pull request on GitHub.
Section 2

Markup Methodologies

Create semantic, accessible markup using methodology principles.

  • Code organization.
  • Teamwork.
  • Technology limitations.
  • Classic approach.
  • Independent blocks.
  • Atomic approach.
  • Components and modules.
  • Why complexity is sometimes necessary.
  • How to break the interface into blocks.
  • Elements and modifiers.
  • Common mistakes and pitfalls.
  • Analyzing a study project based on BEM.
DemonstrationsInteractive DemonstrationsArticlesArticles
  • Articles on methodologies and coding styles to help you create quality markup.
ProjectsProjects
  • Practice task: apply BEM methodology to markup elements.
  • Markup assignment for personal project pages.
Section 3

Responsive Graphics

Dive into responsive and retina graphics. Learn about formats and their purposes.

  • Difference between physical and logical pixels.
  • What retina graphics are.
  • Techniques for retina optimization of web page content.
  • The versatile <picture> tag.
  • Retina optimization of content images using srcset.
  • Cropping images with <source>.
  • Using modern image formats via <source>.
  • Images with unknown sizes and sizes attribute.
DemonstrationsInteractive Demonstrations
  • Interactive demonstrations on responsive graphics.
ArticlesArticles
  • Articles on nuances of responsive graphics.
ProjectsProjects
  • Task: retina optimize images and integrate responsive images into the project.
Section 4

Preprocessors and Automation

Take a look at preprocessors and understand how they help in the markup process.

  • Overview of preprocessors.
  • New CSS capabilities.
  • Comparison of features.
  • Comparison of preprocessors.
  • Variables and math operations.
  • Nested selectors.
  • Color operations.
  • File imports.
  • Mixins and extensions.
  • Code organization.
  • Building styles.
  • Node.js-based build system.
  • Gulp task runner.
  • Build automation and watchers.
ExercisesExercisesArticlesArticles
  • Articles about CSS architecture approaches, preprocessor features, and automation environment setup.
ProjectsProjects
  • Pull the latest Keks update from the master repository.
  • Start personal project markup using a preprocessor.
Section 5

Vector Graphics

Learn how to use vector graphics in all possible ways and use graphics optimally.

  • Advantages and disadvantages of vector graphics.
  • Embedding SVG from external resources.
  • Inline SVG embedding.
  • Use cases and benefits.
  • Implementation options.
  • Dos and don'ts.
  • Animation.
  • Responsiveness.
  • Export peculiarities from Figma.
  • Compressing and optimizing SVG.
  • Accessibility.
  • Lossy and lossless compression.
  • Overview of the Squoosh optimizer.
  • Overview of WebP format and its applications.
DemonstrationsInteractive Demonstrations
  • Interactive demonstration of SVG usage examples.
ExercisesExercisesArticlesArticles
  • SVG practice exercises.
  • Articles on responsive graphics, vector graphics details, and why developers must choose the right image formats.
ProjectsProjects
  • Task: use different image versions for different states of the personal project.
Section 6

Responsive Grids

Learn how to create responsive grids using CSS Grid and Flexbox.

  • Grid structure: rows, columns, lines, spacing.
  • Manual and automatic layout.
  • Box Alignment specification and alignment within grid.
  • Grids for responsive layouts.
  • Introduction to Flexbox.
  • Container, items, axes.
  • Algorithm for calculating element sizes.
  • Alignment and distribution of elements along axes.
  • Single-line and multi-line container, row management.
  • Flexbox peculiarities when building grids.
  • Principles of grid restructuring.
  • Media queries and breakpoints.
  • Organizing code for mobile, tablet, and desktop versions.
  • The two-viewports issue on mobile devices.
  • Viewport configuration.

Textbook

Skills for building grids using CSS Grid and Flexbox.

Creating responsive grids for BEM blocks of the study project.

DemonstrationsInteractive Demonstrations
  • Interactive demonstrations of responsive grids. Experiment with them yourself.
ExercisesExercisesArticlesArticles
  • Exercises for mastering grid building techniques.
  • Articles to understand responsiveness, media query challenges, and viewport specifics.
ProjectsProjects
  • Task: create responsive grids for all pages and states of the personal project.
Section 7

Responsive Decorative Elements

Learn about responsive decorative elements. Create responsive markup with fluid grids.

  • Difference between fluid and fixed layouts.
  • Transition from pixels to percentages.
  • Precise fluid columns using Flexbox.
  • Imprecise fluid columns using flex-grow.
  • Flex within flex and elements with fluid height.
  • When to use fluid grids and their complexity.
DemonstrationsInteractive Demonstrations
  • Interactive demonstrations of responsive Flexbox-based layouts.
ArticlesArticles
  • Articles on advanced Flexbox techniques.
ProjectsProjects
  • Task: complete responsive markup for personal project pages.
Section 8

Deep Dive into Automation

Prepare the project build for publication.

  • CSS minification.
  • Image optimization.
  • SVG sprite build and minification.
  • Keep code developer-friendly and browser-efficient.
ArticlesArticles
  • Articles about automation: why it’s needed and differences between tools.
  • Set of necessary tools for automation using Gulp.
ProjectsProjects
  • Task: prepare an automated project build with required file optimizations for the personal project.
Section 9

Markup Performance

Learn about markup performance and optimize bottlenecks.

  • Number and size of resources.
  • Differences between resource types.
  • Loading metrics.
  • Responsibility areas between backend and frontend.
  • Loading priorities.
  • Analysis tools.
  • Consequences of slow loading.
  • Formats and browser support.
  • Negative effects during loading.
  • Render management with font-display.
  • Performance analysis with Lighthouse.
  • Reading Lighthouse reports.
  • Alternative tools.
  • Tips for resource loading.
ArticlesArticles
  • Articles on CSS animation performance, font optimization, and SVG optimization.
  • Articles on layout rendering performance, including repaint and reflow details.

Project Defense Preparing the project for the final defense and evaluation by the mentor according to quality criteria.

Project Defense

Project review by the mentor according to quality criteria, project improvement, and defense.

Recommended Software for Taking the Course *

Operating System
  • Windows 10 x64
  • Mac OS 11 Big Sur or newer
  • Ubuntu 20.04 or newer
Browser
  • Blink-based browser: Chrome, Yandex Browser, Opera, Edge — latest version
  • Mozilla Firefox — latest version
  • Apple Safari 15.2 or newer
Version Control System
  • Git
  • Git Bash for Windows
Development Environment
  • Node.js LTS
  • npm (version included with Node.js)

* We recommend this setup because we tested all exercises in this environment and confirmed that everything works without errors.

Certificate

After completing the course, you will receive an electronic certificate

Online course certificate “HTML and CSS. Responsive Layout and Automation”

Academy Statistics

  • 13years in the education market
  • 314online courses conducted
  • 45,202graduates who completed projects

Graduate Reviews

Learning Formats

Individual Format

Learn with a personal mentor at your own pace. Perfect for demanding and busy students.

  • One hour of personal consultation with your mentor each week
  • Free introductory consultation with your future mentor
  • Monthly payment, no bank installments or loans
  • The course takes 2–4 months depending on intensity
  • Access to the platform and all course materials, which remain available after completion

$120.00 per month

Buy course

Consultation with a Mentor

If you plan on personal learning, you can meet your future mentor before the start.

  • The consultation is free
  • The mentor, not a manager, provides the consultation
  • To schedule a consultation, contact us on Telegram @htmlacademy_sales

Lite Format as Part of the Frontend Developer Program

Learn at your own pace with high-quality materials at the most affordable price.

  • Weekly group Q&A sessions with mentors
  • Support from on-duty mentors in a private study chat
  • In-depth review of your personal project by a mentor
  • Access to this course and all courses in the Frontend Developer program
  • Access lasts 2 years

$899.00 $449.00

Contact us

Sign up and buy course
«HTML & CSS. Professional Website Layout»

$120.00

By paying, you agree to our «License Agreement» and «Privacy Policy».