Creating a simple website using HTML, CSS, and JavaScript, and hosting it on GitHub, is an excellent way to start your web development journey. This approach allows you to learn, experiment, and showcase your projects without needing a server or complex setup. Let's dive into the process step by step.

Before we begin, ensure you have a basic understanding of HTML, CSS, and JavaScript. If you're new to these, consider spending some time learning the fundamentals. Codecademy, freeCodeCamp, and W3Schools offer interactive tutorials that can help you get started.

Setting Up Your Project

First, let's set up a new repository on GitHub and clone it to your local machine.

18 Exciting HTML and CSS Project Ideas with source code to Level Up Your Web Development Skills

1. Sign up or log in to GitHub and click the '+' icon in the top-right corner. Select 'New repository' and name it (e.g., 'my-first-website').

Cloning the Repository

2. Click the green 'Code' button and copy the repository URL.

3. Open your terminal or command prompt, navigate to the directory where you want to save your project, and run `git clone `.

Initializing the Project

4. Navigate into the newly created folder using `cd my-first-website` (or your repository name).

5. Initialize a new Git repository with `git init`.

Creating Your Website

Create a Delicious Cupcake Design Using HTML & CSS! 🍰

Now that your project is set up, let's create a simple website using HTML, CSS, and JavaScript.

1. Create an `index.html` file in your project folder with the following basic HTML structure:

CSS Notes for Beginners (Easy + Quick Guide) 🎨

Upload Image using JS 🤳| HTML CSS JavaScript

an image of the back side of a computer screen with text that reads, add css to html

Master CSS Pseudo-Classes for Dynamic Styling

SVG Stroke Animation Using CSS3 | Geekboots

GitHub - breatheco-de/exercise-instagram-feed: Practice your HTML/CSS skills! Very simple instagram simulation to understand the basics of CSS and HTML5 and how to use them together to create a website.

```html My First Website

Welcome to My First Website!

```

Styling with CSS

2. Create a new folder named 'css' (or 'styles') and inside it, create a file named 'styles.css'. Add some basic styling to your `index.html` file:

```css body { font-family: Arial, sans-serif; margin: 0; padding: 2rem; background-color: #f0f0f0; } h1 { color: #333; } ```

Adding Interactivity with JavaScript

3. Create a new folder named 'js' (or 'scripts') and inside it, create a file named 'script.js'. Add a simple JavaScript function that changes the heading color when the page loads:

```javascript document.addEventListener('DOMContentLoaded', function() { document.querySelector('h1').style.color = 'blue'; }); ```

Commit your changes with `git add .`, `git commit -m "Initial commit"`, and push to GitHub using `git push origin main`.

Deploying to GitHub Pages

GitHub Pages allows you to host your website directly from your GitHub repository.

1. Go to your repository on GitHub, click the 'Settings' tab, and scroll down to the 'GitHub Pages' section.

Selecting the Source

2. Under 'Source', select 'main' (or your primary branch) and click 'Save'.

3. Once the page refreshes, you should see a message indicating that your site is published at `https://.github.io/`.

Viewing Your Live Site

4. Click the link to view your live website. You should see your heading saying "Welcome to My First Website!" with the text color you specified in your JavaScript file.

Congratulations! You've just created and deployed a simple website using HTML, CSS, and JavaScript on GitHub. This is a fantastic starting point for learning and experimenting with web development. Happy coding!