Skip to main content

Practice 6

note

You can see a completed example here:

  1. Create a "6" folder and 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 #6 is the bee's knees.">


        <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 float-based, mobile-first layout.

    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 in the main element. Feel free to use Lorem Ipsum dummy text.

  6. Use the position property to position some element on your page.

    In my practice exercise example, I chose to position an img element.

  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: