Course
HTML/CSS From Basic to Advanced
Lessons:
34
Duration:
68h
Level:
Base
Quizzes:
86
Need Advice?
About course
HTML/CSS From Basic to Advanced is a comprehensive course designed to help you build strong web development skills. You will learn how to create clean, modern, and responsive websites using HTML and CSS. The course covers everything from the fundamentals of HTML structure and CSS styling to advanced techniques like Flexbox, CSS Grid, and BEM naming conventions. Along the way, you’ll work on real-world projects to apply what you’ve learned. Whether you are a complete beginner or looking to sharpen your existing skills, this course will give you the knowledge and confidence to build professional websites
What will you learn?
Learn how to build web interfaces using HTML and CSS
Understand how to analyze website layouts
Learn how to name CSS classes using the BEM convention
Know how to make responsive web designs
Master Flexbox for building web layouts
Own 2 complete website interfaces after finishing the course
Learn how to motivate yourself
Learn how to self-study new knowledge
Learn to create polished, detail-oriented UI designs
Receive a course certificate issued
Course content
Start the Course:
What will you achieve after this course?
Learn about HTML and CSS
Get familiar with DevTools0
Install VS Code, Page Ruler extension
Fix Page Ruler Redux installation error
Buy F8 T-shirt | Register for Offline class
Join the F8 community on Discord
Structure of an HTML file
Get familiar with the challenge screen
Getting Started with HTML
Example of HTML file structure
Comments in HTML
Example of comments in HTML
Common HTML tags
Example of common HTML tags
Exercise: Common HTML tags
Exercise: Common HTML tags
Exercise: Common HTML tags
What is an attribute in HTML
Exercise: Using attributes
Project folder management
Getting Started with CSS
Using CSS in HTML
Practice using internal CSS0
ID and Class04:18
Practice using external CSS
Basic CSS selectors
Basic CSS selectors
Example: Using basic CSS selectors
CSS selectors practice
CSS specificity
Practice: CSS specificity
Using variables in CSS
Problem without CSS variables
Solve problems using CSS variables
CSS units
Example: Using % unit
Reset default margins
Practice resetting CSS
Example: Using % unit
Example: Using rem unit
Problem using px for font-size
Benefits of using rem for font-size
Requirements
Have a computer with stable internet connection
Be willing to learn and practice daily
Show persistence when facing difficult coding tasks
Manage your study time effectively and independently
Participate actively in discussions and ask questions
related courses
