Laryssa Carvalho• 30
@laryssacarvalho
Submitted
I'd like to know if there is a dynamic way to set the different colors for each summary item? Is this class naming convention ok? Besides that, I'd appreciate any kind of feedback. Thanks! :)
Alejandro25A
@Alejandro25AR
All comments
- Alejandro25A• 220
@Alejandro25AR
Posted
Hello @laryssacarvalho congratulations for completing the challenge
- The nomenclature is fine but you could follow an already defined nomenclature such as BEM (Block - Element - Modifier), besides it is very similar to the one you used., with BEM it would look like this:
// Block .score-summary {...} // Element .score-summary__item {...} // Modify .score-summary__item--red {...} .score-summary__item--blue {...}- Along with BEM you could use the ITCSS (Inverted Triangle architecture for CSS), this would be to organize and divide the styles by purpose in different folders.
- Finally to facilitate the use of this architecture and in general the writing of styles, you could take a look at SASS.
I hope it helps you. Great job, keep practicing.
Marked as helpful
2 - Robert• 190
@rhyuen
Submitted
I couldn't get the list of choices to align with the left edge of the card using flexbox and justify-content: 'space-around'. flexbox and justify-content: "flex-start" with a hard coded margin-right also didn't look quite right, so I went with the former.
The background colour for the rating choices didn't seem to match any of the colours in the style guide so I extrapolated using the second darkest blue, the card's colour.
Alejandro25A• 220@Alejandro25AR
Posted
Hi @rhyuen.
You can't align the list of options to the left, because the
inputsare still visible and taking up space, so thejustify-content:space-betweenalso affects them. To fix this you could place the hidden entries as follows:.card-row input { display:none; } // or you could input[type="radio"] { display:none; }That way they don't take up space and the list is already left-aligned.
Good job, keep up the good work!
Marked as helpful
0 - Tyler• 330
@tylermaks
Submitted
Hi all,
Here is my solution for the Time Tracker Dashboard challenge. I enjoyed this project and used it as an opportunity to refine and clean up my code. Any thoughts or guidance on how I can improve in this area is appreciated. Specifically, I had a question about If Statements - is there anyways to shorten this code?
const convertTimeframe = () => { if(props.timeframe === "Daily"){ return "Yesterday" } else if (props.timeframe === "Weekly"){ return "Last week" } else if (props.timeframe === "Monthly"){ return "Last month" } }Thanks so much! -Tyler
Alejandro25A• 220@Alejandro25AR
Posted
Hi @tylermaksymiw. You can use an object to avoid the if, so you will have a much more scalable and clear code. series as follows:
const convertTimeframe = { Daily: 'Yesterday', Weekly: 'Last week', Monthly: 'Last month' } let returnValue = convertTimeframe[props.timeframe];And that would be all, I hope it helps you. Great job, keep practicing.
Marked as helpful
2 - MURRAY122• 280
@MURRAY122
Submitted
- svg, I needed to darken the dropdown arrow and end up using 'fill'. It filled the icon completely instead of just the arrows line. Is there another approach that could achieve this? Is it also best to use svg tags within the HTML file itself or as 'background-image' in CSS?
- Is it best practise to add media queries (CSS) after each class or handle all media queries at the end of a CSS file.
- The nav I handled by using JS to swap out CSS classes (top nav to side nav). The HTML wasn't changed, its structure contained within one HTML element. Is it better to separate the side and top nav structures into their own html tags?
- The picture HTML tag am still new to. Seems difficult contain the image size for responsiveness without stretching the image out or being too small.
Any feedback on this or anything else would be great. Thanks for viewing
Alejandro25A• 220@Alejandro25AR
Posted
Hi @murray122,
- The svg is filled with black on the outside, since you must apply the property to the
strokeinstead offill. - It is better to embed the svg directly in the html than to place it as an image, since being in svg it can be resized without losing quality and its properties can be modified with css.
- I advise you not to change the
font-weingproperty when hovering the menu, as this increases the size of the box, causing a slight displacement of the other elements, which is not very pleasant visually.
Good work, keep it up
0 - Aditya Chakraborty• 90
@aditya-chakraborty
Submitted
Hello people of Frontend Mentor,
I took a desktop-first approach for this challenge. While the CSS I have written gets the job done, I know it can be better. Any tips or feedback on how to improve my CSS and code quality in general would be highly appreciated.
Thanks!
Alejandro25A• 220@Alejandro25AR
Posted
Hi, your desktop solution is fine, but you could:
- Specify a "max width" on the header (menu) and on the hero and put a class on the parent to center it, so if there are larger desktop measurements the layout stays the same but centered
Regarding CSS styles, I would advise you:
- Stop using pixels and use rem or em measurements.
- It is not a good practice to make selectors with more than 2 elements, in "menu ul li a img" you would be using 5, this is for specificity reasons.
Keep practicing, good job.
Marked as helpful
0
