Course Curriculum
LECTURE
What We're Building & Setting Up Your Environment
Part 1 of our web development series. Preview the finished café site, install VS Code with essential extensions, set up your project folder, download image assets, and display your first Hello World page.
LECTURE
HTML Basics — Understanding the Skeleton of a Web Page
Learn the fundamentals of HTML including DOCTYPE, the html/head/body structure, and semantic tags. Build the structural skeleton of the café SOEL website step by step.
LECTURE
Building Your Site's Content with HTML
Learn practical HTML skills including img elements, class attributes, article elements, and definition lists while completing the full HTML structure for the café SOEL website.
LECTURE
CSS Basics — Giving Your Site a Visual Identity
Learn CSS fundamentals — selectors, the box model, custom properties, and basic styling. Transform café SOEL from raw HTML into a styled page.
LECTURE
Layout Techniques — Arranging Elements with Flexbox
Learn CSS Flexbox fundamentals and apply them to a real café website. Master display: flex, justify-content, align-items, gap, and flex: 1 through hands-on practice.
LECTURE
CSS Grid & Responsive Design — Beautiful on Every Screen
Learn CSS Grid to arrange menu cards and gallery photos in a two-column layout, then add media queries for tablet and mobile responsive design. Includes hamburger menu HTML and CSS setup.
LECTURE
Finishing the Design — Making the Site Feel "Put Together" with CSS
Add Google Fonts for typography, transitions and :hover for pleasing motion, and backdrop-filter for a frosted-glass header. Small details transform the site into something that feels properly designed.
LECTURE
SEO & Structured Data — Help Search Engines Understand Your Site
Add a meta description, Open Graph tags, and JSON-LD structured data so search engines and social platforms know exactly what your café site is about — even though the visual design stays the same.
LECTURE
Final Checks Before Launch — Accessibility and Performance
ARIA attributes, alt text, loading="lazy", HTML validation, Lighthouse, and converting JPG to WebP. Polish café SOEL until it's truly ready to go live.