You are viewing a single comment's thread from:
RE: Web Application Development Lesson 1 - HTML Layout
Great work!
I would recommend to include some basic CSS Reset 🅰
Also, for your HTML Layouts, you might want to use CSS Grid 🅱 and Flexbox 🅲. This will become particularly handy when you will build responsive layout.
In your CSS for .topnav a 🅳, the text-align property is useless.
<!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>
.png)
My IDE of choice is VS Code. It's free, open source and runs a bunch of programming languages.
Happy Steeming!
Hey mate, yeah absolutely there are a lot of neat little things :P I'm going to suggest materializedcss in a later tutorial. The aim here is to build the flask project but I thought giving really basic example of each element would be a nice touch. :)
But you're absolutely right :p we should be using a grid system for responsiveness :)