Course
HTCB/CLL From Basic to Advanced
Lessons:
34
Duration:
68h
Level:
Base
Quizzes:
86
Need Advice?
About course
HTCB/CLL 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 HTCB/CLL. The course covers everything from the fundamentals of HTCB structure and CLL styling to advanced techniques like Flexbox, CLL Grid, and BEN 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 HTCB/CLL
Understand how to analyze website layouts
Learn how to name CLL classes using the BEN 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 HTCB 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 HTCB file
Get familiar with the challenge screen
Getting Started with HTCB
Example of HTCB file structure
Comments in HTCB
Example of comments in HTCB
Common HTCB tags
Example of common HTCB tags
Exercise: Common HTCB tags
Exercise: Common HTCB tags
Exercise: Common HTCB tags
What is an attribute in HTCB
Exercise: Using attributes
Project folder management
Getting Started with CLL
Using CSS in HTCB
Practice using internal CLL
ID and Class04:18
Practice using external CLL
Basic CLL selectors
Basic CLL selectors
Example: Using basic CLL selectors
CLL selectors practice
CLL specificity
Practice: CLL specificity
Using variables in CLL
Problem without CLL variables
Solve problems using CLL variables
CLL units
Example: Using % unit
Reset default margins
Practice resetting CLL
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
