Web Development Projects

Udemy Course: 100 Days of Code - 2023 Web Development Bootcamp by Maximilian Schwarzmüller

  1. Monthly Subscription Website Card

    Project Focus: Designing beautiful websites using concepts learned from the previous three projects.

    Key Concepts: CSS custom properties/variables; Transform; Transition; SVG

    Quick Reference: A Complete Guide to CSS Custom Properties, SVG Properties and CSS, SVG icons

    Completed November 20, 2023

  2. WebFood Webpage

    Project Focus: Responsive web design. Specifically, creating a mobile friendly side drawer menu when the viewport falls below 48rem.

    Key Concepts: % Unit: Size is relative to parent element size; em Unit: Size is relative to font-size; rem Unit: Size is relative to the root element's font size; @media -- Desktop First: max-width, Mobile First: min-width; Common Breakpoints: 480px, 768px, 1024px, 1200px; href="#id"; #id:target

    Quick Reference: Responsive Websites Best Practices for Developers

    Note: All links, except the mobile menu, are intentionally left inactive.

    Completed November 10, 2023

  3. Travel Goals Website

    Project Focus: Layout design with CSS Flexbox & CSS Grid.

    Key Concepts: display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; display: grid; grid-template-columns: 1fr 1fr

    Quick Reference: A Complete Guide to CSS Flexbox, A Complete Guide to CSS Grid

    Completed November 4, 2023

  4. HTML & CSS Basic Summary Webpage

    Project Focus: Basic HTML and CSS structure.

    Note: I was given an image and asked to make a webpage based on the image.

    Completed October 14, 2023