A Tribute to the one and only Quincy Larson - Please provide your suggestions and feedback :)

Code Feedback
1

Hey everyone!

I just finished myTribute Page, dedicated to the amazing founder of FCC!

It was a super fun first project that kept me up way past midnight! I took some inspiration from @Vinei for the footer and learned some great stuff through the process. (Thank-you Vinicius) Although I cleared all the tests Phew I could see issues while inspecting responsiveness on chrome.

I’d really appreciate any comments and feedback on how I could have done this better or how I can improve going forward. :grinning:

Excited for Project number 2 - hopefully i get a chance to do it tomorrow!

Thanks in advance!

2

Its good for the first project. :wink:,

I see you have set margin: -40px for the #main, did you try resizing the browser and observe it in smaller screens.?? The contents disappears above. I understand, you did that to get a background of black to the layout, but it’s not the right way, you can apply the background: #000 to the body { } and remove the margin:-40px

Also when you use max-width, use px values, when you use % values, for example, max-width:20% to image means, at smaller screens it occupies only 20% of the screen, which looks very small, it might be good in larger screens, i would recommend you to apply max-width of 200px to the image and try resizing the browser, similarly for the #tribute-info content, give it a max-width of 400px and observe when you resize the browser.

max-width: value ( Scale only upto the value not more than that )
min-width: value ( Scale from the value mentioned )

These changes would make it better, Good Luck.! :slight_smile:

1 Like
3

-Thanks for pointing that out. I’ve removed the margin and added a background to the body as you recommended.
-That makes much more sense as to why the < ul > and the image seemed so squished and small.

Thank you for your time and detailed response. I appreciate the time taken to do so.

4

The timeline needs to be wider.

#tribute-info{
  width: 75%; /* added  */
}
@media only screen and (max-width: 600px) {
  #tribute-info {
    width: 100%;
  }
}

More responsive.

5

Try adding the below code snippet to the top of your css code. It helps avoid the annoying white space that shows up around footers and headers. You may have to switch around your css code a bit to adjust for some minor changes.

* {
  margin: 0;
  padding: 0;
}

Hope this helps you, and welcome to freeCodeCamp. :slightly_smiling_face:

1 Like
6

The <u> tag is not really meant to be used for underlining text, you should use a more semantically correct element and give it text-decoration: underline or give it a border-bottom

The H3 inside your UL is not valid (Element h3 not allowed as child of element ul in this context.).

Your image is very big (2MB). You should use JPEG for this type of image (unless you need an alpha channel/transparency, or have some other good reason to use a png).

Anyway good job.

1 Like
7

Thank you! I need to work on responsiveness I haven’t yet gotten the hang of it. :frowning:
But this should fix it for now!

8

I’ll try that right away. Thanks Aditya
Haha thank you I’m glad to be a part of The ‘Inner Circle’

1 Like
9

-wow I would have probably never known the actual use of the tag . That’s good to know. However this question now comes to mind - how do I decorate one particular word within a sentence? Use a <p> ,tag give it a class, setdisplay:inline and then usetext-decoration or?
-thanks for introducing me to the Mozilla dev page! will be looking into it often for rules etc
-since I am using an external link what would be the best way to go about something like this? Ofcourse I can download the image convert it to JPEG somewhere online and then put it up again - however I don’t have a space to host it. How can I make the change in such a. Case? (This will also help for future reference)

Thanks for your inputs thus far! Hope to get some answers to these questions

10

I would wrap the word in a span and give it a class.

<p>This <span class="special-word-style">word</span> is special</p>

.special-word-style {
  ....your css style
}

There are many free image hosts you can use, as long as they don’t block codepen usage you should be fine. I wouldn’t sweat it too much in this case, my comment is more educational. It’s just important to be mindful of your assets.

On a side note. I personally don’t like codepen for these projects. I use a local setup and push to github, then use netlify for the deploy. It’s pretty sweet, anytime you push a new commit to github the netlify deploy updates with the changes. Using that setup also teaches you about git, and reinforces a normal workflow used by the industry. I know it might seem like overkill, but i like it. Git can also be quite handy once you get the hang of it. If you want to try something out you just make a branch, if you like it you merge, if not you just go back to your master branch.

2 Likes
11

There are many free image hosts you can use, as long as they don’t block codepen usage you should be fine. I wouldn’t sweat it too much in this case, my comment is more educational. It’s just important to be mindful of your assets.

I get it maybe like imgur or something

I use a local setup and push to github, then use netlify for the deploy.

Thanks for tip! I agree that would be a great simulation of an actual work environment. I dont have much know-how on Github yet - maybe its time I start looking into it and learn more about it!

12

Yes, but i believe imgur is actually one of the hosts that have issues with codepen, i might be wrong but i seem to remember it being the case.

Learning about git and github is definitely something you can’t avoid. Just make sure learning about it now doesn’t tax your cognitive load so much that it takes away from learning about the basic of web development first. Fit it in if you can, but don’t make it take your “eyes off the ball” if you know what I’m saying.

13

Yup I get what you mean.
Keeping that in mind I think I’ll work on improving web design first - while focusing on creating cleaner CSS code and following style guides/best practices. Especially since I’m having a slightly bumpy ride on making things responsive
Learning GitHub a bit further in the journey might make more sense.