scrimba
Code with AI
Games, Apps and more
Personal homepage - part 2
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Personal homepage - part 2
AboutCommentsNotes
Personal homepage - part 2
Expand for more info
index.html
run
preview
console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Personal Homepage</title>
<!-- Include the icon font library, such as Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="styles.css"> <!-- We'll create this stylesheet later -->
</head>
<body>
<!-- Header Section -->
<header>
<h1>Guil H</h1>
<nav>
<ul>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
</ul>
</nav>
</header>

<!-- Projects Section -->

<!--
Challenge: Add your project slideshow
* Place in the HTML in the projects section
* Add the slideshow's CSS to slideshow.css
* Include the JavaScript in script.js
-->

<section id="projects">
<h2>Projects</h2>
<!-- Placeholder for displaying your projects -->
</section>

<!-- About Section -->
<section id="about">
<h2>About Me</h2>
<div class="about-content">
<img src="images/photo.jpg" alt="Guil's Picture">
<p>
Hi there! I'm Guil, a passionate web developer with a love for building
awesome websites. I enjoy experimenting with new technologies and
turning ideas into reality. When I'm not coding, you can find me exploring
nature or reading a good book.
</p>
<p>
Feel free to check out my <a href="path/to/your/resume.pdf" target="_blank">resume</a>
to learn more about my professional experience and skills.
</p>
</div>
</section>

<!-- Skills Section -->
<section id="skills">
<h2>Skills</h2>
<div class="skill">
<h3>HTML</h3>
<p>Proficient in writing semantic and accessible HTML code for building web pages.</p>
<div class="progress-bar">
<div class="progress" style="width: 90%;">90%</div>
</div>
</div>
<div class="skill">
<h3>CSS</h3>
<p>Skilled in styling web pages with CSS and creating responsive layouts.</p>
<div class="progress-bar">
<div class="progress" style="width: 85%;">85%</div>
</div>
</div>
<div class="skill">
<h3>JavaScript</h3>
<p>Familiar with JavaScript and building interactive features for websites.</p>
<div class="progress-bar">
<div class="progress" style="width: 70%;">70%</div>
</div>
</div>
</section>

<!-- Footer Section -->
<footer>
<div class="social-icons">
<a href="https://www.linkedin.com/your-profile" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/your-handle" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/your-handle" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
<p>&copy; 2023 Guil H. All rights reserved.</p>
</footer>
</body>
</html>
Console
/index.html
-9:50