Tribute Page Feedback ? Mr Jinnah

Code Feedback
1

So, Yeah finally I completed the RWD first Project. but I feel like I may not have used best practices what’s so ever so your feedback is very important…
Tribute Page

2

Congrats on finally completing this project! I will take a moment to evaluate it for you.

I noticed that it does not pass this FCC Test

  1. The element should be centered within its parent element.

To pass the test, simply add display: block; to your #image selector in your CSS

#image {
  max-width: 100%;
  display: block; }

A lot of work could be done in the header area of your page to make your HTML more readable and open up your options for styling your heading. It is apparent what your intent is with the image and how you want it to behave. You have done well to achieve the desired result, however a better approach could be to take the background-image property and set it to url('https://i.dawn.com/primary/2017/12/5a3d0b4dede45.jpg') alongside of a background-attachment property set to fixed. By doing this you could remove the <img> from your html all together and use CSS to achieve the exact same result. If you did this, you would need to change the structure of your HTML a little bit, but while you were at it, you could rework your heading. I suggest moving your <h1> above your <figcaption> as it should read to a human. You can use CSS to style your page however you want and if you make the proposed changes I suggest above, you might find it a lot easier to style this text to your liking. Since you used a <span> to pull out the M and a <br> to add a visual line break to the HTML, I assuming you are not aware of CSS pseudo classes. You should look them up to achieve this same result through the use of CSS. To select the first character of a selector, instead of

h1 span {
  color: green;
  font-style: italic;
  font-size: 9vw;
}

do

h1:first-of-type {
  color: green;
  font-style: italic;
  font-size: 9vw;}

You would need to remove the <span> surrounding your M within your <h1> element for this to work.
You should work on ways to improve your HTML by using tags like <header>, <main>, <footer>, <section>, and using id attributes less frequently. There are times when id should be used, but typically this would be on a <form> or an <input>, and sometimes on an <img>, or even <section> tags. Instead of declaring a <div> with an id of 'main', consider creating a <main> tag here instead. You could utilize <sections> and a <footer> on your page easily as well.

Take time to review other people’s projects and try to learn something new while practicing best practices at every opportunity.

I hope this helps point you in the right direction. Remember your HTML should be straightforward and accurately and efficiently describe the content within a web page.

3

Your page looks good @ARQSoft. Some things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/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 chevron 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).
    • (The one for HTML misses things which is why I recommend W3C)
  • Accessibility is about being accessible to all users. Review the giving meaningful text to links lesson. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia” is not accessible
  • Do not use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?
1 Like
4

Thanks, for this detailed note . I am aware of pseudo class but you know when we are learning things we can’t understand when to use something anyways I enjoyed your answer you pointed out so many bad habits I should get rid of thanks :+1:.
Also about the FCC test it’s weird I can remember it passed all the tests I already have
Max-width property in the image selector but no idea what happened with your end… Or maybe idk anyways thanks

5

Thanks @Roma so you are suggesting I should have used em or rem for my font-sizes ??

6

je pense que vous ne devez pas centrer tout le texte . A part cela tout es nickel

7

Well, center aligned looks way more appealing to me that’s why I used that anyways thanks for your suggestion…

8

It may look more “cool” but it is certainly not easy to read. I’d leave such a page immediately and look for other options where is information structured better.

1 Like
9

So, what are you suggestions for improving the page…

Like should I change the colours or increase the font size etc…

10

Yes @ARQSoft, that would make it easier for those that need to resize in order to read the page.

1 Like
11

Well I will keep your suggestion in my mind for the survey page… Thanks :+1:

12

I forked your pen and did super quick changes… just to show you how it looks.
Updated tribute page

13

@ARQSoft, remember that these are suggestions to how to change the styling of your page. You can incorporate them if you want, you don’t have to though.
Not everyone is good at styling so you may get suggestions from others as to how they think you can make your page better. You can make the suggested changes or not. As you learn more you can always come back to your page(s) and change them if you want or make yet another page.

Coding/syntax errors you should take care of. Styling changes are up to you. You can spend a lot of time on a page tweaking it to meet all the suggestions people give you. :slight_smile:

2 Likes
14

As Roma says not everybody is good at styling and I am not one of them :smiley: I can only suggest what would make it more pleasant for my eye.

15

Well, you are right coding and syntax I should focus on more. But you know I always try to achieve perfection because I believe in trying to achieve perfection you can achieve excellence.
So, in order to achieve excellence you have to listen to every person opinion… Also I have noticed no matter how bad person comment is or how bad they are styling by themselves you always get to learn something…

1 Like
16

No worries I am color blind :joy: so not a big deal I guess but I’ll keep in mind to focus on choosing some other kind of colour schemes … Or typography

17

I played with your references a bit and check the first reference on your updated tribute page. Not bad, eh?

18

Please don’t misunderstand me. I’m not saying to ignore comments on styling that others give. I’m saying you don’t have to do every single one…or any.
I’ve seen newcomers ask for feedback and then fall into the rabbit hole trying to incorporate every style comment that is given.

Realize that each of the projects builds on the previous. You’ll do a little more planning, research, diagramming and coding to complete. You’ll get stronger as you move on.

19

I totally agree ( as a beginner).
Also - when giving feedback - it is important to suggest how to make changes (code snippets, references to websites where this is described in details etc.).
I think quite often our (beginners) pages looks not exactly how we would like them to look - but how we are able to do them with our present skills.
Its a learning path…
But to learn any feedback is important :slight_smile:

1 Like
20

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.