How to Create a Personal Website with HTML & CSS
Start
Index
Objectives
Modules
Evaluation
Objectives
Understand the Basics of HTML & CSS
- Explain the role of HTML in structuring a webpage.
- Describe how CSS is used to style and enhance a webpage’s appearance.
- Understand how HTML and CSS work together to build web pages.
Set Up a Simple Web Development Environment
- Open and edit an HTML file using a basic text editor.
- Save and open an HTML file in a web browser.
Create a Basic Webpage Using HTML
- Write and structure a webpage using essential HTML elements.
- Add headings, paragraphs, images, and links to a webpage.
Apply CSS Styling to Improve the Webpage's Appearance
- Create and link an external CSS file to an HTML page.
- Use CSS properties like color, background-color, font-family, and text-align to style content.
- Understand the difference between inline, internal, and external CSS.
Enhance the Webpage with Additional Elements
- Add a profile picture and style it using CSS.
- Customize text styles, colors, and layout to create a unique design.
- Include a navigation link (e.g., a link to a social media profile or portfolio).
Modules
Adding CSS to Style Your Page
Intro to HTML & CSS
Creating Your First Webpage
Modules
Adding Images, Links, and More
01
Intro to HTML & CSS
HTML in 100 Seconds
CSS in 100 Seconds
01
Basic HTML Structure
<html> <head> <title>My Personal Website</title> </head> <body> <h1>Welcome to My Website</h1> <p>My name is Shashaank!</p> </body> </html>
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It provides the building blocks of a website by defining its content, such as text, images, and links. Think of HTML as the "skeleton" of a webpage. It structures the page but does not control its visual appearance.
Basic CSS Styling
What is CSS?
body { background-color: lightgray; font-family: Arial, sans-serif; text-align: center; } h1 { color: blue; font-size: 24px; }
CSS (Cascading Style Sheets) is a styling language that controls the look and feel of a webpage. It allows you to change colors, fonts, layout, and spacing, making web pages visually appealing. Think of CSS as the "aesthetic and design" of a webpage. It enhances the structure provided by HTML.
Why do you think separating content (HTML) and style (CSS) is important?
02
Creating Your First Webpage
Open a Text Editor
1)
To write and edit HTML we can use something as simple as a text editor built into most operating systems. Windows - Use Notepad Mac - Use TextEdit (switch the file to Plain Text Mode to remove unecessary formatting)
Create a File Named index.html
2)
1) Click File > New to create a blank document 2) Click File > Save As... and name the file 'index.html' 3) Select 'All Files' as the file type if applicable to your editor 4) Save the file in a folder that is easily accessible
HTML Code
Copy the following code into the index.html file:
<!DOCTYPE html> - Declares document as HTML <html> - Root element of HTML document <head> - Contains metadata of the webpage <title> - Sets the title displayed on the browser tab <body> - Contains all visible content of webpage <h1> - A large header <p> - A paragraph of text
<!DOCTYPE html> <html> <head> <title>My Personal Website</title> </head> <body> <h1>Welcome to My Website</h1> <p>Hello! My name is [Your Name].</p> </body> </html>
Open in a Web Browser
Now we can view our webpage! First save your index.html file after adding the code to it. Then in your file manager open your index.html file. It should open in your browser and look something like:
Activity
Try changing the text inside the <h1> and <p> elements. Then save your file and refresh the browser to see the changes in real-time!
03
Adding CSS to Style Your Page
03
Let’s improve the appearance of our webpage using CSS. CSS allows you to change fonts, colors, layouts, and more to make your website look visually appealing.
Create a File Named style.css
1) Click File > New to create a blank document 2) Click File > Save As... and name the file 'style.css' 3) Select 'All Files' as the file type if applicable to your editor 4) Save the file in a folder that also contains the previous index.html file
CSS Code
Copy the following code into the style.css file:
body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; } h1 { color: blue; font-size: 28px; } p { font-size: 18px; color: darkgray; }
font-family - Specificies font for an element background-color - Sets the background color of an element text-align - Specifies the horizontal alignment of text in an element color - Specifies the color of an element font-size - Sets the size of a text element
Link CSS File to index.html
Within the <head> container of the index.html file we can link the style.css file using the <link> tag.
... <head> <title>My Personal Website</title> <link rel="stylesheet" href="style.css"> </head> ...
We link the HTML and CSS file seperately to make the code cleaner and easier to manage. It also allows multiple webpages to be added in the future and use the same style sheet.
Open in a Web Browser
Now we can view our updated webpage! First save your index.html and style.css file after adding the code to it. Then in your file manager open your index.html file. It should open in your browser and look something like:
Activity
Try changing the values of the color inside style sheet. Then save your file and refresh the browser to see the changes in real-time!
04
Adding Images, Links, and More
Adding a Profile Image
Step 1
Select a profile picture and save it in the same folder as your index.html file. Rename the file as profile.jpg.
Step 2
Copy the following code into the index.html file:
<img src="profile.jpg" alt="My Profile Picture" width="200">
Place the code snippet in the <body> section of index.html
Adding a Link to Social Media
Copy the following code into the index.html file:
<p>Connect with me on <a href="https://linkedin.com" target="_blank">LinkedIn</a></p>
Place the code snippet in the <body> section of index.html You can replace the LinkedIn link with any social media profile of your choosing.
Final Code
This is the final updated code for both index.html and style.css. Check this with your code and fix any bugs.
index.html
style.css
Assessment
In this section, you will have the opportunity to test your acquired knowledge throughout the course. Our interactive quiz will provide a detailed assessment of your understanding of key topics. Get ready to challenge your skills and reinforce your learning as you move towards mastering the fundamental concepts. Don't miss the chance to demonstrate everything you've learned so far!
1/4
2/4
3/4
4/4
Course completed!
<!DOCTYPE html> <html> <head> <title>My Personal Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Welcome to My Website</h1> <img src="profile.jpg" alt="My Profile Picture" width="200"> <p>Hello! My name is [Your Name].</p> <p><a href="https://linkedin.com" target="_blank">LinkedIn</a></p></body> </html>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; } h1 { color: blue; font-size: 28px; } p { font-size: 18px; color: darkgray; } img { border-radius: 50%; display: block; margin: 20px auto; } a { color: blue; text-decoration: none; font-weight: bold; }
How to Create a Simple Personal Website with HTML & CSS
Shashaank Shankar
Created on March 4, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Neodigital CPD Course
View
Minimal Course
View
Basic Interactive Course
View
Laws and Regulations Course
Explore all templates
Transcript
How to Create a Personal Website with HTML & CSS
Start
Index
Objectives
Modules
Evaluation
Objectives
Understand the Basics of HTML & CSS
- Explain the role of HTML in structuring a webpage.
- Describe how CSS is used to style and enhance a webpage’s appearance.
- Understand how HTML and CSS work together to build web pages.
Set Up a Simple Web Development Environment- Open and edit an HTML file using a basic text editor.
- Save and open an HTML file in a web browser.
Create a Basic Webpage Using HTMLApply CSS Styling to Improve the Webpage's Appearance
- Create and link an external CSS file to an HTML page.
- Use CSS properties like color, background-color, font-family, and text-align to style content.
- Understand the difference between inline, internal, and external CSS.
Enhance the Webpage with Additional ElementsModules
Adding CSS to Style Your Page
Intro to HTML & CSS
Creating Your First Webpage
Modules
Adding Images, Links, and More
01
Intro to HTML & CSS
HTML in 100 Seconds
CSS in 100 Seconds
01
Basic HTML Structure
<html> <head> <title>My Personal Website</title> </head> <body> <h1>Welcome to My Website</h1> <p>My name is Shashaank!</p> </body> </html>
What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It provides the building blocks of a website by defining its content, such as text, images, and links. Think of HTML as the "skeleton" of a webpage. It structures the page but does not control its visual appearance.
Basic CSS Styling
What is CSS?
body { background-color: lightgray; font-family: Arial, sans-serif; text-align: center; } h1 { color: blue; font-size: 24px; }
CSS (Cascading Style Sheets) is a styling language that controls the look and feel of a webpage. It allows you to change colors, fonts, layout, and spacing, making web pages visually appealing. Think of CSS as the "aesthetic and design" of a webpage. It enhances the structure provided by HTML.
Why do you think separating content (HTML) and style (CSS) is important?
02
Creating Your First Webpage
Open a Text Editor
1)
To write and edit HTML we can use something as simple as a text editor built into most operating systems. Windows - Use Notepad Mac - Use TextEdit (switch the file to Plain Text Mode to remove unecessary formatting)
Create a File Named index.html
2)
1) Click File > New to create a blank document 2) Click File > Save As... and name the file 'index.html' 3) Select 'All Files' as the file type if applicable to your editor 4) Save the file in a folder that is easily accessible
HTML Code
Copy the following code into the index.html file:
<!DOCTYPE html> - Declares document as HTML <html> - Root element of HTML document <head> - Contains metadata of the webpage <title> - Sets the title displayed on the browser tab <body> - Contains all visible content of webpage <h1> - A large header <p> - A paragraph of text
<!DOCTYPE html> <html> <head> <title>My Personal Website</title> </head> <body> <h1>Welcome to My Website</h1> <p>Hello! My name is [Your Name].</p> </body> </html>
Open in a Web Browser
Now we can view our webpage! First save your index.html file after adding the code to it. Then in your file manager open your index.html file. It should open in your browser and look something like:
Activity
Try changing the text inside the <h1> and <p> elements. Then save your file and refresh the browser to see the changes in real-time!
03
Adding CSS to Style Your Page
03
Let’s improve the appearance of our webpage using CSS. CSS allows you to change fonts, colors, layouts, and more to make your website look visually appealing.
Create a File Named style.css
1) Click File > New to create a blank document 2) Click File > Save As... and name the file 'style.css' 3) Select 'All Files' as the file type if applicable to your editor 4) Save the file in a folder that also contains the previous index.html file
CSS Code
Copy the following code into the style.css file:
body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; } h1 { color: blue; font-size: 28px; } p { font-size: 18px; color: darkgray; }
font-family - Specificies font for an element background-color - Sets the background color of an element text-align - Specifies the horizontal alignment of text in an element color - Specifies the color of an element font-size - Sets the size of a text element
Link CSS File to index.html
Within the <head> container of the index.html file we can link the style.css file using the <link> tag.
... <head> <title>My Personal Website</title> <link rel="stylesheet" href="style.css"> </head> ...
We link the HTML and CSS file seperately to make the code cleaner and easier to manage. It also allows multiple webpages to be added in the future and use the same style sheet.
Open in a Web Browser
Now we can view our updated webpage! First save your index.html and style.css file after adding the code to it. Then in your file manager open your index.html file. It should open in your browser and look something like:
Activity
Try changing the values of the color inside style sheet. Then save your file and refresh the browser to see the changes in real-time!
04
Adding Images, Links, and More
Adding a Profile Image
Step 1
Select a profile picture and save it in the same folder as your index.html file. Rename the file as profile.jpg.
Step 2
Copy the following code into the index.html file:
<img src="profile.jpg" alt="My Profile Picture" width="200">
Place the code snippet in the <body> section of index.html
Adding a Link to Social Media
Copy the following code into the index.html file:
<p>Connect with me on <a href="https://linkedin.com" target="_blank">LinkedIn</a></p>
Place the code snippet in the <body> section of index.html You can replace the LinkedIn link with any social media profile of your choosing.
Final Code
This is the final updated code for both index.html and style.css. Check this with your code and fix any bugs.
index.html
style.css
Assessment
In this section, you will have the opportunity to test your acquired knowledge throughout the course. Our interactive quiz will provide a detailed assessment of your understanding of key topics. Get ready to challenge your skills and reinforce your learning as you move towards mastering the fundamental concepts. Don't miss the chance to demonstrate everything you've learned so far!
1/4
2/4
3/4
4/4
Course completed!
<!DOCTYPE html> <html> <head> <title>My Personal Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Welcome to My Website</h1> <img src="profile.jpg" alt="My Profile Picture" width="200"> <p>Hello! My name is [Your Name].</p> <p><a href="https://linkedin.com" target="_blank">LinkedIn</a></p></body> </html>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; } h1 { color: blue; font-size: 28px; } p { font-size: 18px; color: darkgray; } img { border-radius: 50%; display: block; margin: 20px auto; } a { color: blue; text-decoration: none; font-weight: bold; }