@DalaScript
Posted
Heey 👋
Here are some tips, I hope it helps:
HTML:
- In order for your website to be semantically justified, it is necessary to use semantic elements. Every web page needs a
<main>
tag that separates the content. This is vital for accessibility as it helps screen readers identify the "main" section of the page. so change your<div class="mainContainer"></div>
with<main></main
tags. NOTE: - we don't use camelCase to identify html classes, instead we use hyphen mode, So the class would be correctly identified: main-container
- You also need to change the card tag with
<article class="card"></article>
, instead of div. (A div is not a semantic element)
CSS:
- in this Challenge, you actually don't need to make it responsive, because sizes are the same for Mobile and Desktop.
- We first start writing the code for the mobile device, This is called - Mobile-first workflow.
- The rest depends on the dimensions, you just need to correctly specify the padding, margin, font size, font family and that's it.
Good Luck! DalaScript
Marked as helpful