Pay really close attention to html. The logo is the most important piece of content on the page (the name of the site/product) but you've hidden it from search engines and assistive technology
Add to that
- headings not in order
- price as a heading when it should be part of a paragraph
- social links aren't marked up as links so not clickable
- no main or footer elements
And really really important to start from mobile styles. You shouldn't be trying to create layouts like this with relative/absolute positioning and huge margins - start from mobile and work up without over complicating it.
Remember images can be background images or in pseudo elements of they are decorative
And rember never to put font size in px! Never. Use rem.
Marked as helpful
@shashreesamuel
Posted
grace-snow it is important to also mention that rem stands for responsive em and the reason that it should be used is because it caters for a user preferences which is what should happen when you visit a website.
I hope this helps
Cheers Happy coding š
Marked as helpful
@Mabchir
Posted
@grace-snow Thanks a lot for the detailed feedback! One question about starting from mobile style. I thought the main idea was to start from the desktop and then scale things down using @media to fit the small screens.
Will have to do the reverse?
@shashreesamuel
Posted
Mabchir the convention is to code mobile first so that's why a lot of developers recommend coding mobile first since it takes a lot of the complexity away.
I hope this helps
Cheers Happy coding š
Marked as helpful
@Mabchir
Posted
@TheCoderGuru Ohh ok I will try it out ! thanks a lot !
@Mabchir mobile first will make your code shorter and more performant, especially for people using mobile devices.
Think about it - mobile layout is generally one column, quite simple. So the base styles are short, simple and relevant for all screen sizes. Mobile browsers with poorer connections don't have to trawl through all the desktop styles before getting what they need.
Then you only need to override specific layout properties inside min width media queries for the more complex larger screen layouts.
Better all round
Marked as helpful
For example, mobile styles a layout for a component might be a load of cards all stacked in one column. Then desktop they become display flex in the media query so they all sit in a horizontal row
Marked as helpful
@Mabchir
Posted
@grace-snow Thank you for the further explanation. that makes absolute sense!
