Tribute Page for Zdzisław Beksiński!

Code Feedback
1

Hey all,

I’ve recently started seriously focusing on learning to code, with the hopes of a future career. I’ve being doing the HTML and CSS lessons and learning for a little over a week now, and just finished my first tribute page to an artist who has produced incredible work! I really enjoyed making it, but I’d also enjoy any advice or thoughts anyone has. I’m not sure if it looks good on mobile at all, so please do poke it from that end.

Thanks in advance <3

https://codepen.io/BrennasBrenna/full/QWjZaPz

2

oh, I really enjoyed it :heart_eyes:

3

Thanks! I think I should have probably made the margins on some of the paragraphs a little wider to make them more compact, but that’s all part of learning and correcting mistakes.

4
  • 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 <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you should address.
    • Remember, an id must be unique within the document.
  • Review the lesson about giving meaningful text to links.
5

Gotcha. I’m assuming that I should probably use classes instead of id’s for the more general, repeated things. A question though in regards to the use of img-div. It’s required as an id for one of the user tests, along with img-caption and the basic image id. I suppose it’s fine then for all the other figure and image elements to use different id’s or classes? I think that’s the reason I duplicated them; the test requirements made me think that I had to have them applied to the whole rather than just one.

6

Yes, you could do that. Another way would be for the first one;
<figure id="img-div" class="yourClassName">
Then for the other figure elements you have you can just assign the class attribute. Id est;
<figure class="yourClassName">

Edit: I incorrectly had a comma in there. It’s been removed.

7

Ah! That’s a good solution, thank you!

8

Okay, I’ve cleaned things up, the use of classes seems to have worked, even if I feel it made my CSS a bit spaghetti like! No errors according to the validator aside from the copypaste ones. This might sound very basic but, regarding accessibility, I’m having a bit of trouble thinking of how else to link it. Should I increase the amount of text the links cover? Or rephrase things entirely?

9

@Brena, you could probably reword it somehow so that “examples of the artwork of blah-blah” is a link to wikiart and “info on his life” could be the link to wikipedia.
My main purpose of pointing it out is because as a new creator of pages you should be aware that not everyone views a page the same way. If using a screenreader not every word is read so all that particular user would hear is “wikiart” or “wikipedia” which isn’t very helpful.

10

Gotcha, thank you you the help!

11

Hi, i like you page!!!

We are in this path together so good look!