Creating a simple portfolio website is an excellent way to showcase your skills and projects to potential employers or clients. With HTML, CSS, and JavaScript, you can build a professional and engaging online presence. This article will guide you through creating a simple portfolio website using these technologies and hosting it on GitHub Pages.
Before we dive into the code, ensure you have a basic understanding of HTML, CSS, and JavaScript. If you're new to these technologies, consider checking out some beginner-friendly tutorials to get started. Now, let's create a simple portfolio website step by step.
Setting Up Your Project
First, create a new folder for your portfolio project and navigate into it. Then, initialize a new Git repository using the command git init in your terminal. This will help you keep track of changes and easily deploy your website to GitHub Pages.
Next, create the following files and folders in your project directory:
index.htmlstyles.cssscript.jsimg(folder for images)
Creating the HTML Structure
Open the index.html file and add the basic HTML structure for your portfolio website. Include the necessary meta tags, a <title> tag, and the main sections like <header>, <main>, and <footer>.
Here's a simple HTML structure to get you started:
```html
Your Name
Your profession/title
About
Write a brief paragraph about yourself and your skills.
Projects
![How to create Portfolio Website Using HTML and CSS | Full Web Design Process [STEP-BY-STEP GUIDE]](https://i.pinimg.com/originals/97/6c/8f/976c8fc7829d4b3daf2dd559ddb5d715.jpg)
Contact
Provide your contact information or links to your social media profiles.
```
Styling Your Portfolio
Now that you have the basic HTML structure, it's time to add some styles using CSS. Open the styles.css file and start styling your portfolio. You can use CSS selectors to target specific elements and apply styles like colors, fonts, and layouts.
Here's a simple CSS example to get you started:
```css * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } header { background-color: #f8f9fa; padding: 2rem; text-align: center; } main { max-width: 800px; margin: auto; padding: 2rem; } h1, h2 { color: #212529; } footer { background-color: #f8f9fa; text-align: center; padding: 1rem; } ```
Adding Interactivity with JavaScript
JavaScript allows you to add interactive features to your portfolio, such as smooth scrolling, form validations, or dynamic content. Open the script.js file and start adding functionality to your website.
Here's a simple example of adding smooth scrolling to your portfolio using JavaScript:
```javascript document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); ```
Showcasing Your Projects
To showcase your projects, create a new section for each project inside the <main> tag in your index.html file. Include a heading, description, images, and links to the live project or GitHub repository. You can also add interactive elements using JavaScript, such as modal windows to display project details.
Here's an example of a project section:
```html
Project Title
Write a brief description of the project, its features, and the technologies used.
Don't forget to add the project images to the img folder and update the image source paths accordingly.
Deploying to GitHub Pages
Once you're satisfied with your portfolio, it's time to deploy it to GitHub Pages. First, commit your changes using the following commands in your terminal:
```bash git add . git commit -m "Initial commit" ```
Then, create a new repository on GitHub and push your local project to the remote repository:
```bash git remote add origin https://github.com/yourusername/your-portfolio.git git push -u origin main ```
Now, go to your repository settings on GitHub, scroll down to the "Pages" section, and select the main branch as the source. Click "Save" and wait for a few minutes for your portfolio to be deployed. Once it's live, you'll see the URL where your portfolio is hosted.
Congratulations! You've just created a simple portfolio website using HTML, CSS, and JavaScript, and deployed it on GitHub Pages. Keep updating your portfolio with new projects and skills as you progress in your career. Good luck!