Personal Portfolio Webpage - Build a Personal Portfolio Webpage

This is my final project and I’m happy with it, there’s just a few things that aren’t complete I am trying to make this page: https://personal-portfolio.freecodecamp.rocks/#welcome-section:

  1. My main section doesn’t extends when changing the size of the page so when I size down my page the projects wrap like I want them to but the main doesn’t extends so you would see that the projects now have another background color (The contact section), it’s hard for me to explain but try changing the size of the window you’ll understand what I mean.

  2. The p in the anchor element inside the main, when I hover over it I’ve added some content like they did but I can’t space them like 5px from the p and each p has a different width so as you can see it’s a little messy.

  3. The projects button animation, as you can see it’s not working it is turning red like I want it to but I don’t know how to make the > move.

4.The contact section has 5 links for social media and emails and stuff, in the original page they have icons of them next to them and they are animated, I don’t know how to put these icons, and for the animation I tried doing it but something isn’t working .

Here’s my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
    <title>Final Project</title>
</head>
<body>

    <header>
        <nav class="nav__bar" id="navbar">
            <ul>
                <li><a class="nav__links" href="#welcome-section">About</a></li>
                <li><a class="nav__links" href="#projects">Work</a></li>
                <li><a class="nav__links" href="#contact">Contact</a></li>
            </ul>
        </nav>

        <section class="section__first" id="welcome-section">

            <h1 class="section__h1">Hey I am Ghady</h1>
            <p class="section__p">a web developper</p>

        </section>
    </header>

    <main>
        <section class="section__projects" id="projects">
            <h2>These are some of my projects</h2>
            <div class="projects__div">
                <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project-tile">
                    <img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg">
                    <p class="projects__p">Tribute Page</p>
                </a>
                <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank" class="project-tile">
                    <img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png">
                    <p class="projects__p">Random Quote Machine</p>
                </a>
                <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" class="project-tile">
                    <img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png">
                    <p class="projects__p">Javascipt Calculator</p>
                </a>
                <a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-tile">
                    <img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg">
                    <p class="projects__p">Map Across The Globe</p>
                </a>
                <a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project-tile">
                    <img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png">
                    <p class="projects__p">Wikipedia Viewer</p>
                </a>
                <a href="https://codepen.io/freeCodeCamp/full/KzXQgy" target="_blank" class="project-tile">
                    <img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png">
                    <p class="projects__p">Tic Tac Toe Game</p>
                </a>
            </div>
            <div class="div__button">
                <button class="projects__button">Show all &nbsp;&nbsp;></button>
            </div>
        </section>
    </main>

    <section class="section__contact" id="contact">
        <div class="contact__header">
            <h2 class="contact__h2">Let's work together...</h2>
            <p class="contact__p">How do you take your coffee?</p>
        </div>
        <div class="contact__links">
            <a href="https://www.facebook.com/freecodecamp" id="profile-link" target="_blank">Facebook</a>
            <a href="https://github.com/freecodecamp" id="profile-link" target="_blank">Github</a>
            <a href="https://twitter.com/freecodecamp" id="profile-link" target="_blank">Twitter</a>
            <a href="mailto:example@example.com" id="profile-link" target="_blank">Send an Email</a>
            <a href="tel: 555-555-5555 id="profile-link" target="_blank"">Call me</a>
        </div>
    </section>

    <footer class="footer">
        <p class="wrap inline">**This is just a fake portfolio. All the projects and contact details given are not real.</p>
        <p class="wrap inline">&copy; Created for <a class="footer__link" href="https://freecodecamp.org/">freeCodeCamp</a></p>
    </footer>

    
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    font-size: 1.5rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

:root{
    /* COLORS */
    --HEADER-RED: rgb(241, 92, 92);
    --FONT-COLOR: whitesmoke;
    --BODY-GRAY: rgb(70, 70, 71);
    --HEADER-HOVER-BLUE: rgb(98, 98, 236);
    --PROJECT-PBGCOLOR: rgb(52, 53, 58);
    --POPPING-RED: brown;

}
/* UTILITY CLASSES */
.wrap{
    white-space:wrap;
}

.inline{
    display: inline;
}

/* || NAVIGATION BAR */
.nav__bar{
    position: fixed;
    top: 0;
    z-index: 1;
    background-color: var(--HEADER-RED);
    width: 100%;
    height: 80px;
    border-bottom: 1px solid black;
}

.nav__bar ul{
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.nav__bar li{
    display: inline;
    padding: 1em 1em;
    height: 80px;
}

.nav__links{
    text-decoration: none;
    color: var(--FONT-COLOR);
}

.nav__bar li:hover, .nav__bar li:focus{
    background-color: var(--HEADER-HOVER-BLUE);
}

/* WELCOME SECTION */

.section__first{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--BODY-GRAY);
}

.section__h1{
    font-size: 3em;
    color: var(--FONT-COLOR);
}

.section__p{
    font-style: italic;
    font-size: 1.7em;
    color: var(--HEADER-RED);
}

/* || PROJECTS SECTION */

.section__projects{
    height: 130vh;
    background-color: var(--HEADER-HOVER-BLUE);
}

.section__projects h2{
    color: var(--FONT-COLOR);
    text-align: center;
    text-decoration: underline;
    font-size: 2em;
    padding-top: 3rem;
}

.projects__div{
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.project-tile{
    width: 30%;
    min-width: 300px;
    text-decoration: none;
}

.projects__images{
    width: 100%;
    height: 400px;
    display: block;

}

.projects__p{
    background-color: var(--PROJECT-PBGCOLOR);
    color: var(--FONT-COLOR);
    text-align: center;
    padding: 1rem;
    position: relative;
}

.projects__p:hover::after{
    content: '/>';
    color: orange;
    position: absolute;
    right: 20px;
}

.projects__p:hover::before{
    content: '<';
    color: orange;
    position: absolute;
    left: 20px;

}


.div__button{
    text-align: center;
    margin-top: 3rem;
}

.projects__button{
    padding: 1rem 1.5rem;
    background-color: var(--PROJECT-PBGCOLOR);
    color: var(--FONT-COLOR);
    font: inherit;
    cursor: pointer;
}

.projects__button:hover{
    background: var(--POPPING-RED);
    transition: background 0.5s ease;
}

/* CONTACT SECTION */

.section__contact{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--PROJECT-PBGCOLOR);
    gap: 2rem;
}
.contact__header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--FONT-COLOR);
}
.contact__h2{
    font-size: 3.5rem;
}
.contact__p{
    font-style: italic;
    font-weight: 100;
}
.contact__links a{
    color: var(--FONT-COLOR);
    padding: 2rem;
    text-decoration: none;
}

.contact__links a:hover{
    transform: translateY(-2rem);
    transition: all 0.5s ease;
}

/* || FOOTER */
.footer{
    height: 120px;
    background-color: rgb(52, 53, 58);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 4px solid var(--POPPING-RED);
}

.footer p{
    color: var(--FONT-COLOR);
    padding: 1rem;
}

.footer__link{
    color: var(--FONT-COLOR);
    text-decoration: none;
}

/* DARK MODE */
@media(prefers-color-scheme: dark){
    :root{
        --HEADER-RED: rgb(233, 116, 116);
        --FONT-COLOR: whitesmoke;
        --BODY-GRAY: rgb(70, 70, 71);
        --HEADER-HOVER-BLUE: rgb(30, 30, 44);
        --PROJECT-PBGCOLOR: rgb(52, 53, 58);
        --POPPING-RED: rgb(216, 224, 96);
    }
}

Thank you for the help!

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

You have many same id attribute value’s in the html format and also you forget many Syntex like quotation marks closing brackets etc. put your code in the codepen.io and see it.
@GhadyKeyrouz

Can you elaborate more? What do you mean I have same id attribute value? And which line have I missed quotation marks and closing brackets? I tried putting my code in codepen.io nothing happend it’s just like vs code. What about the things that didn’t work for me can some help pls?

Can someone pls help, I’m still stuck on these.

Your HTML structure seems well-organized and follows best practices. However, I noticed a couple of small issues and have some suggestions for improvements:

  1. Duplicate IDs: The id attribute should be unique within the HTML document. In your contact section, you have multiple elements with the same id attribute (profile-link). Instead, you can use classes to target these elements.

  2. Missing closing quotation mark: In the contact section, the href attribute for the phone number link is missing a closing quotation mark ("). Ensure it’s closed properly to avoid any parsing errors.

  3. Semantic HTML: Consider using more semantic HTML elements where appropriate, such as <header>, <main>, <footer>, and <section>. These elements help improve accessibility and SEO.

  4. Accessibility: Add alt attributes to your <img> tags to provide alternative text for screen readers and improve accessibility.

  5. Target Blank: While opening links in a new tab (target="_blank") can improve user experience in some cases, it’s also important to consider potential security risks. You might want to inform users that links will open in a new tab/window, especially if it’s not expected behavior.

Here’s the corrected HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styles.css" rel="stylesheet">
    <title>Final Project</title>
</head>
<body>

    <header>
        <nav class="nav__bar" id="navbar">
            <ul>
                <li><a class="nav__links" href="#welcome-section">About</a></li>
                <li><a class="nav__links" href="#projects">Work</a></li>
                <li><a class="nav__links" href="#contact">Contact</a></li>
            </ul>
        </nav>

        <section class="section__first" id="welcome-section">
            <h1 class="section__h1">Hey I am Ghady</h1>
            <p class="section__p">a web developer</p>
        </section>
    </header>

    <main>
        <section class="section__projects" id="projects">
            <!-- Project tiles go here -->
        </section>
    </main>

    <section class="section__contact" id="contact">
        <div class="contact__header">
            <h2 class="contact__h2">Let's work together...</h2>
            <p class="contact__p">How do you take your coffee?</p>
        </div>
        <div class="contact__links">
            <a href="https://www.facebook.com/freecodecamp" class="profile-link" target="_blank">Facebook</a>
            <a href="https://github.com/freecodecamp" class="profile-link" target="_blank">Github</a>
            <a href="https://twitter.com/freecodecamp" class="profile-link" target="_blank">Twitter</a>
            <a href="mailto:example@example.com" class="profile-link" target="_blank">Send an Email</a>
            <a href="tel:555-555-5555" class="profile-link" target="_blank">Call me</a>
        </div>
    </section>

    <footer class="footer">
        <p class="wrap inline">**This is just a fake portfolio. All the projects and contact details given are not real.</p>
        <p class="wrap inline">&copy; Created for <a class="footer__link" href="https://freecodecamp.org/">freeCodeCamp</a></p>
    </footer>
</body>
</html>

These adjustments will improve the correctness and usability of your HTML code.
@GhadyKeyrouz

Your CSS code looks well-organized and structured. I don’t see any immediate errors, but I can provide a few suggestions for improvements:

  1. Consistency in Naming: Ensure consistency in naming conventions throughout your code. For example, you’ve used both kebab-case (nav__bar) and camelCase (div__button). Stick to one convention for better readability and maintainability.

  2. Comments: Consider adding comments to sections of your code, especially if it’s a large project or if you’re working in a team. Comments can help others understand your code better and make maintenance easier.

  3. Responsive Design: Check the responsiveness of your design across different screen sizes. While your CSS includes media queries for dark mode and possibly responsiveness, thorough testing on various devices can help ensure a consistent experience for users.

  4. Accessibility: Ensure your design is accessible to all users, including those with disabilities. Consider using appropriate ARIA attributes and testing with screen readers.

  5. Performance Optimization: Optimize your CSS for performance, especially if your website will be used on mobile devices or in areas with slow internet connections. Minify your CSS and consider using techniques like lazy loading for images.

  6. Browser Compatibility: Test your website on multiple browsers to ensure compatibility. While modern browsers generally handle CSS well, it’s still important to verify.

These suggestions aim to enhance the quality and maintainability of your code. Overall, your CSS code appears well-structured and organized.
@GhadyKeyrouz

for the duplicate IDs the projects requires you to have one id with profile-link that’s why I gave them all that ID but I will change them, 2. I did notice the missing quotation marks and fixed it while reviewing it the other day, 3. I tried to do that almost every part is in its own section but the thing is when I have to style it I got forced to use divs inside the sections to use flexbox (I thought it’s weird using sections inside sections), 4. I should have done I know how to do it I just chose not to but I will fix it, 5. The only link I see without a target=“_blank” in the one in the footer leading to the freecodecamp site which I just fixed but I also didn’t add a target=“_blank” in the nav because ofc I don’t want it to go to a new page for it to go to a different section on the same page

now for the CSS: 1. I still get a little confused on how to name my classes since both methods are close to each other but I will keep an eye out for future projects, 2. Actually this is the first time I’ve added comments in my CSS and it’s honestly very helpful while searching for somethings but I feel I can more comments, 3. I will but I’m not really worried about that now I wanna finish the project completely before fixing the different screen sizes, 4. This is the first time I’ve ever heard about ARIA attributes, 5. I just added for all my images a lazy loading attributes, 6. I’ve actually never tried that I know how to do it in vscode but I just set it to chrome because I’ve got multiple chrome pages open since it’s my main browser.

But what about the things that aren’t working?

For example you can see in the first pic is the original project and the second pic is mine, when I hover a project </> appears around it, in the original it’s very close to the text, in mine they are far away how can I make them stick to the text,


also here when I hover over the show all button it should turn red and the > after it should move like 5 px to the left, I tried putting the > in a span element and edit it in the css so when I hover over it it has a transform property with a translateX but it doesn’t work
there’s this same problem in the footer also while hovering over the contact links they should move slightly downwards in a smooth animation, I tried having a transform property with a translateY it also didn’t work.
I’m sorry if I’m asking many questions, I just wanna learn.

Got it! It sounds like you’ve considered various aspects of your code carefully. Regarding the use of id attributes, if it’s a requirement for your project, you can certainly keep them as long as it aligns with the project specifications.

For the semantic HTML and styling concerns, using div elements within sections to apply styling with Flexbox is a common approach, and it’s perfectly fine. While it’s true that you can’t directly apply Flexbox properties to semantic elements like <section>, using <div> elements for styling purposes is a widely accepted practice.

As for the navigation links not needing target="_blank" because they navigate within the same page, that’s absolutely correct. Only external links that navigate to a different website or open a new tab/window should generally have target="_blank" to inform users about the behavior.

  1. Naming Classes: It’s common to feel a bit confused about naming classes, especially when both methods (kebab-case and camelCase) seem similar. Consistency within a project is key, but ultimately, choose the naming convention that makes the most sense to you and your team. The important thing is to stick with it throughout the project to maintain readability and consistency.

  2. Comments in CSS: Adding comments to your CSS is indeed very helpful, especially as your project grows larger. It’s great to hear that you found them useful. You can add comments to describe sections of your code, explain complex styling decisions, or provide context for future developers (or yourself!) who may work on the project.

  3. Responsive Design: Prioritizing the completion of your project before optimizing for different screen sizes is understandable. Once you’re ready to work on responsiveness, consider using media queries to adjust your layout and styling based on the device’s screen size. This will ensure a consistent and user-friendly experience across various devices.

  4. ARIA Attributes: ARIA attributes are used to enhance the accessibility of web content for users with disabilities. They provide additional information to assistive technologies like screen readers. While you may not need them for every project, it’s good to be aware of them and use them when necessary to make your websites more accessible to all users.

  5. Lazy Loading Images: Adding the loading="lazy" attribute to your images is a great way to improve performance by loading images only when they’re needed, especially on pages with lots of images. This can significantly reduce initial page load times and save bandwidth, particularly on mobile devices.

  6. Browser Testing: Testing your website on multiple browsers, including different versions of Chrome, is important for ensuring cross-browser compatibility. While working primarily in Chrome is convenient, remember to periodically check how your site renders and functions in other browsers like Firefox, Safari, and Edge to ensure a consistent experience for all users.

It’s clear that you’re making thoughtful decisions and actively seeking ways to improve your coding practices. Keep up the great work, and if you have any further questions or need assistance with anything else, feel free to ask!

Asking questions is a great way to learn and improve your skills. Let’s address each of your concerns:

  1. Adjusting Position of </> on Hover: To make the “</>” symbols stick closer to the text when hovering over a project, you can adjust their position using the position property. Try setting the position of the ::before and ::after pseudo-elements to absolute, and adjust the top and left properties to position them where you want relative to the text.

  2. Changing Color and Moving Arrow on Hover: To change the color of the “>” and move it slightly to the left on hover, you can use the transition property along with the transform property. Ensure that the “>” is within a container, such as a <span>, and apply the hover effects to the container itself. For example:

    .projects__button:hover > span {
        color: red;
        transform: translateX(-5px);
    }
    
  3. Smooth Animation on Contact Links: To achieve a smooth animation when hovering over the contact links, use the transition property along with the transform property, similar to the approach for the “>” symbol. Ensure that the transform property is applied to the <a> element itself. For example:

    .contact__links a:hover {
        transform: translateY(5px);
        transition: transform 0.3s ease;
    }
    

Implementing these changes should help you achieve the desired effects. If you encounter any issues or need further clarification, feel free to ask! Additionally, providing snippets of your HTML and CSS code related to these specific elements would allow for more precise guidance.

Alright I finally finished my project! I thinks it looks pretty good and accurate to the original one ( https://codepen.io/GhadyKeyrouz/pen/dyreBPb ), There were some tricky parts but I joined a discord server that helps people to code and they helped me out a lot and explained to me things I never knew which are very useful. Now how can I train myself more? I want to be able to be consistent and I wanna practice more, what sites should I try and code that are a little noob friendly but still looks good. Thank you for the help!

If you want to practice more, you can do frontend mentor

Congratulations on completing your project! It looks great, and it’s wonderful to hear that you sought help and learned new things along the way. To continue improving your skills and staying consistent, here are some suggestions:

  1. CodePen Challenges: CodePen regularly hosts challenges and competitions that provide opportunities to practice coding and showcase your skills. Participating in these challenges can help you explore new techniques and improve your abilities in a supportive community.

  2. FreeCodeCamp: FreeCodeCamp offers a structured curriculum with interactive lessons and projects covering HTML, CSS, JavaScript, and more. It’s beginner-friendly, and you can earn certifications as you progress through the curriculum.

  3. LeetCode: If you’re interested in improving your problem-solving skills and algorithmic thinking, LeetCode offers a wide range of coding challenges in various difficulty levels. It’s a great way to practice coding and prepare for technical interviews.

  4. Frontend Mentor: Frontend Mentor provides realistic design challenges with complete style guides and assets. It’s a fantastic way to practice building real-world projects while honing your HTML, CSS, and JavaScript skills. Plus, you can compare your solutions with others in the community for feedback and improvement.

  5. GitHub Projects: Explore open-source projects on GitHub and contribute to them. You can start with simple issues labeled as “good first issue” to get familiar with the workflow and contribute code to real-world projects.

  6. Personal Projects: Think of projects that interest you or solve problems you encounter in your daily life. Building your own projects allows you to apply what you’ve learned and experiment with new technologies and techniques.

Remember to set aside time regularly for practice and learning, and don’t hesitate to seek help or collaborate with others in online communities. Consistency and persistence are key to becoming a proficient coder. Keep up the great work, and happy coding!