Skip to content

Latest commit

 

History

History
110 lines (82 loc) · 3.1 KB

README.md

File metadata and controls

110 lines (82 loc) · 3.1 KB
Raw

FreeCodeCamp - Portfolio Final Project

This is a final project for the FreeCode Camp "Responsive Web Design" course.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover and focus states for interactive elements

Screenshot

Project Photo

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • FontAwesome icons library

What I learned

Despite the perception of this project being relatively straightforward, there were some challenges that arose during its development. One instance was creating a hover animation utilizing the before and after pseudo-elements, which required a bit of extra effort to get right:

Implementation of `hover` elements 
.btn:hover i {
    transform: translateX(5px);
}

.btn:hover {
    background-color: var(--color-red);
}

Additionally, this project marked my first experience integrating the "FontAwesome" icon library onto the website, which proved to be a learning experience in itself as I navigated through the process of implementation.

FontAwesome library implementation 
<section id="contact" class="contact">
    <h2 class="contact__title">Let's work together...</h2>
    <p><i>How do you take your coffee?</i></p>
    <div class="contact__links">
        <a href="#" target="_blank" class="contact__link">
            <i class="fab fa-facebook-square"></i>
            Facebook
        </a>
        <a href="#" target="_blank" class="contact__link">
            <i class="fab fa-github"></i>
            GitHub
        </a>
        <a href="" target="_blank" class="contact__link">
            <i class="fab fa-twitter"></i>
            Twitter
        </a>
        <a href="mailto:ars.yar24@gmail.com" class="contact__link">
            <i class="fa-solid fa-envelope"></i>
            Email
        </a>
        <a href="mailto:ars.yar24@gmail.com" class="contact__link">
            <i class="fa-solid fa-bell"></i>
            Ring Me
        </a>
    </div>
</section>

Continued development

  • Enhance proficiency in utilizing icons from external libraries
  • Streamline the coding process to achieve maximum efficiency
  • Enhance expertise in managing responsive images.

Author