@ritesh-karankalSubmitted over 2 years ago
-
I used rems for margin and padding. What is the best unit to use for margin and padding rem or em?
-
I have given the container width in pixels. Should I use rem or % for giving it width?
P
Alexander Lippitsch
@LipAlex1All comments
- @LipAlex1Posted over 2 years ago
Hi Ritesh,
I like the way you went about the project!
Here are my thoughts on your solution:
I noticed that the project folder contains 3 css files with only one of them being hooked up by a link tag in the head of the html file. I don't really get why the other two are there. If they have no functionality they should not be there, because in a real life situation that is dead weight on tcp/ip traffic and slows down the rendering of your site for no reason.
I like that you used semantic html as this is good practice and adds to SEO. You don't need to classify or id <main> or <footer> tags, though, as they are supposed to be unique and you only produce redundant code.
There is a slight overuse of the <div> element where you could easily use other semantic html (article, section) also for leaner code.
Also, you may want to look at the design guide once more as there are :active states. The :hover states are good but there are color changes to be effected on :active state.
Regarding your question with em, rem, %:
When building responsive sites I recommend to use rem and max-width rules (also in rem). Make sure you understand the difference between rem and em. rem is the size set in the root element (html selector), whereas em means size in relation to the parent element. This difference is crucial to understand otherwise it will cause endless frustration at the most inconvenient moments.
If you haven't already, familiarize yourself with media queries to set breakpoints for your design.
Keep up the good work and happy coding!
All the best,
Alex
Marked as helpful1 - @JakubStranianekSubmitted over 2 years ago@LipAlex1Posted over 2 years ago
Hi Jakub,
nice work with plain HTML and CSS!
You may want to look at the report as there are two ally issues. That is, because you aren't using a h1 tag. That is necessary for SEO reasons, though. Also you should use semantic HTML (header, nav, main, article, section, aside, footer).
The mouse arrow turning into a pointer on :hover state is good but the color change of the button element is an :active state element effect.
Also, if you hover over the buttons you can see that the card design flickers - i.e. hovering pushes the above elements further up. That is because your nth-child:hover pseudo selector adds a 1.5px border to the button element that is not there in regular state.
Since there is a media query and a meta viewport rule I believe you want the design to be responsive. For that drop px values and use rem instead together with max-width rules on the CSS. Also, look into the box-sizing: border-box property-value-pair and what why it is favorable.
I finished the same project earlier this week. Feel free to take a look at it.
Keep up the good work and happy coding!
All the best,
Alex
0 - @cwebdevSubmitted over 2 years ago
Hi,
This is my first time using CSS custom properties. I am planning to use it more in future. Any feedback regarding that is welcome.
Any other general feedback is also welcome. Happy Coding!
@LipAlex1Posted over 2 years agoHi Chitrang,
you may want to look at the report as there are ally issues. Make sure you use semantic html (main, header, nav, section, aside, footer etc.). Assigning classes to main, header and footer tags is redundant code as these tags are meant to be used non-repetetively.
Also, make sure you use ONE h1 tag since this is important for SEO reasons and it's the quasi standard in webdev.
The background doesn't look like the specs. There is more work to be done on background image and background-colors to get it to look right.
The site is not fully responsive particularly because there are no breakpoints in the design and the font-sizes are set to fixed widths that hurt the design on smaller viewport widths.
Designing the entire HTML structure with divs only is considered bad style but not necessarily wrong. Semantic tags as well as button, input and list tags would make that code leaner, faster and easier to maintain. Commenting the code is doing yourself a favor as it saves you time when revisting the code.
Keep up the good work and happy coding!
Marked as helpful1 - @vigengareyanSubmitted over 2 years ago
Which areas of your code are you unsure of?
Shadow size
@LipAlex1Posted over 2 years agoI like the way your card looks!
You may want to take a look at the report as there are 3 ally issues with the code.
There should be only one h1 on a site for SEO reasons; also you should be using semantic html (main, section, article, nav, header, footer etc.).
It is good practice to provide useful content to the alt attribute of images so that screen readers and broken links to images don't cause problems for your users.
Also, I noticed not all the active features are there. According to specs the mouse arrow should turn to a pointer on three occasions.
Keep up the good work and happy coding!
Marked as helpful1 - @kbaseySubmitted over 2 years ago
In what ways could I have made my page more responsive for different viewports?
@LipAlex1Posted over 2 years agoHi Kieera,
I like your design.
Your current design is static. You can make it responsive by using relative width and height values instead of px. You can giv #card percentage values for width and height. Keep in mind, both width and height percentage values are in relation to the width of the parent element of #card.
In your css you declared the img a flexbox. This doesn't have any effect as display flex turns the container into a flex box with the flex properties affecting the items inside flexcontainers. The img doesn't have any flex items in it.
Also, use em and rem instead of px to responsify your design as em an rem values are fully scalable whereas px are fixed pixel values.
You may want to look at the report as there are also ally issues. It is best practice to use one h1 tag for SEO reasons and to use semantic html (main instead of #card and footer instead of .attribution). Also the ids should be repaced by classes for better reusability of the code.
Happy coding!
Marked as helpful0
