HTML + CSS from Scratch: Restaurant Site in 23 Lessons

Name: HTML + CSS from Scratch: Restaurant Site in 23 Lessons
Rating: 3.0 (1 reviews)

Build responsive websites from scratch using HTML, CSS, Flexbox, Grid, animations, and modern layout techniques.

Created byNazarov Oleksiy

Last updated 8/2025

English

What you'll learn

Build a complete, responsive restaurant website using only HTML and CSS from scratch.
Understand the core structure of HTML: headings, paragraphs, lists, images, and links.
Style your website with CSS: fonts, colors, spacing, layout techniques, and flexbox.
Use media queries to create responsive designs that work on mobile, tablet, and desktop.

Course content

4 sections • 23 lectures • 4h 7m total length

InstallinInstall a free IDE5:55
In this first lesson, we'll set everything up and build our very first HTML page.
✨ What we’ll do:
Install a free IDE (we'll use Visual Studio Code)
Create a basic HTML boilerplate
Open the file in your browser and see it live!
This is the beginning of your web development journey.
Let’s dive in and write our very first lines of HTML!

HTML Tags and Tables – Learn to Structure and Organize Content7:20
In this video, you’ll learn essential HTML tags like headings, paragraphs, links, images, and lists. Build a solid webpage structure using the right tags step by step.
Image Tag3:27
Learn how to use the <img> tag in HTML to add images to your webpage. Understand attributes like src, alt, width, and height to display images correctly and accessibly.
Tables in HTML2:50
Learn how to create and structure tables in HTML using <table>, <tr>, <td>, and <th> tags. Organize data clearly and effectively with proper table markup.

How to Link CSS to HTML6:46
Learn how to link CSS to your HTML files using external stylesheets, internal <style> tags, and inline styles. Master the basics of applying styles to make your webpages look great.
Mastering CSS Text Alignment – How to Use text-align to Position Your Text7:00
Learn how to use the CSS text-align property to control the horizontal alignment of text and inline elements. Explore options like left, right, center, and justify to style your content perfectly.
Getting Started with Emmet – Boost Your HTML & CSS Coding Speed Efficiently4:50
Discover how Emmet can speed up your HTML and CSS coding with powerful shortcuts and abbreviations. Learn to write code faster and more efficiently using Emmet in your favorite code editor.
Understanding Relationships in HTML – Parent, Child, and Sibling Elements8:56
Learn about HTML relationships—how parent, child, and sibling elements connect. Understand the structure of the DOM to build well-organized and maintainable web pages.
CSS Classes Explained – How to Use Classes to Style Multiple Elements12:21
Learn how to use CSS classes to style multiple HTML elements efficiently. Understand how to create, assign, and customize classes to control the appearance of your webpage.
Using IDs in CSS – Target Specific Elements with Unique Styles6:42
Discover how to use CSS IDs to uniquely style individual HTML elements. Learn the difference between IDs and classes and when to use each for precise styling control.
CSS Specificity – How Styles Are Applied and Which Rules Win7:29
Understand CSS specificity and how browsers decide which styles to apply. Learn how to manage conflicting rules and write more effective, predictable CSS code.
Creating Links in HTML – How to Add and Customize Anchor Tags8:47
Learn how to create and style links in HTML using the <a> tag. Discover how to customize link appearance with CSS for different states like hover, active, and visited.
SS Pseudo-classes – Styling Elements Based on Their State and Position5:22
Learn how to create and use CSS classes to style multiple HTML elements efficiently. Understand how to assign classes, write reusable styles, and organize your CSS for better maintainability.
CSS Borders – How to Add, Style, and Customize Borders Around Elements10:16
Learn how to add and customize borders in CSS. Explore different border styles, widths, colors, and how to create visually appealing layouts using borders effectively.
CSS Backgrounds – Adding Colors, Images, and Gradients to Your Elements7:24
Learn how to add and style backgrounds in CSS. Discover how to use colors, images, gradients, and background properties to enhance the look of your web pages.
CSS Margins – Controlling Space Outside Elements for Better Layouts6:16
Learn how to use CSS margins to control the space outside elements. Understand how to create balanced layouts by adjusting margins for better spacing and alignment.
CSS Padding – Adding Space Inside Elements to Improve Design and Layout5:10
Learn how to use CSS padding to add space inside elements. Discover how padding affects layout and design by controlling the distance between content and element borders.
Block vs Inline Elements – Understanding Display Types in CSS Layouts6:29
Learn the difference between block and inline elements in CSS. Understand how these display types affect layout and how to use them to structure your webpage effectively.
CSS Aligning – Techniques to Align Text, Images, and Elements Precisely7:53
Learn various CSS techniques to align text, images, and elements horizontally and vertically. Master properties like text-align, vertical-align, flexbox, and more for perfect layouts.
CSS Grid Layout – Mastering Two-Dimensional Responsive Web Design24:16
Learn how to use CSS Grid Layout to create complex, responsive web designs. Master rows, columns, and grid areas for powerful two-dimensional layouts.
CSS Flexbox – Flexible Layouts Made Easy for Modern Web Design33:12
Learn how CSS Flexbox helps you create flexible, responsive layouts easily. Understand flex containers, items, and properties to arrange content dynamically and efficiently.
CSS Animations – Bringing Your Web Pages to Life with Smooth Effects12:19
Learn how to bring your webpages to life with CSS animations. Discover key properties like @keyframes, animation-name, duration, and how to create smooth, engaging effects.

Requirements

No prior coding experience required — this course is for absolute beginners. A computer or laptop with internet access. A modern web browser like Chrome, Firefox, or Edge. A free code editor like Visual Studio Code (we’ll show you how to set it up).

Description

Are you ready to start your journey into the world of web development? This beginner-friendly course will teach you everything you need to know to build beautiful, modern websites using HTML and CSS - the essential building blocks of the web.

Whether you're completely new to coding or just need a solid refresher, this course takes you step by step through the foundations of HTML and CSS. You’ll start by learning how to structure content with HTML: headings, paragraphs, links, images, tables, and more. Then, you’ll dive into CSS to style your pages - colors, fonts, layouts, margins, padding, borders, backgrounds, and even animations!

You’ll also explore modern layout techniques like Flexbox and CSS Grid, and gain hands-on experience by building a complete final project: a responsive, stylish restaurant website that looks great on any device.

Throughout the course, you’ll use Visual Studio Code, practice clean code structure, and learn powerful productivity tools like Emmet. You'll also understand important concepts like specificity, box model, pseudo-classes, and element relationships.

By the end of the course, you'll have the skills and confidence to build real-world websites from scratch and a strong foundation to continue your journey into front-end development.

No prior experience is required - just your curiosity and willingness to learn. Let’s build the web together!

Who this course is for:

This course is for absolute beginners who want to learn how to build websites using HTML and CSS. It’s perfect for anyone with zero coding experience looking to start web development. Ideal for students, hobbyists, freelancers, or career changers who want practical, hands-on training. If you’ve always wanted to create your own website but didn’t know where to start — this course is for you.

HTML + CSS from Scratch: Restaurant Site in 23 Lessons

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 6min

Getting Started with HTML Tags - Build the Structure of Your Page3 lectures • 14min

Connecting CSS – Style Your HTML Pages with External and Internal CSS18 lectures • 3hr 1min

Final Project: Build a Stylish Restaurant Website from Scratch1 lecture • 47min

Requirements

Description

Who this course is for: