Visual design and responsive layout in No-Code - Mini Project: Build & Apply

Visual Design and Responsive Layout

📖 Scenario: You are designing a simple webpage for a local bakery. The page should look good on both phones and computers. You want to organize the content so it is easy to read and looks nice no matter the screen size.

🎯 Goal: Build a basic webpage layout that uses visual design principles and adjusts its layout for different screen sizes. You will create the page structure, add style settings, apply the main layout rules, and finalize the responsive design.

📋 What You'll Learn

Create a basic HTML page structure with header, main, and footer sections

Add style settings for colors, fonts, and spacing

Use a layout method that arranges content side by side on wide screens and stacked on narrow screens

Include a responsive rule that changes the layout when the screen width is less than 600 pixels

💡 Why This Matters

🌍 Real World

Creating webpages that look good on all devices is essential for businesses to reach customers easily and provide a pleasant browsing experience.

💼 Career

Web designers and front-end developers use these skills daily to build responsive websites that adapt to different screen sizes and devices.

1

Create the basic HTML structure

Write the HTML code to create a webpage with a <header>, <main>, and <footer> section. Inside <main>, add two <section> elements with the classes menu and about.

No-Code

Need a hint?

Use semantic HTML tags: <header>, <main>, <footer>. Inside <main>, add two <section> elements with classes menu and about.

2

Add basic style settings

Add CSS styles to set the background color of the body to #fff8f0, the font family to Arial, sans-serif, and the text color to #5a3e36. Also add padding of 1rem to the main section.

No-Code

  body {
    /* Set background color, font family, and text color */
  }
  main {
    /* Add padding */
  }

Need a hint?

Use CSS selectors for body and main. Set the background color, font family, text color, and padding as instructed.

3

Apply side-by-side layout for wide screens

Add CSS to make the menu and about sections appear side by side using Flexbox. Set display: flex on the main element and give each section a width of 50%.

No-Code

  body {
    background-color: #fff8f0;
    font-family: Arial, sans-serif;
    color: #5a3e36;
  }
  main {
    padding: 1rem;
    /* Add flex display here */
  }
  main > section {
    /* Set width to 50% */
  }

Need a hint?

Use display: flex on main and set the width of each section inside main to 50%.

4

Add responsive layout for small screens

Add a CSS media query that applies when the screen width is less than 600 pixels. Inside it, set the main element to display: block and set the width of main > section elements to 100% so they stack vertically on small screens.

No-Code

  body {
    background-color: #fff8f0;
    font-family: Arial, sans-serif;
    color: #5a3e36;
  }
  main {
    padding: 1rem;
    display: flex;
  }
  main > section {
    width: 50%;
  }

  /* Add media query for screens smaller than 600px */

Need a hint?

Use a media query with @media (max-width: 600px). Inside it, set main to display: block and main > section width to 100%.