CSS Grid

Community feedback

• 

  Junier Bolívar 🕷•710

  @JunbolPosted 11 months ago

  Hi Raven! here are some recommendation for your project: PROS: Most of the features are there, it’s almost done. I see you changed the color of the main title yes why not, nice.

  CONS:

  1. README.md: Remember you have to use the README.md template and adjust it (using Markdown syntax) with your own details

  2. Screenshot: Your screenshot doesn’t match the original design, the drawing is out of place in the screenshot.

  3. Alignment:

  a. The alignment of the element don’t follow the design brief given they are centered (unless you intended to do so) and they should be aligned left

  b. The card is not centered in the screen on desktop view: Reason: You forgot to add display:flex in the .container class

  4. Credits: The photo and the Name title are not centered: You could used

  5. Footer: The footer need to be away from the Name and Photo of the presenter: You could add margin-bottom: 2rem on the .name class.

  6. Box-shadow: The **box-shadow **property is not inline with the design brief (unless you wanted to change the design).

  RECOMMENDATIONS:

  1. Semantic HTML: Try to use as much as you can semantic HTML in your index.html file this with readability , accessibility (AOM) (screen readers) (SEO). You could go here and check it out: (https://web.dev/learn/html/semantic-html) I went there again and I realized to add the ARIA ‘role’ attribute (in all my htmls 🤪

  2. Flexbox: I’m sure you use 3wschools to refresh stuff. But these two new kids on the block are really great:

  3. [Flexbox] (https://web.dev/learn/css/flexbox)

  4. [Flexbox] (https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) Good look and Keep going!

  Cheers

  Junier

  0