Ahilyanagar Learning

Build a Website Using CSS: Project-Based Course

Learn CSS by building a complete, responsive portfolio website step by step in five hours.

Instructor
Vidya Pawar, Director, StudyThis
Level
Beginner
Language
English
Lessons
11, 5 hr

What you’ll learn

  • Write CSS rules and connect an external stylesheet
  • Use colours, backgrounds, fonts and text styling
  • Understand the box model: content, padding, border and margin
  • Arrange content side by side with Flexbox
  • Create cards, buttons, hover effects and smooth transitions
  • Style forms neatly with labels and full-width fields
  • Make a website work on phones with media queries
  • Build and publish your own portfolio website

About this course

In this project-based course you learn CSS by doing. You build one complete personal portfolio website, from a plain HTML page to a designed, responsive site, and learn every CSS concept at the moment you need it.

Each hour is one part of the project. The notes work like a teacher beside you: every step tells you what to do, exactly what code to type, what you should see (with a real screenshot of the result), why it works, and what to try yourself.

You will learn CSS syntax, selectors, external stylesheets, colours and backgrounds, text styling, the box model, margin and padding, borders, Flexbox layout, cards, buttons, hover effects and transitions, form styling, and media queries for phones.

Each hour ends with a practice task and a short quiz. Finish the final quiz to earn a certificate that anyone can verify online by scanning its QR code. You need basic HTML; the HTML course on this site covers everything required.

Course content

Hour 1: Start the Project 2 lessons
  1. Notes Notes: Start the Project Preview 45 min
  2. Reading Practice: Set up and first rules 15 min
  3. Quiz Unit quiz: pass it to open the next unit
Hour 2: Style the Website 2 lessons
  1. Notes Notes: Style the Website 45 min
  2. Reading Practice: Colours, spacing and the box model 15 min
  3. Quiz Unit quiz: pass it to open the next unit
Hour 3: Create the Layout 2 lessons
  1. Notes Notes: Create the Layout 45 min
  2. Reading Practice: Flexbox experiments 15 min
  3. Quiz Unit quiz: pass it to open the next unit
Hour 4: Design the Website 2 lessons
  1. Notes Notes: Design the Website 45 min
  2. Reading Practice: Buttons, cards and forms 15 min
  3. Quiz Unit quiz: pass it to open the next unit
Hour 5: Complete the Project 3 lessons
  1. Notes Notes: Complete the Project 40 min
  2. Reading Practice: Final challenge, your own portfolio 15 min
  3. Reading Complete source code 5 min
  4. Quiz Unit quiz: pass it to open the next unit