Professional layout
HTML and CSS for
perfect websites
You will learn HTML and CSS in practice, learn to create clean, semantic code and layout adaptive, cross-browser layouts.
Get Started Now
  • Full course
  • Practice in the project
  • Without water
  • Certificate
VERSTALER specialist who transforms a design layout into a browser page using HTML and CSS.
Key technologies every developer should know
"
HTML and CSS are the foundation of web development. With their help, you will be able to create websites and applications, as well as take the first steps in mastering the professions of frontend developer and layout designer.
HTML is the markup language that creates the structure of a page: headings, paragraphs, links and lists.
CSS is responsible for the appearance: colors, fonts, sizes and positioning of elements. Together, they allow you to create and manage the design of websites.
Specialists skilled in layout are in demand
IT sector
Gaming
Banking
Service sector
Retailing
This course is right for you if you are
Beginners
Want to grow in web development? A skill in layout will help you overcome your fear of code and make it easier to enter the profession.
Junior
Are you already a junior but not so confident with layout? Learn to build websites like a pro so you don't waste time learning on the job and grow faster in your career.
Web Designer
Want to add value to your services? Master layout design to offer comprehensive solutions to clients and increase revenue.
Related IT Professionals
Try your hand at a new role. Apply development skills to your current job or change direction with new opportunities.
Skills you will
learn on the course
  • Creating websites and page layouts using HTML.
  • Application of modern layout technologies: Flexbox and CSS Grid.
  • Adaptive layout for different screen resolutions.
  • Working with the terminal to perform development tasks.
  • Styling of pages using CSS.
  • Code organization by BEM methodology.
  • Acceleration of layout using SASS/SCSS preprocessors.
  • Basics of working with npm for dependency management (professional level).
You will practice on the basis of real cases
You will solve layout tasks in class and at home. By the end of the course you will have a portfolio that will help you compete for projects on a par with experienced professionals.

All assignments are checked by supervisors and give detailed feedback. Feel free to ask them questions at any time in the group chat.
Course Program
Module 1 Setting Up Your Workspace
  • Editor
  • Creating a Project
  • Hotkeys
  • .zip .rar
  • Last Lesson of the Module
Module 2 Initial HTML. Creating the first website
  • Creating the first project
  • HTML semantics
  • Basic HTML tags
  • Headings and paragraphs
  • Filling the project with text
  • Working with lines
  • Working with images
  • Lists
  • Quotes
  • Working with links
  • Create a menu
  • Add transitions for menu items
  • Answer to dz by id
  • Semantic tags
  • Footer
  • Full HTML version
  • div span
  • Last lesson of the module
Module 3 Introduction to CSS
  • CSS Semantics
  • Inline-style
  • Linking a file with styles
  • Specificity
  • Connecting Images
  • Practice
  • Color and Background
  • Practice
  • Inspector
  • Remote Fonts Connection
  • Connecting local fonts
  • Lecture on fonts as such
  • Units of measurement
  • Positioning
  • Positioning practice
  • margin
  • Box sizing
  • Pseudo-elements Part 1
  • Pseudo-elements Part 2
  • Practice
  • Solution
  • Pseudo-class
  • Solution
  • Last lesson of the module
Module 4 Layout practice. Landing page
  • Universal Graphic Editor
  • Read the layout
  • Creating a working environment
  • Adding fonts
  • Adding images
  • Let's make the Header. Part 1
  • Practice
  • Normalize
  • Layout Header. Part 2
  • Practice
  • Let's make Navigation
  • Layout Header. Part 3
  • Practice
  • Layout Header. Part 4
  • Practice
  • Responsive Header. Part 1
  • Adaptive Header. Part 2
  • Creating a hamburger menu
  • Burger Animation
  • First acquaintance with JS
  • The final touch for Header
  • Hero block layout
  • Responsive Hero
  • Products section
  • Products section Part 2
  • Why are we doing this?
  • Responsive Product DZ
  • Explanation of the homework
  • Category block
  • Snippets
  • Forms on the site
  • History block
  • History block adaptation
  • History Block Adaptation Part 2
  • Footer html
  • Footer css
  • Footer. Getting acquainted with the Grid system
  • The last lesson in the block
Module 5 Advanced Layout | New Project
  • About This Module
  • SASS and SCSS preprocessors
  • Live Sass Compiler plugin
  • Sass Plugin Settings
  • npm sass
  • Variables
  • Task for working with Sass
  • Task solution
  • Project creation
  • Fonts connection via SASS
  • Finalize the project structure + terminal
  • Adding variables to the project
  • Header_01
  • _reset.sass
  • Header_02. Three practical tasks in the lesson
  • BEM
  • Hero block HTML block structure
  • Hero block Stylizing the block
  • Services HTML Block: Block Structure
  • Services block. Adding styles
  • Services Block Part 3. Cards
  • Button animation in the card
  • Practice
  • Adding Decor
  • Practice
  • Testimonials
  • Story block. Creating an HTML structure
  • Story block. Adding styles
  • What is Grid and how to work with it
  • Diving deeper into the Grid
  • Adding Grid to the Story block
  • Practice
  • "Indicators" block
  • Features block. HTML part
  • Features block. Sass part. Grid + Flex
  • Title again
  • Adding alt attributes
  • CTA block
  • Our Works block: HTML part
  • Our Works block: Grid
  • Add a button to the block
  • Footer HTML Part
  • Footer CTA
  • Adding Styles to Footer
  • Adding styles to Footer 2
  • About H2 again
  • Sprite
  • Practice
  • Sprite 2
  • Let's clean up the tags
  • Validity check
  • Cleaning up the layout
  • Introduction to Gulp
  • Gulp work description
  • Fonts problem solving
Module 6 Hosting. How websites live on the Internet
  • What is hosting and domain
  • Registering a domain
  • Uploading a site to hosting
  • Creating SubDomains
  • Practice
  • First Portfolio Site
  • Adding Works to Portfolio
Course experts
Stanislav Litvinov
Practicing frontend developer. Specializes in creating adaptive interfaces using HTML, CSS and JavaScript.
Maria Galtseva
Web designer and layout designer. Expert in creating pixel-perfect layout and working with Figma.
Vladimir Krasnov
Fullstack developer. Experienced in HTML, CSS, JavaScript, and backend technologies (Node.js, Express).
Anna Guseva
Frontend developer with focus on JavaScript and React.
Your result after training
83%
of graduates reach their goals and find a job in IT
32%
of students start to take orders for layout while still in training
59%
reach Middle level faster than a year after graduation.
Course experts
Beginning
$14
  • Curriculum - 3 modules
  • HTML and CSS lecture materials
  • No feedback
  • Course access - 1 month
  • No certificate
Start Now
Basic
$27
  • Curriculum - 5 modules
  • Lecture materials
  • Practice
  • Student Chat
  • No Feedback
  • Course Access - 2 months
  • No Certificate
Start Now
Standard
$45
  • Program of Study - 5 modules
  • Lecture materials
  • Practice
  • Practice
  • Student and Mentor chat
  • Assignment checking and feedback
  • Course access - 6 months
  • Certificate
Start Now
Standard Plus
$54
  • Training Program - 5 modules
  • Bonus Module: Hosting
  • Lecture Materials
  • Practice
  • Mentor Support and Coaching
  • Assignment Review and Guidance
  • Chat for Students and Mentors
  • Course Access - 12 months
  • Certificate
Start Now
Corporate
$500
  • Groups of 5 to 10 people
  • Training program - 5 modules
  • Bonus module: Hosting
  • Lecture materials
  • Practice
  • Add to group chat
  • Check assignments and recommendations of mentors
  • Access to the course - 12 months
  • Certificate
Start Now
Offer for companies
You can train cvs. We will adapt the program to your business.

If you train several employees at once - more favorable price.
You will receive a Certificate upon successful completion of the course
It will confirm your training and will be an
additional plus when looking for a job.
Being a website layout designer
is prestigious and lucrative
Work from anywhere in the world
Don't waste time and money on traveling. You only need a laptop and a stable internet connection.
Self-realization
Create inspiring projects and reach new heights without income limits.
Work with your head
You apply knowledge, not perform monotonous tasks. Creative projects will keep you from getting bored.
Environment and networking
Most IT professionals are goal-oriented people who are ready to share experience and support each other.
Balance between work and rest
IT cares about employee comfort, ensuring harmony in work and personal life.
Constant income growth
Your income increases along with your skills. In addition, IT companies regularly increase salaries.
Testimonials from our students
Anna
The course was a great start in IT for me. Everything is explained in an easy-to-understand way, and practical tasks help me to apply the knowledge immediately. Now I am confident in layout and already take my first orders!
Ivan
Even with experience in development I found a lot of useful things for me. I especially liked the modules on adaptive layout and BEM methodology. The course helped to systematize knowledge and improve skills. Thank you!
Maria
I wanted to learn how to layout my layouts for a long time, and this course was the perfect solution. The instructors are always in touch and the assignments are as close to real projects as possible. Now I can offer full-service to my clients!
Dmitry
The course is just fire! Everything is structured, no water, only practice. After finishing I put together a portfolio and quickly found my first job. I recommend it to everyone who wants to enter IT.
Ekaterina
I came to the course with no experience in programming, but thanks to the support of the tutors and clear presentation of the material I was able to master layout. Now I can make my own edits on the website of the company where I work. It's very cool!
You can succeed with any experience and at any age!
Take the first step and we will help you reach your goal!
We'll refund your money if the course doesn't work for you
If you decide within 5 days that the course is not right for you, we will refund the full cost of the course. If you decide later, we will refund the amount less the cost of lessons completed.
Q&A
01 Is the course suitable for beginners?
Yes, the course is designed for those who are just starting their
way in IT. We explain everything from scratch, step by step.
02 Do you need special knowledge to get started?
No, a basic understanding of computers and a desire to learn is enough. We will teach you everything else.
03 How much time do you need to study?
We recommend 6-8 hours per week. This is a comfortable pace
for mastering the material and completing assignments.
04 Will there be help from tutors?
Yes, tutors will check assignments, give feedback and answer questions in the chat room at any time.
05 What will I get after the course?
You will master layout in HTML and CSS, create a portfolio
and get a certificate that will help you in your job search.
06 Can I combine the course with work or study?
Yes, the course is flexible: you can study at your own time and complete assignments at your own pace.
07 Is there a job guarantee?
We don't guarantee employment, but we do give you all the skills you need and
help you build your CV and portfolio so you can compete in the job market.