Skip to main content

Practice 7

note

You can see a completed example here:

  1. In your "7" folder, create an index.html file containing the basic HTML structure for a page.

    Add a viewport meta tag and stylesheet link within the head, such as:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Practice Excercise #6</title>
        <meta name="description" content="Practice Exercise #7 is the cat's meow.">


        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="style.css">


    </head>

    <body>

    <!-- REPLACE THIS COMMENT WITH THE HTML FOR THE LAYOUT -->

    </body>
    </html>

  2. Create a responsive, mobile-first layout using CSS Grid.

    The layout should be 2 or more columns on large displays and a single column on small displays.

    Use a CSS Media Query to accomplish this.

    note

    You can see a completed example here:

  3. Embed an image in your main and/or aside column. Use an image that is large enough so you can see it scale down when the screen is made smaller.

  4. Add CSS code to make img elements flexible.

  5. Add some type of content within the main element. Feel free to use Lorem Ipsum dummy text.

  6. Use flexbox for any purpose you would like. In my practice exercise example, I chose to arrange elements in the banner using flexbox.

  7. Make sure it passes HTML and CSS validation.

  8. Push your changes to your Github repository.

note

You can see a completed example here: