← Back to Explore Feed ✨

How to Make a Personal Website From Scratch

Build your first website using HTML and CSS and host it on Github Pages.

Beginner
HTML
CSS
Hosting
Workshop

Written by

@thunderbird

on May 23, 2024

This guide will walk you through the entire process of creating your first website, from creating an account on Replit to coding your website with HTML and CSS, and finally hosting it on GitHub Pages. By the end of this guide, you'll have a basic "Hello World" website live on the internet, looking something like this:

finished website gif

Here's a live demo and final code.

Let's get started!

Step 1: Setting Up Your Development Environment

1.1 Create an Account on Replit

Replit is an online coding platform that makes it easy to start coding without any setup. Here's how you can get started:

  1. Visit Replit: Open your web browser and go to Replit.
  2. Sign Up: Click on the "Sign Up" button. You can create an account using your email, Google account, or GitHub account. Follow the instructions to complete the sign-up process.

replit signup

1.2 Start a New HTML/CSS Project

Now that you have a Replit account, you can start a new project:

  1. Create a New Project: Once you are logged in, click on the "Create" button at the top right of the Replit dashboard.
  2. Select Template: A window will appear with several template options. Choose "HTML, CSS, JS" to create a project specifically for web development.

replit dashboard

  1. Project Setup: Replit will automatically set up a new project with the necessary files (index.html, style.css, script.js). You can ignore script.js for now as we'll focus on HTML and CSS.

replit first open

Step 2: Getting Started with HTML

HTML (HyperText Markup Language) is the standard language for creating webpages. It provides the structure of a website.

2.1 Basic HTML Structure

Every HTML document starts with a doctype declaration and is wrapped in <html> tags. Here's a breakdown of a basic HTML structure:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> Hello world <script src="script.js"></script> </body> </html>

The document starts with <!DOCTYPE html>, which defines the document type and version of HTML. This declaration is crucial as it helps the browser understand how to interpret the HTML code. It must only appear once at the top of the page, before any HTML tags.

Next, the <html lang="en"> tag wraps all the content of your webpage. The lang="en" attribute specifies the language as English, which helps search engines and browsers understand the language of the document.

Inside the <html> tag, there are two main sections: <head> and <body>. The <head> section contains meta-information about the document, such as the character set, the viewport settings, the title of the webpage, and links to external stylesheets. For example, <meta charset="utf-8"> sets the character encoding for the document to UTF-8, which includes almost all characters from all languages. The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag ensures that the webpage is responsive and adjusts its layout to the screen size of the device. The <title>My First Website</title> tag sets the title of the webpage that appears on the browser tab. Finally, the <link href="style.css" rel="stylesheet" type="text/css" /> tag links the external CSS file that styles the HTML content. We also have <script src="script.js"></script>, which references to script.js, the script that contains all of our javascript. You can ignore this for now.

The <body> section contains the content that will be displayed on the webpage. As of right now, we have a "Hello World" text, but later we will be adding more.

More on HTML (Elements and Attributes):

HTML is composed of elements, each defined by a start tag, some content, and an end tag. For example, an HTML paragraph is defined with the <p> tag, as follows:

<p>This is a paragraph.</p>

HTML elements can be nested, meaning they can contain other elements. Here is an example of nested HTML elements:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nested Elements Example</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <p>This is a paragraph with a <br> line break.</p> </body> </html>

The <h1> tag defines the most important heading, and the <p> tag defines a paragraph. The <br> tag defines a line break and is an empty element without a closing tag.

HTML elements can have attributes that provide additional information about the element. Attributes are always included in the start tag and come in name/value pairs like name="value". Here are some commonly used attributes:

The href attribute is used with the <a> tag to specify the URL of the page the link goes to:

<a href="https://www.w3schools.com">Visit W3Schools</a>

The src attribute is used with the <img> tag to specify the path to an image:

<img src="img_girl.jpg" alt="Girl with a jacket">

The alt attribute provides alternative text for an image if the image cannot be displayed:

<img src="img_typo.jpg" alt="Girl with a jacket">

2.2 Writing Your First HTML File

Now let's create your first HTML file in Replit:

  1. Open index.html: In the left sidebar of Replit, you will see a file named index.html. Click on it to open it.
  2. Replace Content: Delete the default content in index.html and replace it with the following code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>My First Website</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Hello World!</h1> <p>Web dev is cool :)</p> </body> </html>
  1. Run the Project: Click the "Run" button at the top of Replit. A preview window will open, displaying your "Hello, World!" webpage.

replit new code 1

Step 3: Getting Started with CSS

CSS (Cascading Style Sheets) is used to style HTML elements. It allows you to change colors, fonts, layouts, and more.

3.1 Basic CSS Syntax

CSS rules are composed of selectors and declarations. Here is the structure for a CSS declaration:

selector { property: value; }
  • Selector: Specifies the HTML element to be styled.
  • Property: Specifies the style property you want to change (e.g., color, font-size).
  • Value: Specifies the value for the property (e.g., red, 16px).

There are hundreds of properties that you can adjust to make your website unique! You can find a comprehensive list here from W3Schools.

3.2 Adding CSS to Your Project

Right now, our project looks very boring. Let's add some CSS to make our webpage prettier!

  1. Open style.css: In the left sidebar of Replit, click on the file named style.css.
  2. Add CSS Code: Add the following CSS code to style your "Hello, World!" text:
body { background-color: #f0f0f0; font-family: Arial, sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; } h1 { color: #4c73e6; }
  • body: This selector targets the entire body of the webpage.
  • background-color: #f0f0f0;: Sets the background color of the page.
  • font-family: Arial, sans-serif;: Sets the font of the text to Arial.
  • display: flex; flex-direction: column; justify-content: center; align-items: center;: Centers the content horizontally and vertically.
  • height: 100vh;: Sets the height of the body to 100% of the viewport height.
  • margin: 0;: Removes the default margin.
  • h1: This selector targets the <h1> element.
  • color: #4c73e6;: Sets the text color to a light blue.

Feel free to change any of the colors! This is where you get to customize your website to the way you want it to look :)

  1. Adding images / GIFs: Adding images and GIFs are done similarly. Let's add a gif! In your index.html file, add the following lines of code in your body:
<a title="NASA Goddard Space Flight Center Image by Reto Stöckli (land surface, shallow water, clouds) Enhancements by Robert Simmon (ocean color, compositing, 3D globes, animation) (conversion to gif Jahobr), Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Rotating_earth_animated_transparent.gif"><img width="256" alt="Rotating earth animated transparent" src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Rotating_earth_animated_transparent.gif?20201022124448"></a>

The GIF was retrieved from wikimedia. Note the nested <img> component. Your full index.html should look like this:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>My First Website</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <a title="NASA Goddard Space Flight Center Image by Reto Stöckli (land surface, shallow water, clouds) Enhancements by Robert Simmon (ocean color, compositing, 3D globes, animation) (conversion to gif Jahobr), Public domain, via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Rotating_earth_animated_transparent.gif"><img width="256" alt="Rotating earth animated transparent" src="https://upload.wikimedia.org/wikipedia/commons/7/7f/Rotating_earth_animated_transparent.gif?20201022124448"></a> <h1>Hello World!</h1> <p>Web dev is cool :)</p> </body> </html>
  1. Run the Project: Click "Run" again to see the styled "Hello World!" website.

finished website gif

Step 4: Hosting Your Website on GitHub Pages

Unfortunately hosting on Replit isn't free, and unless you would like to upgrade, we will be hosting our website on Github pages instead, which is a service that allows you to host your websites for free.

4.1 Create a GitHub Account

To get started, you need a GitHub account:

  1. Visit GitHub: Open your web browser and go to GitHub.
  2. Sign Up: Click on the "Sign up" button and create an account by following the instructions. You can sign up with your email address.

4.2 Create a New Repository

A repository is like a project folder on GitHub where you will store your website files:

  1. New Repository: Once logged in, click on the "New" button (usually found on the left sidebar or the top right corner) to create a new repository.
  2. Repository Details: Fill in the repository name (e.g., hello-world-website). You can add a description and set your repository to public if you like. Or you could set it to private - up to you! Afterwards, click "Create repository".

create repo on github for website

4.3 Upload Your Files to GitHub

Now you need to upload your HTML and CSS files to this repository:

  1. Download Files: Download your index.html file and style.css file by right clicking and selecting the "Download" button. It is recommended you store the files in a folder called the name of your website - in case, "hello-world-website".
  2. Upload Files: On your new repository page, click on "Add file" > "Upload files".

upload files repo

  1. Select Files: Drag and drop your index.html and style.css files into the upload area.
  2. Commit Changes: Scroll down and write a short commit message (usually something memorable, like "added HTML and CSS files". Then, click "Commit changes" to upload the files to your repository.

github commit

4.4 Enable GitHub Pages

GitHub Pages will host your website using the files in your repository:

  1. Repository Settings: Go to the "Settings" tab of your repository (usually found at the top of the page).
  2. GitHub Pages Section: Scroll down to the "Pages" section.

github pages

  1. Source Branch: Under "Source", select the branch you want to use (usually main or master depending on how you set up your repository) and click "Save".
  2. Website URL: Your website will be published at https://<your-username>.github.io/<repository-name>/. Give it 2 minutes to deploy your changes the first time!

celebratory gif

For reference: here's a live demo and final code.

Conclusion

Congratulations! You've created and hosted your first website. This simple "Hello, World!" project is just the beginning. As you become more comfortable with HTML and CSS, you can start adding more complex elements and styles to your website (with the help of google!). Some things to try:

  • use a different font!
  • add more pictures!
  • add more text, different kinds of text!
  • add music!
  • add a navbar, more pages!

You can also share your creation in the Hackpost Guide discord server!

The sky's the limit! Keep experimenting and happy coding!

nyan cat gif