I only figured out how to make it look like the design when opening the page on a desktop screen. Could someone tell me how to make it look good on mobile and desktop? Its the next thing I'm gonna be focusing my learning on :)
Hey Fiorella, congratulations on finishing the challenge :-) Considering the mobile-first approach I would set the initial max-width to something like 95% or 90%. Then you could use a media-query for bigger viewports to switch to a fixed max-width of e.g. 350px.
.container1 { max-width: 90%; }
@media screen and (min-width: 400px) {
.container1 { max-width: 350px; }
}
This should solve most of the problems. Just test it out yourself and see what fits best. The next problems for the mobile view are:
Other things to keep in mind:
Things to google:
Cheers & Happy Coding
Is it normal to have this many classes?
Hey Keiran! Congratulations for mastering the challenge :-)
I think the amount of classes in your code it is not a problem. I give every HTML element a class and do not use element selectors (except maybe some base rules for H1-H6 and stuff).
For me the best approach is something like BEM where you assign multiple elements to the same block/component and therefor they all contain the same name, e.g. .card__image or .card__circle . For me it is less confusing than to have 100 completely different classes like .left-circle, .left-score, .right-circle.... I hope you get my point :-)
Cheers & Happy Coding
Feedback welcome:)
I had some problems getting the summaries on the left side of the component. I needed a lot of HTML markup to get it to work properly. And because I didn't fully plan it out, it has become a bit of a mess of classes.
Hey! I know these problems too well. Especially when I do a project for learning I constantly try to optimize the html structure and css class names. Unfortunately in reality when you do work for clients you sometimes don't have enough time. So take your time when doing projects on frontend mentor. If I am done with a project I will look at other peoples solutions and adjust my code.
To answer your second question you may want to read more about conventions/systems like BEM. You are already using the .block and .block__element notation in your code. According to my understanding when using BEM you make everything a class and avoid normal/nesting selectors. Therefor the question, when to nest selectors and when to use classes, does not arise. The hard part for me always is deciding when to start a new .block vs when to make it just another element.
Hey Suzanne, you may want to add a background-color and border-radius to your .result-summary-container class to implement the design. Also check the breakpoint < 576px for 100% width and the top left and right border-radius.
Great product preview component.
Maybe you want to take a look at a formatter extension for your code editor to help with indentation and stuff, e.g. Prettier for VS Code, and activate it "On save". It saved me a lot of time and made my code more readable!
Hi there 👋, I’m Henry and this is my Solution for this challenge.
I was able to complete the challenge using SASS + VITE
Any feedback on how I can improve and reduce unnecessary code will be highly welcomed and appreciated!
Thank you. :)
Hey Henry, thanks for your solution, it helped me a lot as I am currently learning BEM conventions and wanted to check my solution. My comment is more a question as I am a BEM beginner.
In the block
<div class="summary__item summary__item--accent-2">
<div class="summary__item--main">
<img src="./assets/img/icon-memory.svg" alt="" class="summary__icon">
<h2 class="summary__item__title">Memory</h2>
</div>
<p class="summary__score">92 <span>/ 100</span></p>
</div>
you give the div the class .summary__item--main. Why are you working with a modifier here but use a grandchild element for the h2 .summary__item__title? It might be better to make summary__item a new component?