My First Tribute Page Feedback

Code Feedback
1

Hello, I am Devnarayan.R. I am 15-year old and I did my first project for Responsive Web Design Certification yesterday. It was a Tribute Page to the Indian Freedom Fighter Mahatma Gandhi who has inspired me a lot.


Here is the link to my project. I am just a beginner and please suggest improvements.
Plzz help me to improve.
2 Likes
2

Amazing! The code is perfectly fine!

The only improvements I would suggest would be design wise, but since you have just started and (I am assuming) this is one of your first if not the first website you have made, that is fine.

Do you want suggestions from design perspective or do you want to get into that yourself later?

3

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

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).

    • The test script should be included, with all tests passing, when you submit your projects.

  • Run your HTML code through the W3C validator.

    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There is an HTML coding error you should address.

  • Review the lesson about giving meaningful text to links.

  • There are lot of values for the font-family property. Some of which you don’t link to or import. It’s best to have one font with a default backup.

  • Maybe add some padding to the tribute info so that text doesn’t butt right up to the sides.

1 Like
4

I would love your suggestions. Even I am not satisfied with my design (honestly). Pls help me.

5

Ok, thanks. Will do accordingly.

6

sure, will get back to you tomorrow

7

Thanks a lot. :slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face:

8

Hey I am here, sorry got caught up with stuff…

Looking at project again…

9

Ok thanks for spending time with my project.

1 Like
10

Not a problem :slight_smile: I love helping people out, plus breaking down my thoughts to help someone out only improves my understanding of the subject.

I am taking some time off recreating your project with a new design, that’s why it is taking a bit longer to help you out…

1 Like
11

Oh that’s really sweet.

12

Hey…

So I will share with you a pdf file with the new design. I want you to try and explain how it is different and what is improved.

I will guide you through and give you information on design principles (if you are not sure just tell that, and I will help you figure it out).

Also, I used the same color you used as well chose the same image just to prove a simple point before I talk about how to choose better colours and a better image for a better visual appeal…

(Ignore the years on the timeline :stuck_out_tongue_winking_eye: )

1 Like
13

Oh it’s really better now.
You reduced the size of the box containing image. And you changed the font styles in many places. You also changed some colours also. You italicised many of my texts. It’s really good now.

Yes I would love your guidance. Please help me.

14

It would be nice if you explain how you brought these changes too.

15

3 main things I changed in your design is:

  1. Hierarchy
  2. Contrast
  3. White space

Hierarchy:
Any good design must be easy to read. For that Hierarchy is very important. It allows people go through the content easier.

In your case your font size was too big on many instances. I simply made 4 different sizes for text. The main header (Mahatma Gandhi), the sub headers (Who is Gandhi and other sub headers) the paragraphs themselves, and the sub titles (text below image and text below main header Mahatma Gandhi)

1 Like
16

It would be nice if you explain how you brought these changes too.

I used a tool called adobe xd

17

Contrast:
The color of the font you used had a very high contrast as compared to the background. That is, it was too dark. The hex code for your font color was #000 which is black. I used #333 which is slightly lighter gray

18

Oh that’s right. Can you suggest any tips solving this contrast related problems. I had a lot of trouble with the accessibility.

19

White Space:
This was the main problem with your design.

There was too much space between each piece of text. Notice how I decreased the amount of space between the main title (Mahatma Gandhi) and its subtitle (The warrior of peace).

Similarly between Who was Gandhi and its paragraph…

Also the space between 2 things that are about the same thing must be closer to each other vs things that have nothing to do with each other.

In your design the space between who was Gandhi and its paragraph was the same as the space between the end of that paragraph and the next title…

20

What trouble did you have exactly?

The main thing to keep in mind is that the contrast must be soft for the eyes. That is don’t use bright red text on completely white background. Make the brightness lesser. instead of #f00 use #f55 maybe…