Here’s my try on the first project of ‘Responsive Web Design Principle’, please do check it out and give your valuable comments and advice. Thank You
@randombit. Some things to change.
- Make all Center.
- Change the color of the link in Footer.
- Change the font of the Page Title and “Some Other Facts”.
- Add Copyright Like Made By Randombit.
- In Bulled List the Last List ( Education ) the years are bold but not in the First list’s year ( Awards) Make them uniform.
- Make the Image Caption grey, to know users that it is a caption.
- Give a Title to the history Paragraph.
Please These Changes.
Your page looks good @randombit. Some things to revisit;
- Run your HTML code through the W3C validator.
- There is an HTML coding errors you should be aware of and address.
- Since copy/paste from codepen you can ignore the first warning and first two errors.
- Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.
- If you want two paragraphs then use two paragraph elements.
- Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
- Web Accessibility in Mind has a more thorough explanation.
- “click here” is not accessible
- Also, rethink color choices. A blue link on that dark brown background is hard to see.
- You may have noticed that although you use the
strongtag the text does not show as such. This is because when you chose your fonts you only chose one weight. What you want is to choose the normal font weight (400) and the bold font weight (700) so browsers can render properly.
I have tried to apply the changes and modifications suggest by @codely and @Roma. Please spare some time to take a look again and let me know what more should I improve. Thank you for your previous suggestions. It is always good to have some feedback from the community.
The responsiveness is very good. It handles both changes in view port width and text size nicely. I have a few suggestions on other issues:
- Limit the width of the main content on the page. Currently it will expand as far as I can widen my browser and I can widen my browser very far I would use
emvalues to put a max-width on it.
- The font color of the caption does not quite have enough contrast with the background color. You can use https://webaim.org/resources/contrastchecker/ to make sure your color combinations are accessible.
Thank You @bbsmooth for the suggestions, I will surely apply these changes.
Make the Some Other Facts section Center.
@codely The heading or the whole section?
Whole. But for list use Margin to make it center and keep up the text align as left.
Nice job cleaning things up @randombit. Something to revisit;
I mentioned this in my earlier post. Please read the links.
Overall this is very nice. I’m going to be real nit-picky here:
- I still think the content is too wide. You have it set at a max-width of 80em which I think is too much. If you google it I think you’ll find that most people suggest a max-width between 40-50em is best. This is an accessibility issue really. Longer lines of text (more characters per line) can be harder to read for some people.
- When I manually increase the text size the image starts to creep to the left instead of staying centered. This is purely an aesthetic issue but if you are like me you want your page to be perfect
- Semantically, I think some people might take issue with what you have in the
<header>. Headers are traditionally used for just the stuff you would normally find at the top of every page (e.g. logos, navigation links, search bars, etc…). I think you might have pushed it too far by having an entire
Didn’t think of all these at first will clearly do the modifications, Thank You for spending time on my project @bbsmooth
I didn’t understand it at first, but now I read the whole documentation and will surely modify the needed part. Thank You for spending time on my project @Roma