Explorercreate account

RE: Web Application Development Lesson 1 - HTML Layout by dealsy

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com

Viewing a response to: @dealsy/web-application-development-lesson-1-html-layout

education·@thierrydd·
0.000 HBD
Great work!

I would recommend to include some basic CSS Reset 🅰 

Also, for your HTML Layouts, you  might want to use [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) 🅱 and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 🅲. This will become particularly handy when you will build responsive layout.

In your CSS for `.topnav a` 🅳, the `text-align` property is useless.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { /* 🅰 */
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        html {
            height: 100%;
        }
        body {
            min-height: 100%;
            display: grid; /* 🅱 */
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: 
                "header"
                "main"
                "footer"
        }
        nav {
            grid-area: header;
            display: flex; /* 🅲 */
            flex-direction: row;
            background-color: #00BFFF;
        }
        nav a { /* 🅳 */
            color: #f2f2f2;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        nav a.active {
            background-color: #4CAF50;
            color: white;
        }
        .content {
            grid-area: main;
            background-color: #4CAF50;
        }
        footer {
            grid-area: footer;
            background-color: salmon;
        }
    </style>
</head>
<body>
    <nav>
        <a  href="#home" class="active">Home</a>
        <a  href="#about">About</a>
        <a  href="#contact">Contact</a>
    </nav>
    <div class="content">
        THIS IS THE BODY CONTENT!
    </div>
    <footer>
        THIS IS A FOOTER
    </footer>
</body>
</html>
```
<br />

![Basic HTML Layout](https://steemitimages.com/DQmcxXx3GcoeDdkMGBnNq8WgxhZeKfbLbvK6oFFf9KdXznP/_home_thierry_Projects_Grooviz_grooviz-carousel_index.html(iPhone%206_7_8).png)

My IDE of choice is [VS Code](https://code.visualstudio.com/). It's free, open source and runs a bunch of programming languages.

Happy Steeming!
👍 ,
properties (23)vote details (1)