Tribute Page : Narendra Modi

Code Feedback
1

https://codepen.io/shwetapatel3591/full/wbybKR

Hello everyone, I need your reviews for my first responsive project.

7 Likes
2

Nice work
i like the format

3

Thank you so much Francisco for your feedback!

4

@shwetapatel3591
Very good job on the design, color selection, and layout! Even the mobile version is looking good. There is almost nothing for you to improve. I did notice a few changes you can make.

  1. I recommend removing the inline styling and only putting the CSS into your style.css file.
<ul style="list-style-type:square;">
  1. ul tags have padding-left by default. I usually remove it and add padding to the parent container. I played with your project since it is in Codepen. I added this code
ul {
  padding: 0;
}

#tribute-info {
  padding: 0 1.5rem;
}

li {
  text-align: justify;
}

I took the padding-left off the li elements so I could add it to both sides of the parent div to make the li elements even in mobile view. I also added text-align: justify to space out the text within the li tags. What do you think? Here is a screenshot:

modi
modi341×987 60.4 KB

Great job on your project!

1 Like
5

Thank you so much brandon for your guideline and suggestions. I am surely implement it.

6

Nice work :smiley:. Modi rocks :+1:

7

Great work and very interesting person!

8

I like your tribute page, Shweta. It looks clean and organized, and the image you chose provides a strong visual focal point.

I just finished my tribute page as well (about Edith Wharton) so it was really interesting for me to look over your HTML and CSS with the syntax/meanings fresh in my mind.

As a beginner myself, I don’t have any recommendation for you but I will continue checking your progress as we work through the rest of the projects. Good luck :slight_smile:

1 Like
9

Thank you Kunal for your feedback.

10

Thank you TazExprez for your feedback.

11

Thank you so much for your comments. It’s my pleasure if my code help to someone. I appreciate it.

12

I like it, nice design! There’s a typo in the CSS though, it should be margin, not marign. CodePen automatically highlights it red. Thanks to the viewport tag, it looks good on mobile too.

DeepinScreenshot_select-area_20190531080838
DeepinScreenshot_select-area_20190531080838349×690 98.6 KB

13

Welcome to the forum @shwetapatel3591. This is a good looking page. A couple of things;

  • codepen provides you with validators for HTML, CSS and JS. Click on the arrow in the upper right and then click on the respective ‘Analyze’ link.
    There’s a minor issue in your ul declaration where duplicate the color property.
    In HTML, alt is not valid for an anchor link. So this;

<a id="tribute-link" href="https://en.wikipedia.org/wiki/Narendra_Modi" alt="Narendra Modi biography information" target="_blank"> Please Click Here for his Wikipedia</a>

should be;
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Narendra_Modi" target="_blank"> Please Click Here for his Wikipedia</a>

1 Like
14

@Roma Thank you so much for giving me a guideline for ‘Analyze link’. It is helpful for clear the errors. I just finished that correction.

1 Like
15

@Steffan153 Thank you for the feedback. I did that correction. And viewport tag is such a great suggestion so I applied it in the tribute page too.

1 Like
16

The page has good design…great job.

17

@Daniel1 Thank you so much for your feedback.

18

nice work …
add 2019 win as well …:india::india:

19

@ijhar8 Thank you for your feedback. I will definitely add it.

22

wow, @shwetapatel3591!
that is really nice!
the only thing that is a bit bothering is that there is a little white crack at the top and bottom of your page. If you can get rid of them, please do.