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 🫣
Every developer bound to understand why it works, how it works and where it works? Let me elaborate the understanding of my portfolio project with HTML and CSS. Before the exact process, let's understand few new terms here.
MARGIN
- If you need to give any space outside the box, we can use margin
PADDING
- If you need to give space inside the box, we can use padding
Who is this box?
-In HTML, a box usually refers to the Box Model used in web pages.
Every HTML element behaves like a rectangular box 📦
Examples:
headings,
paragraphs,
images,
buttons,
divs,
all are treated as boxes by the browser.
A box contains:
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:
Before styling a webpage, one important thing to know is that every browser has its own default margin and padding. Because of this, webpages may look slightly different in different browsers 😄 Here, I have used Internal CSS.
To remove those default spaces, we commonly use:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
Here:
-
*is called the Global Selector because it selects all elements on the webpage. -
box-sizing: border-boxhelps maintain proper width and height calculations by including padding and border inside the element’s total size.
Selectors are used to target HTML elements for styling.
Examples:
header{}
h1{}
These are called Element Selectors because they directly target HTML elements.
While designing layouts, as a beginner, we often get confused about spacing and element positions 😄
A simple trick is to first add borders to elements:
border: 1px solid black;
This helps clearly visualize the boundaries of each element.
Now let’s understand Parent and Child relationships in HTML.
Example Structure:
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.