The ZeroCodemy Full-Stack Course introduces complete beginners to modern web development. The first four months focus on mastering HTML, CSS, JavaScript, Tailwind CSS, and React. The final two months offer students the option to learn either PHP with Laravel or Python with Django, gaining essential backend skills to build full-stack web apps with database connectivity and authentication.
Course Outline:
π Month 1: HTML & CSS (Weeks 1β4)
Week 1: Understanding the Web + HTML Deep Dive
β’ Session 1: Web Basics & HTML Structure
o What is Web Development?
o Frontend vs Backend
o How the web works (DNS, HTTP, Browsers)
o Dev tools setup: VS Code, Chrome DevTools
o File naming & folder structure
o HTML boilerplate: doctype, head, body
o Tags & attributes, headings, paragraphs
o Comments, line breaks, horizontal lines
β’ Session 2: Semantic HTML & Structure
o Nesting & indentation
o Anchor tags & hyperlinks
o Images + alt text
o Lists: ordered, unordered, nested
o Semantic tags: header, nav, main, section, article, footer
o Block vs inline elements
o div vs span
π Assignment 1
Build a basic personal webpage:
β’ Your name, bio, image
β’ Navigation links
β’ Hobbies listed with semantic tags
Week 2: Forms, Tables & CSS Introduction
β’ Session 3: HTML Forms & Tables
o Form structure
o Input types: text, password, email, number, date
o Label linking
o Textarea, select, option
o Checkboxes, radios
o Submit/reset buttons
o Form validation: required, min, max, maxlength
o Tables: table, thead, tbody, tfoot, tr, td, th
o Merging cells: colspan, rowspan
β’ Session 4: CSS Basics & Typography
o What is CSS?
o CSS syntax: selector { property: value; }
o Selectors: element, class, ID
o Adding CSS: inline, internal, external
o Color formats: hex, rgb, hsl
o Font-family, font-size (px, em, rem)
o Font-weight, line-height, letter-spacing
o Google Fonts usage
π Assignment 2
Style your personal page and form with:
β’ Custom fonts
β’ Color scheme
β’ Proper spacing and alignment
Week 3: CSS Box Model, Positioning, Flexbox & Responsive Design
β’ Session 5: Box Model, Display & Positioning
o Box Model: content, padding, border, margin
o box-sizing: border-box
o Display types: block, inline, inline-block, none
o Position: static, relative, absolute, fixed, sticky
o Position offsets: top, left, bottom, right
o Live examples: sticky nav, image overlay
o z-index for layering
o Transition and hover effect
o CSS Animation - @keyframe
o Overflow effect
o Styling of form, navbars, list, tables
β’ Session 6: Flexbox & Image Styling
o Float Property β Left, right - Clear fix hack
o Flexbox intro: why and when
o Parent: display: flex, flex-direction, justify-content, align-items
o Child: flex, flex-grow, flex-basis
o Responsive layouts with Flexbox
o Styling images:
ο§ width, height, max-width
ο§ object-fit: cover, contain
ο§ object-position
ο§ border-radius, box-shadow, opacity
o Responsive banners and profile cards
Assignment 3a
Build a Chair website using Float:
π Assignment 3b
Build a 3-card layout:
β’ Responsive layout with Flexbox
β’ Each card with image styled using object-fit
β’ One card with overlay text using absolute positioning
β’ Sticky navigation at the top
Week 4: Grid, Advanced CSS & Final Project
β’ Session 7: CSS Grid & Transitions
o Grid basics: display: grid
o grid-template-columns, rows
o gap, grid-area
o Naming areas
o Pseudo-classes: :hover, :active, :nth-child
o Pseudo-elements: ::before, ::after
o Transitions: transition, transform, scale, translate
o CSS variables: --main-color, var(--main-color)
β’ Session 8: Final Project Build + Deployment
o Final project layout planning
o Section breakdown: Hero, Features, About, Contact, Footer
o Mobile-first media queries
o Responsive styling using Grid & Flex
o Deploying to GitHub Pages or Netlify
π Assignment 4
Start building your final project layout:
β’ Setup HTML structure & sections
β’ Apply responsive styles
β’ Include transitions, grid/flex layout
π Month 2: Tailwind CSS (Weeks 5β8)
Week 5: Tailwind Fundamentals
β’ Session 1
o Why Tailwind?
o Setup via CDN and Vite/PostCSS
o Utility-first classes, customizing fonts, colors
o Layout: container, margin, padding, width, height
β’ Session 2
o Flexbox utilities
o Grid system
o Responsive design & breakpoints
o Typography: text size, weight, spacing
π Assignment
Build a 3-column responsive pricing table using Tailwind
Week 6: UI Components & Effects
β’ Session 3
o Buttons, Cards, Alerts, Badges
o Custom themes via Tailwind config
o Forms & input styling
β’ Session 4
o Hover, focus, transitions
o Pseudo-classes: hover:, focus:, group-hover:
o Gradients, shadows, animations
π Assignment
UI component library page (buttons, cards, inputs, alerts)
Week 7: Page Layouts & Plugins
β’ Session 5
o Responsive navbar and hero sections
o Layouts with Grid/Flex
o Mobile-first design tips
β’ Session 6
o Tailwind plugins: Typography, Forms
o Accessibility tips
o Organizing utility classes
π Assignment
Landing page with multiple sections: hero, about, features, contact
Week 8: Final Tailwind Project
β’ Session 7
o Plan layout, design sections (header, hero, CTA, footer)
β’ Session 8
o Complete and deploy Tailwind landing page on Netlify/Vercel
Final Tailwind Project:
Fully responsive landing page with Tailwind CSS
π Month 3: JavaScript (ES6+) (Weeks 9β12)
Week 9: JavaScript Fundamentals
β’ Session 9
o Introduction to JavaScript
o Variables: var, let, const
o Data types, typeof
o Operators: arithmetic, logical, comparison
β’ Session 10
o Conditions: if, else, switch
o Template literals
o Functions: declarations, expressions, arrow functions
π Assignment
Build a grade calculator and color switcher using functions and DOM
Week 10: Arrays, Loops, Objects
β’ Session 11
o Arrays and methods: push, pop, splice, map, filter
o Loops: for, while, forEach
β’ Session 12
o Objects: keys, values, destructuring
o ES6 features: spread/rest, shorthand
π Assignment
Build a dynamic to-do list using arrays and functions
Week 11: Advanced JS (ES6+)
β’ Session 13
o Sets and Maps
o Optional chaining, nullish coalescing
o Arrow functions vs traditional
β’ Session 14
o JavaScript modules
o Error handling with try/catch
o Debugging with console and breakpoints
π Assignment
User manager with Map/Set to store user sessions uniquely
Week 12: DOM, Events & APIs
β’ Session 15
o DOM selection and manipulation
o Events: click, change, input
β’ Session 16
o Fetch API: GET and POST
o LocalStorage
o Building a mini app using DOM and Fetch
Final JavaScript Project:
Build a persistent notes app with categories, API integration, and local storage
π Month 4: React (with Hooks & API) (Weeks 13β16)
Week 13: React Basics
β’ Session 17
o What is React?
o JSX and rendering elements
o Functional components and props
β’ Session 18
o useState for dynamic data
o Handling events
o Conditional rendering
π Assignment
Build a light/dark toggle, counter, and visibility toggler
Week 14: Lists, Forms, State Lifting
β’ Session 19
o Lists, keys, and mapping data
o Controlled inputs
β’ Session 20
o Lifting state up
o Forms and validations
π Assignment
Build a form with validation, displaying dynamic feedback
Week 15: useEffect, API Calls
β’ Session 21
o useEffect: lifecycle methods in functional components
o Fetch data with useEffect
o Asynchronous code with promises and async/await
β’ Session 22
o Using external APIs (weather, news, etc.)
π Assignment
Build a weather app using fetch and useEffect
Week 16: Final React Project & Deployment
β’ Session 23
o Project planning & structure
o Routing with React Router
β’ Session 24
o Deploy on Vercel/Netlify
Final React Project:
Build a multi-page app (e.g., blog, dashboard) with React, React Router, and an external API
π Months 5β6: Backend Development (Choose one)
Track A: PHP + Laravel OR Track B: Python + Django
πΉ Track A: PHP & Laravel (Weeks 17β24)
Week 17: Introduction to PHP
β’ What is a server? How backend works
β’ Installing XAMPP (or alternative)
β’ Writing your first PHP script
β’ Variables, Data types, Operators
β’ Control structures (if, else, switch)
β’ Loops (for, while, foreach)
π Assignment: Create a dynamic webpage with PHP variables and loops
Week 18: Functions & Forms in PHP
β’ Functions and scopes
β’ GET and POST methods
β’ Form validation with PHP
β’ Intro to sessions and cookies
π Assignment: Build a contact form that stores and displays user inputs
Week 19: Working with MySQL + PDO
β’ Introduction to MySQL & phpMyAdmin
β’ Connecting PHP to MySQL with PDO
β’ CRUD operations (Create, Read, Update, Delete)
π Assignment: Build a guestbook or blog post system with CRUD
Week 20: Laravel Basics
β’ Installing Laravel via Composer
β’ MVC architecture explained
β’ Routes, Controllers, and Views
β’ Blade templating engine
π Assignment: Build a Laravel welcome page with dynamic content
Week 21: Laravel Forms & Database
β’ Laravel forms & validation
β’ Eloquent ORM
β’ Migration, Seeder, Model basics
β’ Building user registration form
π Assignment: Create a blog post form with validation and store in DB
Week 22: Laravel Authentication
β’ Laravel Breeze or Jetstream (simple auth setup)
β’ Login, Register, Password reset
β’ Middleware and route protection
π Assignment: Add login/register to your blog with authentication
Week 23: Full-Stack Integration
β’ Connecting frontend React app with Laravel API
β’ Serving JSON, CORS setup
β’ Fetching backend data in React
π Assignment: Display blog posts created in Laravel inside a React app
Week 24: Final Laravel Project
β’ Plan & build full-stack project (e.g., Task Manager, Blog, Admin Panel)
β’ Backend with Laravel, frontend with React
β’ Deploy Laravel on Render or shared hosting
π Final Project: Full-stack application with login, CRUD, and deployed backend
πΉ Track B: Python & Django (Weeks 17β24)
Week 17: Introduction to Python
β’ Installing Python, VS Code setup
β’ Variables, Data types, Operators
β’ Conditionals, Loops, Functions
π Assignment: Python script to collect and print user data
Week 18: Python Projects + Virtual Environments
β’ Lists, dictionaries, and sets
β’ Writing simple CLI applications
β’ Creating and activating virtual environments
π Assignment: To-do list in CLI using functions and dictionaries
Week 19: Django Setup & Structure
β’ Install Django, project and app setup
β’ URLs, Views, Templates
β’ Template language and inheritance
π Assignment: Create homepage and about page with dynamic data
Week 20: Django Models & Admin
β’ Models, migrations
β’ Django admin interface
β’ CRUD operations with Django ORM
π Assignment: Build a blog with posts managed via admin
Week 21: Forms & Authentication
β’ Django forms and validation
β’ User registration and login
β’ Built-in auth views and route protection
π Assignment: Build an authenticated blog posting system
Week 22: API with Django REST Framework
β’ Introduction to Django REST Framework (DRF)
β’ Creating a basic API endpoint
β’ JSON responses and serializers
π Assignment: Create an API for blog posts and test with Postman
Week 23: Full-Stack Integration
β’ Connect React frontend to Django API
β’ Fetch and render backend data
β’ Token-based auth setup
π Assignment: Display blog posts from Django backend in React frontend
Week 24: Final Django Project
β’ Plan & build full-stack project (e.g., Blog, Dashboard, Portfolio CMS)
β’ Deploy backend using PythonAnywhere or Render
π Final Project: Full-stack app with user login and dynamic content
π Course Completion & Certification
At the end of 6 months, students will:
β’ Build and deploy fully functional frontend and full-stack applications.
β’ Gain real-world skills in HTML, CSS, Tailwind, JavaScript, React, and their chosen backend (Laravel or Django).
β’ Deploy frontend on Netlify/Vercel and backend on platforms like Render, Heroku, or PythonAnywhere.
β’ Receive a ZeroCodemy Full-Stack Developer Certificate.
Uploaded on: May 6, 2025
Last Updated: June 4, 2025