O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Working with the home structure

Inside the app directory, add a new directory named home. Inside it, create a new HTML page named home.html. We will begin putting together the home page section next.

Putting the content in the new file structure for the home

Next, open the index.html file and select all of the content within the body tag and cut it out. In the home.html file, create a new HTML5 MAIN element and inside it, paste the contents of your clipboard. This is going to create a new layer in your markup, so it will break your CSS. Let's fix that before we move on.

<main >
    <section>
        <div class="time color-0" id="time">FOO</div>
        <div>
        <div class="news color-1 scroll">

Modifying index.html and CSS

Conversely, modify the body to have the color-0 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required