Always there is a starting point for anything, here is my starting point where I created my portfolio with deep understanding rather than just copy paste 🫣
Step 1 : To create any webpage, plan the webpage, how it should look
Step 2 : Create an HTML file and write the basic structure first
Step 3 : Add your content one by one.
Step 4 : After adding all contents, create a border for each division/section. Bordering helps well in understanding and styling
Step 5 : Start applying styles using CSS as per your requirement
Below is my code and explanation:
Here:
<body>is the parent of<header>
<header>is the parent of<h1>and<a>
<h1>and<a>are children of<header>
HTML elements mainly belong to two categories:
1. Block Level Elements
Block-level elements occupy the entire width available.
Even if the content is small, they block the whole line.
Examples:
<header><h1><div><p>
2. Inline Elements
Inline elements only take the space required by their content.
Examples:
<a><span><strong>
So, <a> tags sit side by side because they are inline elements 😄
Now let’s meet the <nav> tag!
<nav> stands for Navigation and is used to move from one webpage or section to another.
Example:
The <nav> tag itself is a block-level element, but it usually contains inline elements like anchor (<a>) tags.
To create spacing inside a box, we use Padding.
Example:
header{
padding: 20px;
}
Padding adds space between the content and the border.
To create spacing outside the box, we use Margin.
Example:
h1{
margin: 20px;
}
Margin creates distance between elements.
Margins can also be applied individually:
margin-top
margin-right
margin-bottom
margin-left
If only one value is given, the same margin applies to all four sides.
To underline text, CSS provides the text-decoration property.
Example:
text-decoration: underline;
If you want to remove underlines from links:
a{
text-decoration: none;
}
Hope, building this portfolio website project helped in understanding the basics of web development using HTML and CSS. The project demonstrates how to structure a webpage using HTML elements such as header, section, nav, and footer, while CSS was used to improve the design, layout, spacing, colors, and overall appearance of the website.
SOCIAL SHARE CARD GENERATOR