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

Four Card Feature Section

#sass/scss
Anaz Anoiar• 160

@AnazAnoiar69

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! 🎉

Anaz Anoiar’s questions for the community

Hi need advice for responsive font size 🙏

Community feedback

Ivan• 2,670

@isprutfromua

Posted

Hi there. You did a good job 😎

keep improving your programming skills🛠️

your solution looks great, however, if you want to improve it, you can follow these steps:

  • @import prevents parallel downloads, use <link> instead.
1. @import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;600&display=swap");
  • Use relative units for font size, such as ems or rems. While modern browsers can smoothly zoom pixel-based layouts, sizing type in relative units ensures an entire layout can be scaled up or down by simply updating the font-size of the body element.

  • You Need to Stop Targeting Tags in CSS. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

I hope my feedback will be helpful. You can mark it as useful if so 👍

Good luck and fun coding 🤝⌨️

Marked as helpful

1

Anaz Anoiar• 160

@AnazAnoiar69

Posted

@isprutfromua Hi there 🤗

Appreciated your feedback

  1. Ok will change to this method in the next project.
  2. Why on earth I cant think of this method before 🤔
  3. As Im using SCSS ,isnt the selector scope is limited in the nest only ? Even for the tags.Correct me if Im wrong

Anyway thanks for the advice will take it to improve my skills

Have a good day sir 😙

0
Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, great work on this one. The desktop layout looks really nice, the site is responsive and the mobile state looks really nice as well.

Others already gave their feedback which is nice to see, just going to add some suggestions as well and don't mind me if I re-iterate some ideas mentioned already:>

  • For the scss part, you don't really need to use:
body {
  .... other selectors
}

You can just directly target the selectors like .container, this way you reduce specificity. Also, if you like, you can search about bem convention. This will help you manage css selectors and create more generic classes. For example, you will have something like:

.cards{
  &__container {}
  &__list{}
  &__item{}
}

This way, you can group them properly if you think about it.

  • Adding max-width on the body tag to prevent the layout from stretching. If you try to zoom out on your browser, you'll see that the layout stretches, adding max-width will prevent that, just make sure to add margin: 0 auto so that the body will be centered.
  • These two text:
Reliable, efficient delivery
Powered by Technology

Are just one single phrase, meaning instead of using p tag for the first one, use a single h1 to wrap both lines and just add max-width on the h1 so that it will limit and create that 2 lines.

  • The overall font-sizes could be bigger, right now some text are small and they are smaller than the design as well.
  • Remember to only use a single h1 for a site. The h1 typically use on the hero heading like the 2 lines above on the site. So each of the card titles could be replace by just h2.
  • Each images could use an aria-hidden="true" attribute so that it will be totally hidden.

Those only. Again, great job on this one.

0
Ken• 975

@kenreibman

Posted

Professionally and personally I use the clamp() function for truly responsive typography. This will genuinely take your responsive game up to a professional level.

Check out this video: https://youtu.be/U9VF-4euyRo

0
Liyan Anajao• 910

@LiyanNguyen

Posted

for responsive font-size I personally use these methods:

  1. use rem units, and change them via @media query for different viewports
  2. use width% percentages (depending on the container of the text)
  3. use vh/vw (I rarely use this but sometimes more convenient)
0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!