Quite exhausted but happy! (Personal Portfolio challenge — done)

moonblade · January 5, 2021, 5:37pm

I’m just going to leave this here: https://moon-blade.github.io/fcc-personal-portfolio/

Turned out pretty plain, nothing really exciting about this, but it should be quite responsive.

Thanks to this project, now I’m definitely more confident with using CSS grid.

Waiting for your feedback.

jwilkins.oboe · January 5, 2021, 5:42pm

Hi @moonblade!

Congrats on completing the responsive design section.

If you are interested in receiving feedback on your project will are going to need to see the project link.

moonblade · January 5, 2021, 5:44pm

Oh, I’m sorry, I didn’t mean to leave a link to the certification. Edited the original post.

jwilkins.oboe · January 5, 2021, 5:55pm

I think your page looks good.

You might consider adding a smooth scroll to the page.

html {
  scroll-behavior: smooth;
}

Also for the contact section at the bottom, I don’t think you need to add the text “using links below”. You have the icons and text link so people will know to click on those links anyway.

Keep up the good work.

kevinSmith · January 5, 2021, 5:55pm

Cool, good work. If you provide a link to the code we could review that if you want.

moonblade · January 5, 2021, 6:03pm

github.com

moon-blade/fcc-personal-portfolio/blob/main/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://use.fontawesome.com/ce62cfca1f.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>moonblade's Portfolio</title>
    <link rel="stylesheet" href="./style.css" />
</head>

<body>
    <!-- navigation -->
    <nav id="navbar">
        <ul 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>

This file has been truncated. show original

github.com

moon-blade/fcc-personal-portfolio/blob/main/style.css

/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    /* color variables */
    --lightBlueAccent: #007ae6;
    --darkBlue: rgb(33, 20, 154);
    --lighterBlue: rgb(0, 80, 205);
}
/* general */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 10px;
}
body {
    color: #fff;
    font-family: 'Montserrat', sans-serif;

This file has been truncated. show original

This should do the job, I think.

kevinSmith · January 5, 2021, 6:11pm

Cool, a quick scan over it and I don’t see anything major.

The only thing that caught my eye was a little over-commenting:

    <!-- projects section -->
    <section id="projects">

The second line tells me all the information that is in the comment - I don’t think comments like that don’t add anything to the code other than clutter. I know they tell you to comment, comment, comment, but I find in the real world it’s more like “only comment if it’s not obvious”.

moonblade · January 5, 2021, 6:15pm

I add such comments to my HTML and CSS because it helps me improve my workflow in a way that I find necessary sections of the code quicker as I scroll up and down.

But yeah, you are right, I’ve gotta get used to finding necessary code by looking at the code itself, not the comments.

system · July 7, 2021, 6:15am

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.