Professional Website Layout
of graduates find jobs within 2 months after graduation
77%
companies are looking for web developers
According to data collected on LinkedIn
997
Master the layout skills needed to create modern and responsive sites. You will learn to work with HTML, CSS, and modern tools to turn your ideas into quality web solutions.
Start Now
What does a layout designer do?
A layout designer creates websites and applications, ensuring user interaction with the interface on a computer or mobile device.
They work with markup and style languages such as HTML and CSS, as well as JavaScript and TypeScript, with frameworks and libraries, create web pages, and implement design layouts using animations and graphics.
What will you learn in the course?
To write code in HTML and CSS.
With HTML you will be forming the structure of the website, while CSS will allow you to style it by adding colors, animations, fonts, and much more.
What does a layout designer do?
A layout designer creates websites and applications, ensuring user interaction with the interface on a computer or mobile device.
They work with markup and style languages such as HTML and CSS, as well as JavaScript and TypeScript, with frameworks and libraries, create web pages, and implement design layouts using animations and graphics.
What will you learn in the course?
To layout websites for any screens.
You will master block, fluid, and responsive layouts, as well as learn to adapt website content for screen sizes, ensuring comfortable viewing from any device.
What does a layout designer do?
A layout designer creates websites and applications, ensuring user interaction with the interface on a computer or mobile device.
They work with markup and style languages such as HTML and CSS, as well as JavaScript and TypeScript, with frameworks and libraries, create web pages, and implement design layouts using animations and graphics.
What will you learn in the course?
To consider browser features when laying out.
You will create websites that will look and function the same in Google Chrome, Mozilla Firefox, and Safari.
What does a layout designer do?
A layout designer creates websites and applications, ensuring user interaction with the interface on a computer or mobile device.
They work with markup and style languages such as HTML and CSS, as well as JavaScript and TypeScript, with frameworks and libraries, create web pages, and implement design layouts using animations and graphics.
What will you learn in the course?
To check websites for accessibility.
Any person, regardless of individual characteristics and health, will be able to use the websites that you create.
What does a layout designer do?
A layout designer creates websites and applications, ensuring user interaction with the interface on a computer or mobile device.
They work with markup and style languages such as HTML and CSS, as well as JavaScript and TypeScript, with frameworks and libraries, create web pages, and implement design layouts using animations and graphics.
What will you learn in the course?
To work with web development tools.
You will master the version control system Git for teamwork. You will learn to make real-time edits to the layout using Google Developer Tools.
What does a layout designer do?
A layout designer creates websites and applications, ensuring user interaction with the interface on a computer or mobile device.
They work with markup and style languages such as HTML and CSS, as well as JavaScript and TypeScript, with frameworks and libraries, create web pages, and implement design layouts using animations and graphics.
What will you learn in the course?
Adapt websites for people with different types of perception and conditions
You will learn to ensure the accessibility of information and functionality for all users, including those who face limitations in vision, hearing, or motor skills.
You will expand your professional horizons by mastering new technologies and approaches in web development, which will open doors to interesting and well-paying projects.
For an IT specialist looking to change their profile:
The course offers relevant knowledge and skills that are constantly updated in accordance with market requirements, allowing you to deepen your competencies and remain competitive.
For a layout designer seeking to update their skills:
Who is this course for?
You will master the basics of layout by creating websites and applications from scratch, enabling you to build an impressive portfolio and successfully start your career as a developer.
For a beginner who wants to obtain a sought-after IT profession:
Course program
The curriculum includes video lectures on HTML and CSS, as well as tests and practice assignments to help you consolidate your knowledge of HTML and CSS, as well as website creation and layout.
What this course is about
- Preparation. Downloading materials. How to take the course.
- Stay in touch with me
- What this block is about
- Creating the first website
- How HTML tags and CSS styles work
- Head and Body tags. The correct structure of a web page
- How title and description tags work in the head tag.
- How the "container" tag - div works
- How to work with classes in layout
- How to connect a stylesheet to an HTML file
- PRACTICE: Create and style several div tags
- Instructor's example. "Practice: create and style several div tags"
- Overview of neural networks
- The best artificial intelligence models today
- How to pay for a Chat GPT subscription
- Overview of Chat GPT plans
- Chat GPT program for different operating systems
- Using Chat GPT for learning
- Using Chat GPT for programming
- Where else Chat GPT is useful
- How to screen share with Chat GPT
- Image generation using Chat GPT and more
- Advanced Voice mode in Chat GPT
- How GitHub Copilot works
- What this block is about
- Classification of websites
- Correct structure of files and folders in the project
- How to use VS Code plugins
- If your Go Live plugin is not working
- How semantic tags work
- How to work with color in layout
- How to add an image to the site using the IMG tag
- How the developer console in the browser works
- How to create menus and links
- List tags UL and OL
- How to set margins for elements using margin and padding.
- How block and inline elements work
- What "Margin collapsing" is
- Correct organization of margins in layout part 1
- How to use "Pseudo-classes"
- Correct organization of margins in layout part 2
- How to quickly clear your browser cache
- How to add an image using the background-image property
- Positioning elements on a web page
- How z-index works
- How to add a gradient fill through CSS
- Aligning elements horizontally
- Box-sizing. Padding inside the element's size.
- CSS units of measurement
- CSS selectors
- The span tag
- Can I use
- Normalize.css and Reset.css - Resetting browser styles
- How to add an interactive map to the site
- The HR tag or how to draw a line
- How to use different fonts on the site
- How to install fonts on a computer
- Uploading a site to real hosting. Choosing and configuring a domain.
- How to edit a site uploaded to hosting through VS Code
- What this block is about
- On the Figma interface update
- What is the mini-course about?
- Preparation. Downloading materials
- What size is the website?
- How to save your project
- How to work with grids and guides
- Briefing with the client.
- Mood board and seeking inspiration
- Creating a project wireframe
- Stock photo sites. Where to find the perfect photo?
- How to work with images in Figma
- Hierarchy of elements in Figma
- How to work with color in Figma
- The difference between UX and UI
- How to create text in Figma
- Lines and outlines of shapes
- How to group elements
- Searching for and installing new fonts
- How to work with icons
- How to work with gradients
- How the subtract tool works
- Stock site for icons. Searching for icons
- How to work with layer masks
- How to use placeholder text in Figma
- How to add effects to elements
- Exporting from Figma and handover to development
- 2023 Update. Where did the inspect tab go?!
- Congratulations on completing the mini-course!
- What this block is about
- SASS preprocessor part 1
- SASS preprocessor part 2
- How to work with errors
- FlexBox. A new way to position elements.
- BEM methodology and how to use it
- Using FlexBox and BEM in a new project
- How to turn a raster logo into a vector using Illustrator
- Roundness / Rotation / Shadows for elements
- What icon fonts are
- Creating the first button
- Using BEM modifier. New overflow property
- Min/Max - Height/Width
- Practice. Creating the second section of the site
- Practice. Creating the third section of the site
- Practice.Creating the website footer
- Adding anchor links to the navigation menu
- What are fav-icons, and how to install them in your project
- What is this block about
- What types of layouts exist
- How the meta tag viewport works
- What sizes should the website be adapted to
- Adaptation for tablet version part 1
- Practice: Adapt the website for the next version.
- Example from the instructor. Adapting the next version for tablet
- How EM/REM VH/VW units work
- The transition property. Creating a hamburger for the mobile version of the website
- Creating a hamburger for the mobile version of the website part 2
- Introduction to JS. Creating a hamburger for the mobile version of the website part 3
- Speed test of the finished website
- What is this block about
- What is bootstrap
- How to include bootstrap in your project
- What settings are contained in bootstrap
- How to set your styles in bootstrap
- The Object-fit property and how to create a slider in bootstrap
- How to modify the slider in bootstrap
- How to change colors in bootstrap
- How to change the slider speed in bootstrap
- Typical mistakes and issues when working with bootstrap
- How to change bootstrap component elements. Changing icons on the slider
- Bootstrap grid system. Bootstrap-grid
- How to solve problems arising during layout
Conclusion
Why choose our course?
As part of the course, you will encounter hundreds of exercises in the simulator, various challenges, and real projects, allowing you to immediately apply the knowledge you have gained in practice.
Abundance of practice:
Our instructors are practicing developers who will help you adjust your learning path and overcome emerging difficulties, making the learning process more effective.
Experienced mentors:
Our graduates are in high demand among employers, and the certificate you will receive upon completing the course will serve as proof of your knowledge and skills.
Completion certificate:
Certificate
After the training, you will be able to receive a certificate confirming your qualifications.
Experts and course curators
Alexey Smirnov
Author course | WebMastery
Over 12 years of experience in web development
Worked on projects for startups and large companies in Russia and abroad
Conducted over 30 online and offline workshops on web development and design.
Andrei Sidorov
Curator / Expert in Frontend Development
Over 7 years of experience in frontend development
Worked on projects for major IT companies and startups
Conducted more than 15 webinars and courses on modern web development technologies.
Experts and course curators
Andrei Sidorov
Curator / Expert in Frontend Development
Over 7 years of experience in frontend development
Worked on projects for major IT companies and startups
Conducted more than 15 webinars and courses on modern web development technologies.
Elena Vasilieva
Curator / Specialist in Web Design and Development
Over 8 years of experience in web design
Worked with international clients, creating unique web solutions
Conducted more than 20 master classes on web design and graphics.
Experts and course curators
Elena Vasilieva
Curator / Specialist in Web Design and Development
Over 8 years of experience in web design
Worked with international clients, creating unique web solutions
Conducted more than 20 master classes on web design and graphics.
Maria Kuznetsova
Curator / Mentor in Programming and Web Development
Over 9 years of experience in programming
Worked on projects in the field of e-commerce and mobile applications
Conducted more than 18 seminars and courses in programming and web development.
Experts and course curators
Maria Kuznetsova
Curator / Mentor in Programming and Web Development
Over 9 years of experience in programming
Worked on projects in the field of e-commerce and mobile applications
Conducted more than 18 seminars and courses in programming and web development.
Alexey Smirnov
Author course | WebMastery
Over 12 years of experience in web development
Worked on projects for startups and large companies in Russia and abroad
Conducted over 30 online and offline workshops on web development and design.
Inspiring stories of our graduates
Alexey Gromov
"I have always dreamed of a career in IT, but I didn’t know where to start. After completing a course in layout, I got my first job at a startup. At first, it was difficult, but thanks to the support of the curators and practical assignments, I quickly got the hang of it. Now I work for a large company and develop interfaces for mobile applications. This course became my starting point in the world of web development!"
Dmitry Smetanko
"I searched for a suitable course for a long time, one that would truly teach me web development. Here I found exactly what I was looking for. The program was intensive, and the curators were always ready to help. After completing the course, I had an interview with a large company and landed the job I had dreamed of. Now I am working on interesting projects and continue to grow in this field."
Olga Sokolova
"When I decided to change professions, I was scared. I chose the course because it promised a lot of practice. And I was not disappointed! After finishing the course, I got an internship at a well-known IT company, and six months later, I was hired for a permanent position. I am grateful to the author and the curators of the course for helping me believe in myself!"
Sergey Slonov
"My journey into programming began with a layout course. I was skeptical but decided to give it a try. The program turned out to be very useful, and I learned not only how to code but also how to work in a team. After completing the course, I interned at a well-known company and soon got a permanent job. I am glad I chose this particular course — it was the best decision of my life!"
Choose the Right Tariff
Basic
Self-study of the material without feedback
$15 instead of $20
25%
Curriculum - 8 modules
discount
Study materials
Practical assignments
No feedback
No certifiCourse access - 2 monthscate
No certificate
$5
Introductory
Get acquainted with the course, its materials, and decide on further education
Introduction to the course - 1 module
Study materials - 2
No feedback
Access - unlimited
No certificate
Caring
All course materials + curator support + certificate
$30 instead of $39
30%
Curriculum - 8 modules
Study materials
Practical assignments
Student chat
Feedback from curators
Course access - 6 months
Certificate
discount
Corporate
The opportunity to train employees according to the company's goals, providing access to specialized materials and support.
$500
Groups of 5 - 10 people
Curriculum - 5 modules
All study materials
Curator support
Access for 12 months
Joining the group chat
Certificate
Course access - 12 months
Certificate
Premium
Mentor support throughout the course
$45 instead of $65
30%
Curriculum - 8 modules
Study materials
Practical assignments
Student chat
Mentor support
Chat with curators
discount
Question and answer
Yes, the course is suitable for complete beginners with no programming experience. But to achieve results, you need to put in the effort—complete the practical assignments.
There is no need to download anything in advance. During the course, we will help you install all the necessary software for your work.
Web layout does not require many computing resources, so a standard laptop or computer will suffice. Here are the minimum specifications for the hardware:
Operating system: Windows 8.0 or higher, macOS 10.12 (macOS Sierra) or higher.
Processor: 4-core with a frequency of 2.5 GHz or higher.
RAM: from 4 GB.
Graphics card: Intel HD Graphics 4000, Nvidia 330m, or ATI Radeon HD 4850 and above.
It is preferable, but not required, for the storage to be on SSD.
Screen resolution: preferably 1920×1080.
Internet access.
Operating system: Windows 8.0 or higher, macOS 10.12 (macOS Sierra) or higher.
Processor: 4-core with a frequency of 2.5 GHz or higher.
RAM: from 4 GB.
Graphics card: Intel HD Graphics 4000, Nvidia 330m, or ATI Radeon HD 4850 and above.
It is preferable, but not required, for the storage to be on SSD.
Screen resolution: preferably 1920×1080.
Internet access.
The mission of our course is to make expensive IT education accessible to everyone!
What if the course doesn’t suit me or I don’t like it?
If during the course you realize that this course is not suitable for you - within 30 days from the date of purchase, you can get a full refund.
What if the course doesn’t suit me or I don’t like it?
If during the course you realize that this course is not suitable for you - within 30 days from the date of purchase, you can get a full refund.
HTML is the most widely used markup language on the internet. You can think of HTML as a set of commands that defines the structure and logic of a website.
CSS is the language that describes the style of a website. If HTML is responsible for the content, then CSS defines the appearance of the website.
CSS Grid is a tool in CSS: a special grid that helps arrange website elements symmetrically and neatly.
Figma is a service where designers create the interfaces for websites and mobile applications.
Webpack is a tool that can help automate part of the work on layout.
Pixel Perfect is an approach in layout where every pixel of the finished website occupies the same position as in the designer's mockup. If you "overlay" the design on the website, the difference will be minimal.
Visual Studio Code is a free code editor for developing web applications.
CSS is the language that describes the style of a website. If HTML is responsible for the content, then CSS defines the appearance of the website.
CSS Grid is a tool in CSS: a special grid that helps arrange website elements symmetrically and neatly.
Figma is a service where designers create the interfaces for websites and mobile applications.
Webpack is a tool that can help automate part of the work on layout.
Pixel Perfect is an approach in layout where every pixel of the finished website occupies the same position as in the designer's mockup. If you "overlay" the design on the website, the difference will be minimal.
Visual Studio Code is a free code editor for developing web applications.