ckportfolio.com - HTML and CSS

HTML and CSS

Layout using HTML and CSS

It's time to translate the design to code using HTML and CSS.

Construct a <div>-based layout, using what we learned from last week. Note that the HTML page particularly pays attention to the whitespace bug discussed in last week's exercise, and that the CSS document presents the "inline-block" technique used to build layout columns:

The result is a layout that clearly illustrates the various sections within the website:

Screencast Recording

https://drive.google.com/file/d/1QXG9OPODNV8G4i9amYpZwWpXu2icMOhu/view?usp=drive_link

(Updated October 29, 2023)

Code Sample: HTML

<!doctype html>
<html>
    <head>
        <title>Week 3</title>
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <!-- TITLE -->
            <div id="title"></div>
            <!-- CONTENT -->            
            <div id="content">
                <div id="content_left"></div>
                <div id="content_right">
                    <div id="video"></div>
                </div>
            </div>
            <!-- MENU -->           
            <div id="menu"></div>
        </div>
    </body>
</html>

Code Sample: CSS

/* SKIPPING CSS RESET */

#container
{
    width:800px;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    margin-bottom:30px;
}

#title
{
    height:100px;
    background-color:#333;
    margin-bottom:20px;
}

#content
{
    display:flex;
    align-items: start;
}

#content_left
{
    width:280px;
    height:500px;
    background-color:#333;
    margin-right:20px;  
}

#content_right
{
    width:500px;
    height:500px;
    background-color:#333;
}

#video
{
    height:300px;
    background-color:pink;
}

#menu
{
    height:100px;
    background-color:#333;
    margin-top:20px;
}
Fin