21-Day Web Development Coder Woman Challenge

A step-by-step coding challenge for absolute beginners. Build your first website and master HTML, CSS & JavaScript!

What you'll learn

Build a complete personal portfolio website from scratch

Understand HTML structure and how to create web pages

Style websites using CSS for colors, fonts, and responsive layouts

Add interactivity with JavaScript

Fast-track your learning with beginner-friendly lessons

Develop confidence to continue coding and exploring tech careers

Requirements

No prior coding experience needed – this course is for absolute beginners!

A computer/laptop (Windows, macOS, or Linux) with internet access

A willingness to learn and complete daily challenges

Basic computer skills (typing, navigating files, etc.)

Description

Want to learn how to build real websites but don’t know where to start? Many coding courses overwhelm you with too much theory or complex explanations—but not this one.This beginner-friendly course is designed to take you from zero coding experience to building your own portfolio website using HTML, CSS, and JavaScript.You’ll follow a structured, step-by-step approach that helps you learn by doing. Instead of random lessons, you’ll work through a clear roadmap that helps you apply your skills to real projects—so you’re not just watching, but actually coding.What Makes This Course Different?- No Overwhelm – Learn in Simple, Structured Lessons- Project-Based – You’ll Actually Build a Website (not just watch videos)- Beginner-Friendly – Everything is Explained Clearly, from Scratch- Supportive – Ask Questions & Get Help Directly in the CourseWhat You’ll Learn:- Build a real website from scratch – even if you’ve never coded before- Understand HTML – structure web pages the right way- Style with CSS – colors, layouts, fonts, and responsiveness- Add JavaScript for Interactivity – buttons, forms, and animations- Develop a Portfolio Project – something to showcase your skillsWho Is This Course For?- Beginners who want to learn web development step by step- Aspiring developers who want to practice by building real projects- Career changers who want to explore tech and coding- Entrepreneurs & creatives who want to build their own websites- Anyone who has tried coding before but felt lost or stuckWhat You’ll Need:- No coding experience required! This course starts from scratch.- A computer/laptop (Windows, Mac, or Linux)- Internet access and a willingness to learn!Start Building Your First Website Today!If you’ve ever thought about learning to code, this is your chance. By the end of this course, you’ll have built your own portfolio website and gained real web development skills.Click “Enroll Now” and start your coding journey today!

Overview

Section 1: DAY 1 - Kickoff: Your coding journey begins

Lecture 1 Starting Strong: Your Foundation for Success

Lecture 2 Imagine What’s Possible: Turning Dreams into Skills

Lecture 3 Where to Find Support and Guidance

Lecture 4 Course Materials

Lecture 5 Learning Strategies for Fast Progress

Lecture 6 How the Internet Really Works

Lecture 7 Websites Explained: Behind the Scenes

Lecture 8 Your Path to a Web Development Career

Section 2: DAY 2 - Planning Your Project: From Idea to Action

Lecture 9 What Makes a Website Great?

Lecture 10 Understanding the Web Development Process

Lecture 11 Step-by-Step Project Planning

Lecture 12 Previewing your next steps

Lecture 13 Setting Up Your Coding Workspace

Lecture 14 Using Your Browser as a Developer Tool

Lecture 15 CodePen and Side Projects: Hands-On Practice

Section 3: DAY 3 - HTML Foundations: Building Blocks of Every Website

Lecture 16 HTML Basics: Understanding Syntax

Lecture 17 Structuring Your HTML Document

Lecture 18 The HTML Head: Metadata and Structure

Section 4: DAY 4 - Adding Content with HTML

Lecture 19 Semantic HTML: Organizing Your Content

Lecture 20 Adding Text That Speaks to Users

Lecture 21 Links and Images: Making Sites Interactive

Lecture 22 Entities in HTML: Symbols Made Easy

Lecture 23 PRACTICAL EXERCISE: Design a Delicious Menu

Lecture 24 SOLUTION REVIEW: Delicious Delights Menu

Section 5: DAY 5 - CSS Basics: Adding Style and Structure

Lecture 25 Getting Started with CSS: Syntax and Selectors

Lecture 26 Applying CSS Styles to Your Project

Lecture 27 Fonts: Adding Personality to Your Site

Lecture 28 Mastering Colors in CSS

Lecture 29 Designing Text and Backgrounds

Section 6: DAY 6 - CSS Fundamentals: Building Visual Consistency

Lecture 30 Understanding CSS Units and Sizing

Lecture 31 The Box Model

Lecture 32 Simple Transitions to Enhance Design

Lecture 33 PRACTICAL EXERCISE: Upgrade the Delicious Menu

Lecture 34 SOLUTION REVIEW: Menu Improvements

Section 7: DAY 7 - Layout with CSS: Structure Your Page Like a Pro

Lecture 35 Using the Position Property

Lecture 36 Understanding Display Options

Lecture 37 Flexbox Basics for Layout

Lecture 38 PRACTICAL EXERCISE: Layout Enhancements for Delicious Delights

Lecture 39 SOLUTION REVIEW: Enhanced Layout

Section 8: DAY 8 - Project preparation + header

Lecture 40 CSS Reset

Lecture 41 BEM Naming Convention

Lecture 42 Header #1: Logo, styles and comments

Lecture 43 Header #2: Navigation

Lecture 44 Header #3: Call to action

Section 9: DAY 9 - Creating the Hero Section and Footer

Lecture 45 Hero Section Part 1: Layout

Lecture 46 Hero Section Part 2: Styling

Lecture 47 Hero Section Part 3: Finishing Touches

Lecture 48 Creating a Professional Footer

Section 10: DAY 10 - The About Me Section

Lecture 49 About Me Part 1: Layout

Lecture 50 About Me Part 2: Text Styling

Lecture 51 About Me Part 3: Button and Icon Styling

Lecture 52 About Me Part 4: Final Touches

Section 11: DAY 11 - Projects and skills sections

Lecture 53 Projects Part 1: Layout

Lecture 54 Projects Part 2: Creating Projects Cards

Lecture 55 EXTRA LESSON: Dynamic Sizing with the Calc Property

Lecture 56 Skills Part 1: Layout

Lecture 57 Skills Part 2: Creating Skills Icons

Section 12: DAY 12 - Building the Contact Section

Lecture 58 Contact form Part 1: Layout

Lecture 59 Contact form Part 2: Creating a Form

Lecture 60 Contact form Part 3: Form Validation and Functionality

Lecture 61 EXERCISE: Create a form

Section 13: DAY 13 - Responsive Web Design (RWD)

Lecture 62 RWD Part 1: Why It Matters

Lecture 63 RWD Part 2: Improving the Project

Lecture 64 RWD Part 3: Further Improvements

Lecture 65 RWD EXTRA LESSON: Using the Calc Property

Lecture 66 RWD Part 4: Final Touches

Lecture 67 EXERCISE: Fix a website

Section 14: DAY 14 - Welcome to JavaScript!

Lecture 68 Introduction to JavaScript: Why It's Important

Lecture 69 Working With The Console, Variables And Data Types

Lecture 70 User Interaction And Basic Operations

Lecture 71 EXERCISE: Travel Budget Planner

Section 15: DAY 15 - JavaScript Essentials: Building Logic

Lecture 72 Making Decisions With JavaScript

Lecture 73 Loops And Arrays For Dynamic Coding

Lecture 74 JavaScript Coding Guidelines Part 1

Lecture 75 EXERCISE: Daily steps tracker

Lecture 76 EXERCISE: Your first code review

Section 16: DAY 16 - JavaScript For Interactivity: Functions and DOM

Lecture 77 Mastering Functions In JavaScript

Lecture 78 Introduction to DOM Manipulation

Lecture 79 DOM Exercises For Hands-on Learning

Lecture 80 EXERCISE: Make a Garden Beautiful

Lecture 81 SOLUTION REVIEW: A Beautiful Garden

Section 17: DAY 17 - JavaScript Events: Adding User Interaction

Lecture 82 Understanding Events In JavaScript

Lecture 83 Events Handling Exercises

Lecture 84 JavaScript Coding Guidelines Part 2

Lecture 85 Creating A Modal

Section 18: DAY 18 - Adding JavaScript Features to your project

Lecture 86 Activating Navigation Links

Lecture 87 Creating a Hamburger Menu For Mobile

Lecture 88 Adding Dark / Light Mode Toggle

Lecture 89 EXTRA LESSON: Final Improvements

Section 19: DAY 19 - Testing and Review Your Project

Lecture 90 Introduction To Website Testing

Lecture 91 Fixing Issues Part 1

Lecture 92 Fixing Issues Part 2

Section 20: DAY 20 - Project Optimization

Lecture 93 Using Lighthouse For Performance Checks

Lecture 94 Fixing Issues

Lecture 95 SEO Basics

Section 21: DAY 21 - Final Steps: Launch and Future Growth

Lecture 96 Launching Your Website

Lecture 97 Maintenance Tips

Lecture 98 Challenge Summary And Next Steps

Complete beginners who want to learn HTML, CSS, and JavaScript from scratch,Aspiring web developers looking for a structured, step-by-step learning path,Career switchers who want to explore tech and build real-world projects,Students & self-learners who want to develop coding skills at their own pace,Entrepreneurs & creatives who want to build their own websites,Anyone who has struggled with coding before and needs a beginner-friendly approach