Day - 4 Built a website

#html #beginners #webdev #vscode

To Built A website
First needed to analize the given the demo site .than need to plan a the step by step process .which should be written in note then we can go with the flow

we are going to replicate the above page

*Here i am using the vscode *

First syntx

<!DOCTYPE html>
<html lang = "en">
<head> 
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

step 2 write the code in the part body we are going to write the code

<body> 
<header> 
<h1> Akilan</h1>
<nav>
<a href="">About Me </a>
<a herf="">Project</a>
<a herf="">Contact</a>
<a herf="">login page</a> 
</nav>
/<header>
</body>

from the above
there are two types of elements Block-level element and Inline Element

Block-level Element

Block-level Elements always starts on a new line,and the browers automatically add some space (a margin) before an after the element
This Element always takes up the full width available (strectches out as far as it can )
Here are the block-level elements in HTML

Inline Elements

An inline element does not start on a new line.
An inline element only takes up as much width as necessary
Here are the inline elements in HTML:

The HTML part has been over next CSS

here were are using Internal CSS

Internal CSS - The CSS rule set should be within the HTML file in the head section

<style>
 h1{
            /* border: 1px solid blue; */
            text-align: center;
            background-color: black;
            color: white;
            padding: 10px; 
            margin-bottom: 15px; 
          }
</style>

From the Above I have Used

text-alige:center;- this center the text
padding:10px- This creates extra Space with in the Element
we can specify the direct space like top,right,left,bottom
margin-bottom:15px-This create extra space around an element,
we can specify the direction space like top,bottom,right,left

4.*Nav tag from a tags *

where the tag is a inline element so I fit the four inline element
in a block_level element tag

*remaining code *

 nav{
            text-align: center;
            background-color: black;
            padding-bottom: 25px ;

          }

          a{
             /* border: 1px  solid red; */
            color: white;
            text-decoration: none;
            margin-right: 10px  ;
            /* display: block; */
           }

From The Above A New tag Is Used

text-decoration: none - this remove the line given below the tag

*Final code *

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        h1{
            /* border: 1px solid blue; */
            text-align: center;
            background-color: black;
            color: white;
            padding: 10px; 
            /* margin-bottom: 15px; */
          }
          nav{
            text-align: center;
            background-color: black;
            padding-bottom: 25px ;

          }

          a{
             /* border: 1px  solid red; */
            color: white;
            text-decoration: none;
            margin-right: 10px  ;
            /* display: block; */


          }




    </style>
</head>
<body>
    <header>
        <h1>Akilan</h1>
        <nav>
        <a href=""> About me </a>
        <a href="">Projects</a>
        <a href="">Contact</a>
        <a href="">login page </a>
        </nav>
    </header>


</body>
</html>

OUTPUT

DEV Community

Day - 4 Built a website

Top comments (0)