Course Description
This beginner-friendly program takes you from zero coding experience to building and deploying professional websites. You will start with the core building blocks of the web — semantic HTML, modern CSS layouts, and JavaScript — and learn to manage your code with Git and GitHub like working developers do. You will then build high-performance sites with the Astro framework, style them with Bootstrap and Tailwind CSS, and apply responsive design and SEO best practices. By the end of the course, you will have deployed a live, SEO-optimized business website to a custom domain and gained a solid foundation for a career in frontend development.
What You Will Learn
-
Write semantic, accessible HTML5 that follows WCAG guidelines
-
Build responsive, mobile-first layouts with CSS Flexbox and Grid
-
Style interfaces efficiently with Bootstrap 5, SASS, and Tailwind CSS
-
Add interactivity with modern JavaScript (ES6+), DOM events, and the Fetch API
-
Version and collaborate on code using Git and GitHub
-
Build high-performance websites and portfolios with the Astro framework
-
Optimize images, performance, and SEO for production websites
-
Deploy live websites to Vercel or Netlify with a custom domain and SSL
Prerequisites
-
No prior coding experience required
-
Basic computer literacy (managing files and folders, using a web browser)
-
Willingness to practise consistently and complete weekly assignments
Technical Requirements
- Laptop running Windows 10/11, macOS, or Linux
- Minimum 4GB RAM (8GB recommended) and at least 10GB free storage
- Stable internet connection for live classes, research, and deployment
- Visual Studio Code, Google Chrome or Mozilla Firefox, Git, and Node.js (LTS) — installation is guided in the first week
- Free GitHub and Vercel (or Netlify) accounts
Course Syllabus
- Semantic HTML5 and Accessibility (WCAG)
- Modern CSS3: Flexbox, Grid, and Variables
- Git Basics: Branching, Merging, and Pull Requests
- GitHub Workflow: Collaborative Coding
- Bootstrap 5 & Utility-First Design Concepts
- ES6+ Syntax: Arrow Functions, Destructuring, and Modules
- DOM Manipulation and Event Handling
- Asynchronous JavaScript: Promises and Fetch API
- Working with JSON and Third-Party APIs
- Debugging and Chrome Developer Tools
- The Astro Island Architecture: Why it's faster
- Project Structure and Routing in Astro
- Using Astro Components (.astro files)
- Content Collections and Markdown (MDX) Management
- Building a High-Performance Personal Portfolio
- Optimizing Images and Assets in Astro
- Advanced Bootstrap Customization (SASS/SCSS)
- Introduction to Tailwind CSS Integration
- Responsive Design: Mobile-First Approach
- SEO Best Practices for Web Developers
- Building for Production
- Deploying to Vercel and Netlify
- Custom Domain Setup and SSL
- Introduction to Continuous Integration (CI/CD)
- Final Project: A SEO-Optimized Business Website