Tribute Page Feedback - CodePen Home VS: Tribute Page

Code Feedback
1

Hello!
Created his first work Tribute Page https://codepen.io/wolfnt/pen/RwRzEpM
I would like to know your opinion - what is wrong, what to change, what to improve.

Thanks in advance!

2

you can add the links in the head tags in “Stuff for the head” in the pen settings

The background is weird, scrolling a bit faster than normal makes me nauseus… also, I’m not sure black on brown is accessible, some parts are hard to read

But, nice layout, responsive (I’m looking the page on mobile), and passes all tests - good job!

3

Welcome to the forums @wolfnt. Your page looks good. Some things to revisit;

  • As mentioned, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.

    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • either link to the font (head element in HTML) or import it (CSS) but you don’t have to do both
    • Side note in case you want to know the difference, for 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.

  • Run your HTML code through the W3C validator.

    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.

  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.

    • The one for CSS is good. Use it and address the issue(s). (Run it until it finds no more issues)
    • (The one for HTML misses things which is why I recommend W3C)

  • In addition to being used incorrectly on your page, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.

  • There are two instances of your page in the HTML section

4

Roma Thank you for pointing out the errors, I will correct them as soon as possible.
I will definitely study the thoroughly recommended material. Thanks again!

5

All recommendations and corrections have been implemented. The code is fully verified in the W3 validator - no errors, except for the absence of! DOCTYPE were found. ĐĄSS is also checked and there are no errors.
I am thinking about changing the background and changing the font color accordingly.

6

@wolfnt, I see some things implemented but not all. For instance,

  • You still link and @import the font. Choose one or the other.
  • There is still a spelling error/typo in CSS. Run it again.
  • “wikipedia entry” is still not accessible. Please reference the aforementioned links.

You can change your background and fonts if you’d like. If you do it in the same pen you don’t have to resubmit. Just ensure that all tests still pass and your page is still responsive after making any changes.

7

@Roma Removed the font from CSS;
I updated the link, checked it - everything opens in a new window;
But I never found a spelling error in CSS. W3 found no errors.

8

Hi @wolfnt,

Clicking the down arrow in the upper right of the CSS section and selecting Analyze CSS will show you this on line 25;
@media (max-widht: 460px) {

Please read the provided links about accessibility. Briefly, taken out of context, “wikipedia entry” doesn’t make sense.

9

@Roma Thank you, I saw the error - I fixed it. As for the link - then is it possible to give a link to another resource?

10

Please, read the links provided about accessibility. The link should make sense when taken out of context. For someone using a screen reader, “wikipedia entry” will not make sense.

11

@Roma Got it. I will definitely read and correct.
And another question. Is it possible to use your own images and fonts in CodePen, how to design links in this case, because a separate folder with files is not provided, as in offline code.
If the use of external sources of fonts and images is mandatory - the question is removed :slight_smile:

12

In the free version of codepen, no.
For images, you can search and find a free image hosting website and then use that link as the source for your images.
For fonts, there’s a big selection at Google fonts that you can either link to (head element in HTML) or import (CSS).

13

Got it. Thanks. I thought so. :+1: :slightly_smiling_face:

1 Like