Level: Beginner
š Build Websites With HTML And CSS From Scratch
Learn HTML and CSS from the ground up by building modern, responsive websites. Master layouts, forms, Flexbox, Grid, and styling while creating real portfolio-ready projects.
4.0
3.4k+ learners
Duration
0 min
Learners
3.4k+ Enrolled Students
Session Recording
Lifetime Access
Post Session
Mentor support
Session Schedule
Get Life Time Access
ā¹0
ā¹499
Discount 100% off
Course Fee
ā¹0
Worth of
ā¹499
Discount
100% Off
Includes
ā¢ Expert Designed Curriculum
ā¢ Doubt Clearing Session
ā¢ Forever Community Access
After this course, you can
Build responsive websites
Master HTML and CSS basics
Create modern web layouts
Publish your first website
Course Curriculum
Expand or explore the full learning path.
Lessons
Start here after enrolling. These lessons form the core learning path for the course.
How the Web Works: Browsers, Servers, and What Happens When You Hit Enter
Setting Up: Code Editor, Dev Tools, and Your First Peek Behind the Curtain
HTML Document Structure: The Skeleton Every Page Is Built On
Text Elements: Headings, Paragraphs, Emphasis, Quotes, and Code
Lists and Links: Organizing Content and Connecting the Web
Mini Project: Your First Multi-Page Personal Profile Site
Images and Media: Pictures, Audio, Video, and Embedded Everything
Tables Done Right: Rows, Columns, and When to Actually Use Them
Forms Part 1: Inputs, Select, Textarea, Buttons, and Labels
Forms Part 2: Validation, Fieldsets, GET vs POST, and Accessible Forms
Semantic HTML and Accessibility: Building Pages That Make Sense
Mini Project: A Registration Form in a Semantic Page Layout
CSS Syntax, Three Ways to Add It, and Why External Wins
Selectors: Targeting Exactly the Element You Want
Cascade, Specificity, and Inheritance: Why Your Style Isn't Applying
Colors and Units: Hex, RGB, HSL, and the px vs rem Debate
Typography and Backgrounds: Making Text and Pages Look Professional
Mini Project: Style Your Profile Site Into Something You'd Show People
The Box Model: Why Every Element Is Secretly a Box
Borders, Shadows, Radius, and Opacity: Making Things Pretty
Display: Why Some Boxes Stack and Others Sit Side by Side
Positioning: Pinning, Floating, and Layering Boxes
Spacing Strategies: Auto Margins, Gap, and Centering (Finally, a Straight Answer)
Mini Project: A Product Card and Pricing Section
Flexbox Part 1: Finally, Layouts That Just Make Sense
Flexbox Part 2: Wrap, Grow, Shrink, and Real Patterns
CSS Grid: Two-Dimensional Layouts Made Easy
Responsive Design: One Site That Looks Great Everywhere
Responsive Media: Making Images and Video Behave
Mini Project: A Responsive Navbar and Landing Page
Transitions and Transforms: Hover Effects That Feel Professional
Keyframe Animations: Making Things Move on Purpose
Modern CSS: Variables, calc(), clamp(), :has(), and Nesting
SEO and Performance Basics: Getting Found and Loading Fast
CSS Architecture: BEM, Organizing Files, and Reusable Components
Capstone: A Complete Responsive Business Website
Live Session Content
This topic will be taught live in an interactive session, allowing you to engage with the instructor and ask questions in real time. While recordings will be available, attending live offers the best learning experience.
Post Session Study Material
This section will be unlocked after the session. You'll get access to exclusive bonus content, additional examples, and on-demand resources to support continuous learning and deeper understanding.
Requirements
What you should have before starting the course.
No coding experience required
A computer with a code editor
A modern web browser
Willingness to practice by building
Tools you are going to use
HTML
CSS
Javascript
Learn From Expert Instructor
Meet the mentors leading the live sessions.
You should join this course if you
Students & Fresh Graduates
Build a strong portfolio
Learn from live mentors
Get feedback on your work
Working Professionals
Upgrade frontend skills
Ship real projects
Join a peer community
Career Switchers
Structured learning path
Hands-on practice
Guided sessions
Freelancers & Creators
Build client-ready sites
Improve delivery speed
Learn modern workflows
What you will get after completing this course
Receive an official course completion certificate
Earn skill-focused feedback from mentors
Showcase your project in the Shattak community
Access lifetime notes and references
Stay connected with instructors for guidance
Completion bonus
Certificate access, community showcase, and lifetime mentor guidance.
Hear From Learners Who've Taken This Course
Honest feedback from learners who completed the live sessions.
See what they have build
Join Our Community, Ask Questions
Frequently Asked Questions
Shattak courses are primarily self-paced and may include lessons, recordings, assignments, projects, and additional learning resources. Live sessions may also be conducted based on community demand.
Yes. If a live session is conducted for your course, you can access the recording and revisit the content at your own pace.
Yes. Shattak has a learning community where you can ask questions, interact with other learners, share your progress, and get guidance from mentors and peers.
Not always. Each course clearly mentions its requirements and the level of experience needed. Many courses are designed for complete beginners.
Yes. You can earn a course completion certificate after completing the required learning materials and submitting the required assignments or projects.
Yes. You can add your certificate to your LinkedIn profile, resume, portfolio, and other places where you want to showcase your learning and achievements. You may also use it for academic or professional purposes where applicable.
All Shattak courses are free to enroll in and start learning. After completing the course and earning your certificate, you can choose how much to pay from ā¹0 to ā¹10,000. Pay what you feel the learning experience was worth, with no questions asked.
You can explore courses by browsing different topics, skills, categories, or career paths. Each course page provides information about what you will learn, requirements, curriculum, and completion benefits.
Yes. Before enrolling, you can explore the course overview, curriculum, learning outcomes, requirements, and other details to understand what the course offers.
Simply open the course page and click Enroll. All courses are free to enroll in, so you can start your learning journey without paying upfront.
After enrolling, you will be redirected to your course workspace. From there, you can access your lessons and follow the learning path step by step.
Most courses allow you to learn at your own pace. However, some assignments, live sessions, or certification requirements may have specific deadlines.
Depending on the course, you may get access to: ā¢ Self-paced lessons ā¢ Live sessions based on community demand ā¢ Session recordings ā¢ Assignments and hands-on projects ā¢ Bonus learning resources ā¢ Mentor and peer community support ā¢ Doubt-clearing and guidance ā¢ Course completion certificates
You can ask questions through the learning community and connect with other learners. Depending on the course, you can also receive guidance from mentors and peers.
After completing the required lessons, assignments, and other course requirements, you can submit your work for certification. Once certified, you can access and share your certificate.
If you are an industry professional or expert and want to teach on Shattak, you can apply to become a mentor and create a course or learning experience based on your expertise.
Starting From
TBD
Duration
0 min
Get Life Time Access
ā¹0
ā¹499
100% off
Get Life Time Access
ā¹0
ā¹499
100% off