I’ve recently finished taking up my first project here in FCC. It has been an exciting one so far. I liked that the project was pretty challenging for me, as a newbie in this field. I liked the way FCC isn’t spoon-feeding knowledge so as to help learners solve problems and understand things deeper. I think this is a really effective way to learn.
So as to my first project, the tribute page(https://codepen.io/ckrchanuu/pen/rNOgaJj). May anyone please help me gather improvements and criticisms. Thank you to all of you!
Well, I did checked it out. The page is not responsive enough. Such as in small phones such as Moto G and google pixel the lower part where text is written for the tribute goes out of the screen. So I would suggest it to work more on making it more responsive for different screen sizes. It works on tablets and iPads so you don’t need to put much effort into it. Use CSS media queries to make it more responsive. Apart from that, It looks pretty okay.
@Mr-Kumar-Abhishek I really appreciate an immediate response from you sir. If you may check. I updated it, I found having max-width instead of width on the background fixed it.
May you please give me any tips with regards to using media query on texts and images? What condition do you usually use (common max-width or any more viable)? Or in the future, do I need to input more conditional media query for the site to be responsive to more devices? I’m really confused with this.
max-width sets the maximum width of the element. Basically it provides a limit to width value of what maximum values it could render.
As for the overriding goes, max-width overrides width, but min-width overrides max-width.
I usually use rem values for adjusting sizes instead of px since its a relative value, relative to the font size of html element. The html font size then can be done with percentages or px under different media queries.
Previously developers used a lot of media queries since there were no relative units but as of now mostly you have to target a screen width less that 412px and screen width greater than that.
Some developers also follow mobile first approach as in they design the webpage for a small screen then scale up with media queries such as like this:
@media only screen and (min-width: 412px) {
/* design for larger screens */
}
Also, I would like to mention that now the web page is more responsive its still has a horizontal scroll bar on small screens which it shouldn’t have.
Usually you have to set the container elements which holds all the other elements or most of page’s element to width of 100% so that it should not go outside its 100% width.
I’ve taken into account the use of relativity when it comes to using units. I’ve changed px’s into % and vw as well. But I’m kind of confused as to how to get the right size I want esp on texts. I’ve just put vw basing its readability on a 17" screen. But when I access the site thru smaller screen dimensions, readability is poor.
#tribute-info
{
font-size: 1.5vw;}
I wanted to use 2vw here but if I try to use 2vw, the container element cant cover up the stretch of the text.
I also used your tip on using 100% on container elements. I think I already got it, thankfully!
I’ll train myself more on how I would insert media queries instead of shortcuts when using relative units. I still get confused but I hope to apply it on my next projects.
Lastly, I do really appreciate the time you give on these advice. I learned a lot on your tips. You really saved me as I felt bad and discouraged previously. But now, I am getting progress bec of you sir. Can’t thank you enough!
Specifically for font-sizes, you should stick to em or rem as it renders perfectly for all screens and even print media ( while printing). A detailed doc explaining use of various units are written here, you should read this. It’s a bit outdated, and doesn’t include the newer units but as rem and em are closely related, the former only relative to root html element font size while the latter only relative to the current element font size, they could be interchanged if the design was done in modular fashion.
Page looks good @ckrchanuu. Some things to revisit;
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to a font would go in the box labeled ‘Stuff for <head>’
Since copy/paste from codepen you can ignore the first warning and first two errors.
There are coding errors you should address.
Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
The one for HTML misses things which is why I recommend W3C
The one for CSS is good. Use it, there’s something to clean up.
Don’t use <br> to force spacing. Use margin and/or padding in CSS.
Thanks @Roma for this detailed help. I was really hoping for a lot of evaluation to improve my work.
I’ve updated the font links and already put it in the html settings. I actually didn’t know that before.
Checked the html code thru w3c and found that I had a preexisting style inline on the img element and deleted it because it was unnecessary. Rerun it and found no more errors if that’s what you have observed.
Also polished the errors you are referring to on css and html. Mind if you check if all is okay?
I’ve deleted unnecessary <br>, but if the space I need is within a paragraph, should I just use a simple <br> for a simple spacing for a paragraph or stick with using margins and/or padding? I encountered errors using it by having unresponsive spacings before and I’ve thought using it minimally is ok for texts/paragraphs.
Checked also web accessibility/ meaningful texts to links and just simplified the link. Also fixed the link as it was actually a private link. Now accessible as I’ve used a hosting site.
I would like to ask if the website responsiveness is good enough though?
Thanks again! I’ll be waiting for your updated eval on my work! Cheers!
There are two additional errors you should take care of.
Remember, an id must be unique within a document
There’s an alt attribute that’s not allowed on the anchor element
There are alternatives. Google something like “html br tag alternative”
I also made this quick pen that shows how you can do it without <br>. I only used your paragraph and only used the styling from id="tribute-info"
If someone is using a screen reader on your page, a link that says “curious kobe” doesn’t give them any information. That’s the point about accessibility.
Wow, didn’t expect another response from you sir. I’ll take everything and try to understand what you are pertaining to.
Oh yes, I didn’t thought of that. Instead of using id then, I should use class. But I actually can’t see any other id that is repeated. I’m slightly confused by the uniqueness you are telling.
Also, I checked and deleted then the alt attribute you are talking about.
Now I know, there are actually a lot. I didn’t have any idea about that before. I was experimenting and actually saw a basic html code for a poem so I just copied it. But then, if ever I am going to create other websites in the future (professionally if I can) what do you suggest to use? Or having to just avoid using <br> is the safest way to go then just use any other way via the CSS instead of HTML?
Lastly, about the accessibility. I actually couldn’t think of any other thing to put. I just wanted that if someone clicks that button, it will show the picture of my cat. Also, just experimented on using or creating a button instead of a plain phrase or sentence showing the accessibility. But all in all, I’ll always take note of that in the future.
Read the link (The Line Break element) I included in my first post paying attention to the “Accessibility concerns” section. I’m not saying never but be aware that when you use <br> there are accessibility concerns. Knowing there are alternatives I don’t use it.
For your small page that will have a limited audience it’s okay. I wanted you to be aware of the accessibility concerns.
One last thing. I didn’t notice it previously. You specified a couple of font families. Pay attention when embedding them. What happens if the font doesn’t load. What was specified was a backup font of cursive. You didn’t include that (you should). If the font doesn’t load the user won’t see a cursive font as would be desired, they’ll see something very generic and boring.