Design comparison
Solution retrospective
Okay, so this project challenged me, lol... so please guys, go through my solution and you can state things that could have been done better or that I can improve on. I would also love to know how you access a JSON file, had a little problem with that :).
Community feedback
- @Enmanuel-Otero-MontanoPosted about 2 years ago
Hello Prisca!
In general your code is good and it's fine to use "fetch" to access the JSON. The result of the challenge is good. If I have a couple of suggestions for your CSS.
I suggest you load the fonts from the HTML and not from the CSS, this way they will load faster and therefore your website will have a better performance, keep in mind that the browser has to read the code to render it, and the first thing it reads is the HTML, for this reason. I'm going to leave you an example of how it would look from the HTML
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
The above code ☝ goes inside the head tag.
The rel="preconnect" attribute to a link informs the browser that your page intends to establish a connection to another domain and that you want the process to begin as soon as possible. The resources will load faster because the setup process is already complete when the browser requests them.
The other suggestion is that you try not to chain so many selectors to apply styles, if you know that there are several elements with the same style, directly put a class on it and apply the style to them with the class selector. I tell you this because it can affect performance in larger projects and also because it makes the code more difficult to read. I leave you a sample of your code to be more explanatory.
.mon span, .tue span, .wed span, .thur span, .fri span, .sat span, .sun span{ color: hsl(28, 10%, 53%); margin-top: 5px; }
The above advice will prevent you from having to use !important, as it is considered bad practice. In general, always try to apply styles with the class selector, this way you will always have the same specificity in your code and you will only have to worry about the cascade.
Any questions do not hesitate to contact me.
Greetings.
Marked as helpful1@PriscaToniaPosted about 2 years ago@Enmanuel-Otero-Montano This is lovely, Thanks a bunch :)
1
Please log in to post a comment
Log in with GitHubJoin 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