Feedback on Tribute page for Terry Pratchett

Code Feedback
1

Hi there Campers,

I’ve enjoyed doing this tribute to one of my favourite authors and would really appreciate some feedback please.

I have probably spent much more time on this then was needed but found the experience of actually planning the project to be useful and hopefully will be helpful in a real world environment.:crossed_fingers:

This is a rough guide as to how I went about this project:

1 – Gathered the content I wanted to use and organised it into sections

2 – Sketched the design on paper first (I designed the “mobile” view first and then expanded it for larger screen-sizes)

3 – Wrote the HTML (having the sketch on paper helped in regards to laying out containers for content)

4 – Applied the style with CSS (did styles for “large” screens first and then added media queries for the “mobile” screen display). I used a mixture of CSS grid, flexbox and positioning to get a feel of how they work together and can safely say I am a fan of flexbox now.

5 – Tested responsiveness on monitor, laptop, tablet and mobile screen types and different browsers (Chrome, Firefox and Edge)

6 – Bug fixing , screaming in frustration, and retesting

For the design I tried to go for a clean and simple look. I looked at quite a few other tribute projects on the forum and for some (not all but some) felt there was a lot of information overload going on with massive sections of text so I tried not to go overboard with the content and display it in a way more enticing to the viewer to actually read. Well that’s what I am telling myself anyway :stuck_out_tongue:

Some points in particular I would like feedback on are:

  •      Comments in code (not enough or too much or just commenting on the wrong sections)?

  •      Correct semantic tags used or can I improve anywhere?

  •      Is there anything accessibility or responsiveness related I didn’t do or did incorrectly?

The resources I mainly used for this was the FCC curriculum, W3Schools and MDN. Are there any other resources anyone would recommend?

Thanks for reading my loooong first post :smiley:

3 Likes
2

I’m impressed with how much CSS you dove into for your first project!!! Everything was responsive and easy to follow. Once you get into JS, I’m sure your projects will definitely improve exponentially!

3

Hi! Love the project except for one thing, the colors. Seems to be maybe to many of them. I would
try to find a over all theme of colors and stick to it. Most sites tend to go a neutral route with one or 2 accent colors. Not saying you have to but there is a reason that is the norm. One other quick thing, you have several divs all with the class “book” simply having one main div with that class is probably a good idea. A programmers goal is to write concise and clean code with as few duplicates as possible. Also the

 html{
  margin: 0;
  padding: 0; 
  background: linear-gradient(black,white);
  scroll-behavior: smooth;
}

should be in the body tag.
On the subject of clean code. One other reason to have a color scheme is because of the
huge amount of custom classes you have. All the article p tags could be in one class. Think
about if someone wanted to change a color, they would have to go through all these classes
to change all the colors. With over 600 lines of css there is probably some room for optimization
for a project this size.

All in all though looks great and is crammed full of good features.

4

Thanks so much @ymoua17 that has really been a confidence boost for me. :grin:

1 Like
5

Thanks @bmansk8, this is exactly the feedback I was hoping for and to be honest I focused more on the coding side than the design side and can see what you mean about the colour scheme.
This project was a great learning experience for the coding and styling but I am hoping for more advice on best practices and similar from here on this forum so if there is anything else I don’t seem to have grasped the concept of correctly please shout out to me (apart from the way I used CSS variables which looking back after I finished I now see how I have used them arseways and the potential they have for easy future maintenance - you definitely learn more from your mistakes than your successes eh!)

1 Like
6

I actually really like the colours, and I think they’re in keeping with the quirky nature of one of my favorite authors as well. I hadn’t read entirely through your initial post, but one of the first things I tend to do (after a very quick skim of the full page view) is jump straight to the code. If I can’t show your code to someone who ISN’T a developer, and they don’t understand what each bit does, then I feel the semantic bit of the page has failed.

That said, yours does not fail, even a little. I kind of wish there was a card or panel semantic tag, so you could get rid of some of those div tags, but given your constraints, I think you did remarkably well.

The page is very responsive, I tested on different browsers and sizes and it scaled pretty well.

All in all, if I were HR, I’d take you on. :wink:

7

I can see you put a lot of effort into it. Great job! I would choose a simpler color scheme though.
If you’re ever looking for a great color scheme try:
http://paletton.com/

8

I think it’s a nice project, just a bit busy from a consumer navigational & color standpoint.
Have you used contrastchecker dot com yet?

1 Like
9

Thank you oh so much for that feedback @snowmonkey, that has really made my day :blush:
To be honest, and you might laugh at this but originally to help me work out the layout I put a large colourful border around each of the sections and I kinda dug the look of it so I kept it that way :grin:

10

It really is in keeping with his quirky oddball style though. I find that designing tribute pages is not really about me at all – so a Dr. Seuss tribute page better have a Seussian color theme and feel!

11

Thanks for the feedback @darrenbutler and I’ll definitely play around on palletton.com

12

That’s a great tip about contrast checker, thanks for that @unique-monique

13

Welcome. I just got that tip too. It’s a useful one! :smile: