Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article preview component with Sass and Flexbox

Safi Nafi 415

@Safi100

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


if you have any suggestions let me know <3

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

_ <img src="images/drawers.jpg" class="image" alt="Loooool"> , alt values are not just any words . Assistive technology users rely heavily on such information to visualize the message that is being put across. If it is a decorative image , use an alt=""

  • your first heading should be an h1 and headings should ascend in order. Do not skip headings.

Marked as helpful

0

Safi Nafi 415

@Safi100

Posted

@ChamuMutezva thanks for your help ,I appreciate it <3

0
Hafizan Adli 1,190

@hafizanadli

Posted

You did great, it looks good and responsive.

Here my suggestion:

  • trying to use semantic html such as section,main,footer,etc. instead of using only div
  • Do not over qualifying selectors, if class name already unique, you can select that element with that class name, for example if you want to select name-date element you can simply use .name-date selector instead of (.container .information .person .name-date)
  • For name date section I would rather use p tag instead of span, since p is block element
   <div class="name-date">
          <p>Michelle Appleton</p>
          <p>28 Jun 2020</p>
        </div>

Marked as helpful

0

Safi Nafi 415

@Safi100

Posted

@hafizanadli I used Sass and type .person { .name-date{ ... } }

if you look in main.css it will automatically write (.container .information .person .name-date)

thanks for your help, I appreciate it <3

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord