Personal Portfolio Webpage: Made the hard way!

Code Feedback
1

Hello, everyone! :smile: :wave:

I’m so happy to announce that finally, after almost two weeks of working on my portfolio, I’ve finished it, and I got my certificate :tada:

Links:

This was my first time building something big. There were many important things I wish I knew before starting so my workflow was not a smooth experience at all. But it let me learn the hard way as I had to search countless times for things I’m not familiar with. The valuable lessons I learned were too much to retain them all in my head and they all seemed to be jumbled. So, I decided to write them down and share them on my social media accounts and in my other post that’s under the HTML & CSS category. Anyway, I posted here too because I want to get some feedback on my portfolio. I always appreciate them because they help me learn more. Thank you so much! :blush:

6 Likes
2

Looking at the first CP link…

I like it, it’s well designed. I’m not a big fan of CSS tricks, especially on portfolio pages, but you keep it within good taste and it doesn’t distract from the information, so it works for me.

Looking at the code…

As I mentioned in another thread, I think your CSS code is over commented. I think that most of that could be removed by using better names. Remember that you can break apart classes to make them more manageable and assign multiple classes.

This:

    /* font sizes, style, weight  */
        h1 {
            font-size: 2.3rem;
            font-weight: 800;
            font-style: italic;
        }

What does that comment tell me that I can’t tell from the code?

This:

        /* yellow waves intro */
            .waves-section-intro h2 {
                font-size: 1.4rem;
            }
            .waves-section-intro h1 {
                font-size: 2.8rem;
            }

Do you have different color waves? What information can I get from that that I can’t get from the class name?

You have whole paragraphs of comments. I think almost all of these could be removed.

The HTML comments make more sense to me. You are dealing with large sections of HTML and sectioning them off to be easier to digest. In the real world, you’d end up putting those in their own files. Really, those are the only comments I think you should have in your CSS.

In the HTML pane, in the upper right corner is a pull down menu. If you select Analyze HTML, you can get some basic error checking. It points out that you have a duplicate ID. I like this one too (but there will be a few errors at the top because it is from CP).

This:

        <footer class="footer">
            <div class="footer-info">
                <h3>Thank you for visiting!</h3>
                <p>Made with &#128151; by &copy; Jewel Keith <br> All rights reserved</p>
            </div>
        </footer>

Do you need that div? Could you just apply styling to the footer?

Scanning through the rest of the code, nothing jumps out at me as problematic. I like that your code is well organized and formatted.

Good job. Keep in mind that I’m picky and opinionated.

1 Like
3

I’m so happy you liked it, Sir Kevin. I tried my best to add designs without sacrificing the visitor’s experience. So, I’m glad that it actually worked out.

Oh, my comments sounded stupid and funny. I’m sorry, I’ll definitely work on that. I’ll minimize my comments and create helpful ones. I just got so overwhelmed with the long lines of code that it made me sprinkle comments all over my whole CSS. I’ll try not to do this again:
comments to my CSS (1)

I added hundreds of comments because I was trying to explain some of the code I found complicated. I thought they’d be useful to others who want to apply them too in their projects. But yes, I’ll try my best to avoid the same mistake.

I didn’t notice that. Maybe I mistakenly created a duplicate because I was already feeling too stressed and excited. Stressed because I had problems editing my code to pass the checker. Excited because finally after a long period, I was going to get the certificate. But, thank you for pointing it out. I just recently changed it :slight_smile:

One of my goals was to create an organized code. I even made a table of contents for it. So, I feel happy someone found it “well organized and formatted”

You really made my day, Sir Kevin. Your words motivate me to learn more. Thank you so much for the valuable feedback!

4

Oh, my comments sounded stupid and funny. I’m sorry, I’ll definitely work on that.

That is too harsh. I just mean that they were not really necessary.

I added hundreds of comments because I was trying to explain some of the code I found complicated.

If we’re thinking like coders, the purpose of comments is to communicate necessary information to the next coder to read it (which may be you - you will forget things over time) - things that are not obvious from the code.

And sometimes while working I’ll add in comments to mark sections or as placeholders to remember of "todo"s. But those get removed before I’m done.

1 Like
5

No, I honestly laughed when I realized my comments were no good and they didn’t add value because you pointed them out. I found my mistakes funny. I’m thinking that my brain was floating from working way too much on my project :laughing:

I took notes. I’ll seriously try my best to apply all of your suggestions :smile: Thank you :heart:

1 Like
6

Nice design, mobile version needs a bit of work as the .new-yellow-waves are creating a margin on the right, and the navbar should collapse into a hamburger menu but it just vanishes, couple of other layout issues as well on mobile

Good job

1 Like
7

Oh, so that was the cause. Thank you for pointing that out, Sir Mike :smiley:

Honestly, I still didn’t understand fully how the off-canvas menu worked when I first used it, so I was having a hard time thinking about how can I get it to be a top navbar. So I just set it to display none when it goes over a large screen and created another navigation menu. But when I was about to be finished, I tried to see how it really works. I didn’t edit my code again because it seems already intact, and it’ll probably take time. I think I’ve invested too much time on my project already and I really want to go over JS.

But, thank you for telling me! I promise to fix it at another time. Like when I’m done with the JS projects because I’ll be adding them to my portfolio. Probably, I’ll be hugely modifying my portfolio after learning JS. I took notes of all your valuable suggestions, so I won’t forget them the next time I’ll do a major update.

I’m glad there are nice amazing cool people that took the time and effort to review my work. I very much appreciate your feedback, Sir Mike! :smile:

1 Like
8

congratulations :clap: :clap: :clap: :clap:

9

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