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

Advice generator project using HTML, CSS, JS, advice API

@ZhansauleT

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, everyone!

I would really appreciate it if you check my solution and give some feedback on it. Especially, regarding the placement of "pattern" below the advice text. Should it be fixed or is it okay to move it depending on the text length?

Community feedback

P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

Hello there, Zhansaule Telisheva! ๐Ÿ‘‹

Well done on this challenge! ๐Ÿ‘

Here are a few things I'd like to suggest,

  • Avoiding using px for setting the value of font-size in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text in your site by changing the default font-size of their browser. It might also be worth setting the values for other properties such as margin or padding in those units so that your entire site will scale with the user's chosen default font-size. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video on the topic.
  • Avoiding setting specific heights for most of the elements in your page (especially wrapper or container elements). It's often better to simply allow the height of elements to be determined by their content (which is their default behavior) because then they will be just as high as they need to in order to accommodate what's inside them. You can always use margin or padding to add extra space around or inside those elements if desired. In your case, there's no need to worry about keeping the content below the quote in the same place for every quote (since you don't know how short/long each quote will be).
  • Setting the alt text for the icon inside the button that loads another quote to be an empty string so that it will be ignored by screen readers. Thatโ€™s because that element isnโ€™t necessary or important to the content of the page and as a result doesnโ€™t need to be read by screen readers.
  • Using more semantic HTML elements in your markup, which is important for accessibility and SEO-related reasons. For instance, the button that loads another quote should be a button element, the quote itself could be a p element, and the "Advice #93" text could probably be a heading element. If youโ€™d like to learn more about how to write semantic HTML and why it matters, check out this short, helpful course.

Hope you find these tips helpful. ๐Ÿ˜Š

Keep coding (and happy coding, too)! ๐Ÿ˜

Marked as helpful

1

@ZhansauleT

Posted

@ApplePieGiraffe Wow, cool, thank You so much for this valuable advice. I highly appreciate that! I'll use your tips in my future projects and check out the courses too:)

1
P
ApplePieGiraffeโ€ข 30,545

@ApplePieGiraffe

Posted

@ZhansauleT

No problem! Happy to help! ๐Ÿ˜Š

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