DEV Community

Bala Murugan
Bala Murugan

Posted on

Learning HTML & CSS Portfolio Header Part

#html #css #portfolio #webdev

*Portfolio Webpage *

 This HTML page is a basic portfolio website structure.

A portfolio website is used to show your personal details, skills, and projects in one place.
Enter fullscreen mode Exit fullscreen mode

This page uses HTML for structure and CSS for styling.

code:

<!DOCTYPE html>




Portfolio 
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    header {
        background-color: black;
        padding: 20px;
    }

    h1 {
        color: white;
        text-align: center;
        margin-bottom: 10px;
    }

    nav {
        text-align: center;
    }

    nav a {
        color: white;
        text-decoration: none;
        margin: 0 15px;   /* proper spacing */
        font-size: 16px;
    }

    nav a:hover {
        text-decoration: underline;
    }

    section {
        padding: 40px;
        text-align: center;
    }

    .about {
        background-color: #f2f2f2;
    }

    .project {
        background-color: #e0e0e0;
    }

    .contact {
        background-color: #d0d0d0;
    }

    footer {
        background-color: black;
        color: white;
        text-align: center;
        padding: 15px;
    }
</style>
Enter fullscreen mode Exit fullscreen mode 
<header>
    <h1>BalaMurugan</h1>
    <nav>
        <a href="#">About Me</a>
        <a href="#">Projects</a>
        <a href="#">Contact</a>
        <a href="#">Login Page</a>
    </nav>
</header>

<section class="about">
    <h2>About Me</h2>
    <p>This section is for personal details.</p>
</section>

<section class="project">
    <h2>Projects</h2>
    <p>This section will show my projects.</p>
</section>

<section class="contact">
    <h2>Contact</h2>
    <p>This section contains contact information.</p>
</section>

<footer>
    <p>© 2026 BalaMurugan</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

*HTML Structure

 HTML is used to create the structure of the webpage.

 The page starts with <!DOCTYPE html> which tells the browser that this is an HTML5 document.

   The <html> tag wraps the entire page. Inside it, there are two main parts

              <head> and <body>.
Enter fullscreen mode Exit fullscreen mode

Head Section

 <head> ---> The section contains important information about the page.
Enter fullscreen mode Exit fullscreen mode


Allows the page to support all characters.


makes the page responsive on mobile devices.


sets the page title shown in the browser tab as portFolio. contains internal CSS used to design the page. **What is href ?** href means Hypertext Reference. It tells the browser where the link should go when the user clicks it. **Syntax** <a href="link">Link Text</a> <a> → Anchor tag href → Destination address Link Text → Text shown on the webpage Section Elements • <section class="about"> For personal information. • <section class="project"> To show projects. • <section class="contact"> For contact details. **Css overveiw** 1**.Inline Css:** Inline CSS is a way to apply CSS styles directly inside an HTML tag. The style is written using the style attribute. Inline CSS affects only one element and is used for quick styling. syntax : <p style="color: red;">This is a red paragraph</p> Example: <p> → HTML tag style → attribute used for CSS color → CSS property red → value Internal CSS Internal CSS is used to style a webpage by writing CSS code inside the <style> tag, which is placed inside the <head> section of an HTML file. Internal CSS is useful when you want to apply styles to one single webpage. **Internal CSS Syntax** selector { property: value; } **Internal css with example class ** <style> .box { background-color: lightgray; padding: 15px; text-align: center; } Hello World

*Internal CSS with ID Example
*

<br> #title {<br> color: green;<br> text-align: center;<br> }<br>

Internal CSS Title

What is External CSS (to be discussed)

 External CSS is used to style a webpage by writing CSS code in a separate .css file.

 This CSS file is then linked to the HTML file.

External CSS is best for real websites and multiple pages.

*syntax
*

body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}

h1 {
color: darkblue;
text-align: center;
}

p {
color: black;
font-size: 16px;
}

CSS Styling

    CSS is used to make the page look good.
  • { padding: 0; margin: 0; } removes default spacing from all elements.


Is centered, colored white, and given some bottom margin.

header has a black background and padding to create space.

     A ligns links to the center.

 a styles the links with white color, no underline, and spacing between them.

Top comments (0)