Complete Web Design: HTML, CSS, JavaScript, Vue, React, Git

Module 1: Environment Setup & HTML Basics

⏳ 30 minutes

• Installing VS Code, live-server extensions, and project organization

• Creating page skeletons: doctype, head, body, headings, paragraphs, links, images

Module 2: CSS Fundamentals & Styling

⏳ 45 minutes

• Linking stylesheets, selectors, the box model, margins, padding, and typography

• Working with colors, backgrounds, and CSS variables

Module 3: Layout with Flexbox & Grid

⏳ 1 hour

• Building one-dimensional layouts using Flexbox for navbars and card lists

• Crafting two-dimensional page layouts with CSS Grid for header, sidebar, and content

Module 4: Responsive Design & Media Queries

⏳ 45 minutes

• Mobile-first approach, breakpoints, and fluid units (%, rem, vh/vw)

• Testing across device sizes and using the viewport meta tag

Module 5: JavaScript for Front-End

⏳ 1 hour

• Selecting and updating DOM elements, handling user events (click, input)

• Form validation, toggling classes, and basic animations with requestAnimationFrame

Module 6: Project 1 – Interactive Landing Page

⏳ 1 hour

• Combining HTML, CSS, and JS to build a scroll-triggered animation site

• Implementing smooth scrolling and responsive navigation

Module 7: Project 2 – JavaScript Image Gallery

⏳ 1 hour

• Fetching images from a JSON array, creating lightbox effects, and keyboard navigation

• Lazy loading and performance considerations

Module 8: Deployment & Next Steps

⏳ 30 minutes

• Initializing Git, committing code, and publishing via GitHub Pages

• Tips for HTTPS, custom domains, and continuous deployment

Get certificate