👩‍💻
300devdays
  • 👩‍💻Learn Full Stack Engineering
  • Learning Curriculum
    • Full Stack Engineering Roadmap
      • HTML Fundamentals
      • CSS Styling
      • JavaScript Basics
      • Advanced JavaScript
      • Front-End Frameworks
      • Back-End Development with Node.js
      • Advanced Back-End Development
      • Project-Based Learning
    • Workshop Scenarios
      • Month 1 Workshops
      • Month 2 Workshops
      • Month 3 Workshops
      • Month 4 Workshops
      • Month 5 Workshops
      • Month 6 Workshops
      • Month 7 Workshops
      • Month 8 Workshops
  • HTML (Hypertext Markup Language)
    • Structure of an HTML Document
    • HTML Elements - Deep Dive
    • HTML Folder Structure
  • CSS (Cascading Style Sheets)
Powered by GitBook
On this page
  1. Learning Curriculum
  2. Workshop Scenarios

Month 2 Workshops

Week 1: Introduction to CSS Scenario 1: CSS Styling for a Personal Blog

In this workshop, students will create a simple personal blog webpage using HTML and CSS. They'll learn how to style headings, paragraphs, and links using CSS properties like font-size, color, and text-decoration. The objective is to create an aesthetically pleasing blog layout with a custom color scheme and typography.

Week 2: CSS Layout and Box Model Scenario 2: Building a Responsive Portfolio Page

Students will build a portfolio webpage that showcases their skills and projects. They'll apply CSS layout techniques like flexbox and grid to create responsive sections for projects, contact information, and a bio. The workshop will focus on creating a visually appealing and responsive layout that adapts to various screen sizes.

Week 3: CSS Flexbox and Grid Scenario 3: Designing a Product Showcase

In this workshop, students will design a product showcase page for an e-commerce website. They'll use CSS flexbox and grid to create a grid of product cards with images, titles, and prices. The workshop will emphasize the use of flexbox for aligning content within each card and grid for organizing the overall layout.

Week 4: Responsive Web Design Scenario 4: Creating a Restaurant Menu

Students will create a responsive restaurant menu webpage using CSS media queries. The workshop will involve designing a menu layout that adjusts its appearance based on the device's screen size. Students will learn how to hide or show menu sections and items to provide an optimal user experience on both desktop and mobile devices.

PreviousMonth 1 WorkshopsNextMonth 3 Workshops

Last updated 1 year ago