I’m excited to have finished my first project. I started doing the #100 days of coding 3 weeks ago, but I have never coded before, so I’m here at FCC doing these tutorials.
Once I arrived at the first tribute project I felt really discouraged because I didn’t understand enough and I actually ended up falling off and quitting. One week later I started it up again and re-did the whole Responsive web design tutorial. I really took my time to try and understand a lot of the features and had a great time putting this together. It may not be much, but it’s my first creation! Please give me some constructive feedback I can use to make it better or fix any sloppy code – which is probably all of it lol
Hi @Jaypad07, great job I was also falling off and quitting a few times. I’ve just started after a 12-month break White font on a black background have to big contrast so it’s difficult to read, maybe gray color will be better. Anyway, it looks good. Go to the next project and remember that it will never ever be perfect.
Congratulations! It’s easy to get frustrated and give up, but you’re showing your dedication. I think you should be proud of your work (especially for a first piece!). Here’s some Feedback
Your code doesn't strike me as sloppy, but then again, your CSS is rather brief so I can't tell if there was any thought behind the way your organized it or you typed out things as you thought about them. I don't have an answer for how to organize (especially when the code gets really long and complicated) because every single person I've asked has given me a different answer. I do, however, like that it's nicely labeled with the comments. Makes it very easy to read and refer back to.
I don't know if you were trying to make the site fully responsive (I don't see any media-queries, but the tribute page also didn't specify that you had to use them yet and I admit they're a bit daunting at first so maybe you were focusing on desktop-only site), but as it is it really only is readable from the laptop/desktop. When I change my browser width to mimic smaller devices your columns don't have enough space.
Your page looks very well researched. You have a lot of information, but you've broken int into chunks and made it easy to navigate. However, if you include navigation to go to your sections, you should also include a "go to top" and "next section" and "previous section" links to make the page more accessible. It would also help if you didn't use the same styling for visited and unvisited links as that also improves navigation because I can't tell what I've clicked on already.
In your second section, the white text on a black background looks like it's all in bold (but I couldn't find a CSS rule that set it that way, did I miss something?). I also know there's an optical illusion where light shapes on a dark background (especially when there's a strong contrast between them) look thicker and bigger than the same shapes when it's a dark shape on a light background. This is especially important with type because you want it to be readable. It is possible to do light type on dark backgrounds, but sometimes it takes nudging the colors around to decrease contrast and get them looking right.
Thanks for the feedback! @a-sep I’ll definitely look into changing the background to silver or gray. lol I can end up being a perfectionist at times and that definitely delays me. GL to you, hope you are successful and stay on track this time around.
Thanks a lot @azaun! I appreciate the feedback. Not harsh at all, your feedback is very constructive and I will definitely add your suggestions.
I was actually learning as I went. While coding I would think of something and then stop to search Google/Youtube or just experiment on how to do something. I don’t think I know enough to organize anything with great structure. What is your first step in organizing something? Or the most common you’ve heard? I’ll make sure to continue commenting on my code.
Yeah, I was just focusing on the desktop-only site. I wanted to do media-queries but I just don’t have a full grasp on them yet. I felt I was taking too long to finish this project and it would be best to move on to the next. Once I finish the next project I’ll come back and try to make this Tribute page for different devices as well. Would I be able to fix the columns any other way or is it something media queries can only fix?
Great suggestion! I will definitely add the extra links and change the styling for visited and unvisited links. Although I’m not quite sure how to do that, I’ll look it up.
I couldn’t figure out why they seemed like they were bold either. I just came to the conclusion that list items were bold? Are they not? If not I think they’re getting the boldness from the h3 element somehow? Maybe since they’re all in the same container? I have no idea… maybe it is just an optical illusion that you were talking about lol. I have changed the white to be a little closer to a gray. Let me know what you guys think. This one goes out to @a-sep too.
Thanks again. I really appreciate all the feedback you gave me.
I was also falling off and quitting a few times. I’ve just started after a 12-month break 
White font on a black background have to big contrast so it’s difficult to read, maybe gray color will be better. Anyway, it looks good. Go to the next project and remember that it will never ever be perfect.