Este projeto foi uma ótima oportunidade para colocar em prática minhas habilidades em JavaScript, HTML e CSS. A integração com a Advice Slip API foi particularmente desafiadora e ao mesmo tempo gratificante, permitindo-me explorar a manipulação de dados em tempo real.
Fico animado em compartilhar essa solução e receber feedbacks para continuar melhorando minhas habilidades de desenvolvimento front-end.
Hello!
Your solution looks good, there's just one small flaw with the divider. Always look at your result with the dev tools of your browser (or better more than one browser). If you set the viewport to 320 px (that's the smallest viewport you should take into account when laying out the website) the divider is breaking out of the card.
Do not use px to declare font-related sizes. This is crucial for accessibility. If a user sets a custom font-size in their browser and you use rem or em, their font-size will also change accordingly.
Headings should always be in descending order. There's no reason to use <h6> since there is no other heading on the site. Don't use heading levels just because they "look like that heading".
And here's an article about the alt attribute, the divider should have an empty alt attribute, since it does not add to the info on the page. It's just a decoration item. https://www.w3.org/WAI/tutorials/images/decision-tree/
Please take the time to go through your solution and try to improve it. As a small tip, you can visit the challenge hub after you completed a challenge and look at other ppl's solutions. Look for some that have comments on them and see if someone gave feedback to that person, there's a high chance that you can also learn from that 🙂
Hope this helps, happy coding 👾
I am really glad that I think the design is properly responsive, as I'm still getting comfortable with responsive design elements. I was able to successfully use the grid system with media queries along with the clamp() for font sizing.
What challenges did you encounter, and how did you overcome them?Initially I had chosen to use flexbox for the responsive design, but found it difficult to create the component correctly according to the design. The design was responsive but I was having difficulty getting the correct sizing for the larger screens. Using the grid system I was able to better halve the card for the image and product info.
What specific areas of your project would you like help with?I would really like feedback on whether the solution correctly implements responsive design, particularly whether my font sizing is good practice using the clamp function. Any tips on better practice would be greatly appreciated.
Hello!
Here are some tips to improve your solution:
You should read through the basics of semantic HTML again, there are some errors that are covered in very basic beginner tutorials. For example, a website should only have one <h1> heading. The product name does not qualify for an h1 level heading. In this single component, you don't really have an h1 so either leave it away or add one outside of the card and hide it visually with CSS.
Headings should be in sequential, descending order. If you have a product category description like "Perfume" in this case, just wrap it in a <span> or <p>. In a real world application, the perfume's name would be a h3 or even lower, depending on the previous elements on the site. In this small example, you would probably choose an <h2>.
The description below does not need to be wrapped in an <article> element. <article> and <section> elements should always contain a heading.
Your choice of a <section> could rather be an <article> or just a simple <div> (or you change the section and the div.card, this would also make sense.
To show that one price is not the current price (or old price) and the text is struck through, you can use the <del> or <s> elements.
Please take the time to go through your solution and try to improve it. As a small tip, you can visit the challenge hub after you completed a challenge and look at other ppl's solutions. Look for some that have comments on them and see if someone gave feedback to that person, there's a high chance that you can also learn from that 🙂
Hope this helps, happy coding 👾
Hello Robel!
Your solution looks good on larger screen sizes but not so good on mobile screens. The go-to is to account for screens with a width from 320px up. Your containers use a fixed width, which is generally not good. Let the elements take up the space that they need - that's what makes your site responsive. If you give the outer container and the card a max-width instead of a fixed width, then you should already see what I mean.
Furthermore I advise you to go through the learning paths here on FEM or reading the MDN documentation about the main rules of semantic HTML. Your site should have a <main> element and since there is no <header> provided by the challenge, you could have just left it out for this one, but the attribution fits perfectly inside a <footer> element (sibling to the <main>)
Also there are general rules for CSS which you should look at again: Do not declare font-related CSS styles in px, this makes the website inaccessible to people that declared a custom font-size in their browser. Using rem accounts for that.
Another quick tip from my side, it's generally easier and more common to use (min-width) media queries, so going "mobile-first". On larger layouts you'll have it easier, because stuff just stacks on top of each other in mobile views most of the time. This is the default behavior of block elements. Then you only have to add min-width media queries for larger screens to add the neccessary styles. 😀
I strongly advise you to go through your code and look at it again to fix at least the stuff I pointed out and also re-test your site with the help of the developer tools of your browser for different screen sizes. You should at least use Firefox and Chrome to ensure it works for most of the users.
Hope this helps, happy coding 👾
I'm proud of the way I organized folders, files and even my code haha
What challenges did you encounter, and how did you overcome them?I feel like it was pretty easy to build the project.
What specific areas of your project would you like help with?Let me know if you see anything I could improve :)
Hello! 👋🏻
Your solution looks good, well done! You could give the card a max-width because card components that get too wide look mostly weird 🤓
Using a <figure> element is good, if you have written text that also describes the image, you can also use the <figcaption> as a child of the figure.
A <section> should always contain actual content that makes sense viewed separately from the rest of your site. You can replace the first section with a regular div.
For the second section, a <ul> with each link inside a <li> would be semantically more appropriate. Almost always where there's a repeated element, you can think of a <ul> or <ol> if each item is actually numbered consecutively.
In your CSS, you set the font-size to 62.5%. There's no need to do that. Just get used to think in rem and don't recalculate something that has been calculated. Users that change their default font size have potential issues with this and it's a red flag for potential employers, if you want to apply for jobs later.
And one quick tip for your focus state, if you use :focus-visible instead of :focus, the style will only be applied for keyboard interactions. This is almost always the desired behaviour, of course there are use cases for :focus, too 😋
Hope this helps, happy coding! 🤖
It was great working on the project.
Hello! 👾
Let me give you some tips on how to improve your solution.
You are setting your font-sizes in px while you should do it in rem or - if you know what you're doing - in em. This way, if a user has set a custom font size in their browser, the font on your page will adjust accordingly. If you use px, the font size is static.
When you need uppercase letters, do not do this in your HTML. Use CSS to make them uppercase. Most screen readers would pronounce the letters one-by-one and this would be confusing.
Most of the time, there's no need to set a fixed height on elements. If you give the elements some padding you can just let them take the space they need. This also simplifies making the site responsive.
In your HTML, your site is missing a <main> element and for the footer you need to use the semantic element <footer>.
The headings always need to be in descending order. Every website needs one h1, the next sub-headings are h2 and the ones below h3 and so on. If you have two sibling sections, both would have an h2 as title.
When citing people's testimonials or similar, you should use the <blockquote> element.
If your images do not add any meaning for the website, the alt tag can be empty, but for everything else you should always provide meaningful alt text.
A <menu> element is the same as a <ul> and should always have <li> as direct children.
On several screen sizes, your site has a horizontal scroll bar. This is because you set fixed widths on elements. This is the same as the fixed height, if you just let the element take up the space it needs, you should always get away to use a max-width.
I can see you didn't get any feedback on your previous solutions. One good way to still learn something, is look at other ppl's solutions for the same challenge that get feedback. And the good thing is, that the beginner challenges have plenty of submissions each day here 🙂
I would advise you to do some more easy challenges and maybe tackle the new learning paths that have just been introduced here on Frontend Mentor 🤠
Hope this helps, maybe come back later to this challenge and do it again or go ahead and try to implement the changes to adjust the solution 🙂
Happy coding!
I'm most proud of successfully implementing grid layouts in my project.
What challenges did you encounter, and how did you overcome them?I couldn't trouble figure out how to decrease font size without using media queries. I've searched online and consulted documentation on units of measurement like vh, vw, etc., but haven't found a solution. Can anyone help me?
What specific areas of your project would you like help with?I would like the solution to adjust font sizes based on screen size without using media queries. Additionally, I'd like to know how to create a smooth transition in the size of elements between screens.
Hello! The solution looks good!
Some small tips: When creating a website, you should always consider screen sizes from 320px and up. Your component does not have any space to the borders of the screen when viewing it at 320px.
Also, a good use case for a <figure> with a <figcaption> is the profile picture + name 🤓
And you don't have a <main> element in your HTML. A real website should always have a <header> and <main> element, as children of the <body>. It's probably less important on this single component challenge, but keep it in mind for future projects
For your first question: To adjust any size (font-size, margin, padding...) you can use the clamp() function. If you already think like this, I'm sure it will become your best friend. You can also search for "clamp generator" at the search engine of your choice and it will calculate a clamp for you.
Using anything else than rem or em for font-sizes is not a good idea. And clamps of course.
You don't really need a transition "between screen sizes". When a user looks at a website, it is very unusual for the screen size to change. You should rather focus on having the site look good on all separate, static screen sizes 🙂
Hello! 👋🏻
I know you've been active for a long time on here, but I just wanted to say that this is a challenge tackled by many users that should not yet be doing it and I'm not lying: You are the first person I see that keeps the aspect ratio of the flags so they're not cut off on the sites 😅
I also like the animations when you select another region from the dropdown (the cards gradually move to their "new" position). How does that work exactly with Framer Motion?
One or two small things I saw: "Where in the world?" is kind of an inappropriate h1 heading. It doesn't really describe the site.
Your text input is missing a label.
Your toggle button for the dark mode is not accessible. Best practice would be to use an aria-pressed state on it. Screen readers would then pronounce it like this: "Activate dark mode, toggle button, pressed" if it's active.
The icon does not change when the button is clicked.
On the detail page of the countries, you set the countrie's name as an h1, but you already have an h1 in the title.
Overall very nice solution 👌🏻
Hello!
Good looking solution! Let me give you a few tips:
The single pixel tearing in the corner of the card is a common issue with those wrapped elements with different background colors. I solved it by changing the color of the colored card to a linear gradient. So at the top you have the custom color and at the bottom the dark blue color, something like this:
linear-gradient(cardColor 0%, cardColor 75%, blue 75%, blue 100%);
Regarding your HTML, the h1 of a site should be the main heading of a site. Using Jeremy's name is not really appropriate here, it should be something like "Time tracking dashboard" or similar, visually hidden with CSS. Yeah I know, the smaller component-sized FEM challenges don't provide proper h1 headings.
The headings inside the six cards should be "work", "play", etc. and not the time. You only created divs there, divs with only text are not semantically correct. Pure text should be wrapped inside a <p> or <span> or similiar, as needed.
The site is missing a <main> element (usually a child of the <body>).
In your CSS, you are setting the body's font size in px while you should do this with rem. If a user changes the default browser font size, your site will not adjust so the user won't see any changes.
Using !important in a CSS file is generally bad practice, just as using id selectors. The selectors have different specificity, id selectors have the highest, then class selectors and then element selectors. If you use id selectors you end up having problems to overwrite this style (for example for .active classes, :hover states etc.). If you try to keep it to class selectors, the need for !important should be gone.
When you look at the container between 565px and 1200px, it is missing space to the corner of the screen (you removed its margin at the breakpoint).
And one small thing, you forgot to center the dashboard vertically 🤓😀
Hope this helps, happy coding! 👾
Hello! Some things I can see that need revision:
You are using id-selectors for your CSS. This is generally bad practice, because they have higher specificity than class-selectors and those on the other hand have higher specificity than element selectors. So when you use id-selectors, you already set the highest specificity for those CSS rules and it's problematic to overwrite them. Especially if you're working in a bigger project, at some point the question comes up: 'Why does my element behave like that?'
For your HTML, you only used a <header> element, but your site is missing a <main> element (and a footer, I don't know if one was provided by the design)
Also, your header does not have any background. White text on a white site is not visible. You could add a background as soon as the page is being scrolled.
You also have a horizontal scroll bar. This is most likely due to using 100vw. You should avoid using this, as the vw does not account for a scroll bar.
And just a tiny thing I realized when selecting the next image, you would expect the image to slide to the left, but instead it moves to the right. This feels kind of weird 😅
Your buttons for the left and right "arrows" are not accessible. You should add an empty alt tag on the image for the arrow (so screen readers will ignore this) and add a text on the button (something like "select next/previous image"). The text can be wrapped inside a <span> and made "invisible" by adding an .sr-only class or something similar to it. (Which you would need in your CSS). See: here
Hope this helps 👾
Hello! 🙂
There are some things in your CSS to optimize the site:
Avoid setting the width to 100vw. The vw does not account for a scrollbar and your site ends up being 100vw + the scrollbar's width and you have a horizontal scroll bar.
On the card, you have a fixed width, try to only set a max-width. Let the elements inside the container just take up the space they need.
It's also better to use min-height: 100vh instead of height for the outer container elements. This way, on a larger project, the element could still expand if it was bigger.
Try to find a sweet spot for a max-width of the card before the media query kicks in. When the card expands too far, the text looks a bit "lost"
By setting a margin on <main> you push it down from its "original spot". If you used padding instead, it would just push the inner elements away from the corners of the screen and keep the <main> element where it is.
Hope that helps 🤓 Happy coding!
Hello!
Very nice result including the JS logic to count the date. I just see one thing to improve:
You're setting the color in the style attribute with JS. It'd be better to just add another class to the className, because inline-styles are harder to maintain especially in a bigger project. This way, you'd also have all your CSS in one place and don't have to search 'Why is my text red?' ( -> Always think about your future self... and other developers looking through your code) 😄
Oh and you forgot to connect the labels to the inputs (also input tags are self-closing, no need to add a closing tag)
Overall, very well done! 👏
Hello! Some things I can see:
Let's start off with the scrollbar. It's nice that you know how to change its style, but this card component is so small, there shouldn't even be a scrollbar in the first place. Maybe keep your focus on the actual project and not overcomplicate it - there are many projects on Frontend Mentor where you can use this 😋
Also, you don't really need any media queries for this component. Just give it a max-width and let padding and margin handle the rest. You're giving the container a percentage width, which ends up in weird behaviour.
Furthermore, you only need to declare a fixed height on elements in very few cases. The regular way to go is using margin and padding inside your container or surrounding element, so all the stuff inside can just take up the width or height they need.
You're setting font-size in rem which is best practice for people who don't use the browser's default fonts. Also you got a <header>, <main> and <footer> inside the <body> 👍
In the HTML is one major flaw though, the 5 circles to choose the rating are supposed to be radio-inputs inside a <form>
Radio inputs have default behavior to only allow one selection if you set the same name attribute on all 5 of them.
Hope that helps, keep practicing and happy coding 😀
Hello 🙂
Your solution looks awesome, good work!
For semantics, when to use an article element is quite controversial if you ask me. The general definition is it should "make sense on its own", without needing to see any other elements on the page.
On a regular site, you should use a <header> tag inside the <body> element and put the <h1> inside there. The three cards from this challenge would probably be inside a <section> and, if you reference to the mdn documentation, can be an <article>.
On the other hand, mdn gives an example of a single day's weather forecast, which - for me - does not really make sense to use an article. But I'm also still learning, so... 😄
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article?retiredLocale=de
The figcaption is optional. You can see the "technical summary" on the mdn site and check which elements are permitted.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure?retiredLocale=de#technical_summary
You can also use Chrome, inside the dev tools there is Lighthouse that gives you insights on general problems on your site. I know it's the design template, but the text colors often have a too low contrast for the background. You can also see the contrast ratio when using the element inspection tool inside the dev tools. Just use a darker color to solve the problem.
Aaaaaand you forgot the background color (don't worry, I did too when doing the challenge) 😋
Hello 👋🏻
The solution looks close to the design on desktop but let me point out some things you can improve:
The site is not responsive. You should always try to code a mobile-first workflow. Set the base CSS rules for mobile and then work your way up with media queries for larger screens.
When working with mobile-first approach, you should consider screen sizes from 320px and up. Since you worked desktop-first, your site acts very weird when the screen comes to mobile screen sizes.
Try to avoid importing the font via CSS. It's better to load it into your HTML, but even better considering loading time is to have it hosted inside your project and then importing the file (there is a download button for the google fonts on the top right of the page)
Font sizes should be declared using rem and not px. This way, the size will adapt for people who have set a bigger base font size in their browser.
Same goes for other sizes that you set like margin, padding or width. If you have set an element to have a width of 50px it is a fixed state. If the user has set a bigger font size, they probably want to see not only the text bigger, but also the other content
In your CSS you should avoid using ID selectors but rather use class selectors. ID selectors have a higher specificity and you may end up overwriting something that you didn't want, also it may cause unwanted errors that are hard to debug.
You are not using a modern CSS reset. By having all default element properties deleted, you can style everything the way you want and you don't have any unwanted styles in your design. https://andy-bell.co.uk/a-modern-css-reset/
Instead of using height: 100vh, you should use min-height. This way, the content can still expand the 100vh if necessary.
In your HTML, you have the <label> hidden by default and not a descernible text on it. Screen readers will not be able to announce to visually impaired users what the label reads. It's better to always have a label that can be read, even if you have to visually hide it with CSS because it's not supposed to be actually visible.
Input and label should always be connected and have a proper description. Use the for attribute on the label and the same word as the id on the input.
If an image is only decorative, leave the alt text blank like so: alt="". This way, screen readers will skip the image. In all other cases, always provide a descriptive alt text for images.
Don't use a div with an ID of header, use the <header> element
Instead of writing out the words in uppercase, use CSS to transform them to uppercase. Screen readers may pronounce the letters one by one which would be a bad user experience
And you should check your email validation. You can type in "a@a." and the email is validated
It would be a good practice if you started this challenge anew. Since you seem to have developed many bad habits regarding your code, you should try to wipe them out quickly 😉
If you have any questions, feel free to ask. Happy coding 👾
Hello 👋🏻
There seems to be an issue in your JS:
Your getUser function doesn't work, you are using a variable inside the function before initialization.
Also both the classname and id for your form element are a bit misleading, I think mentioning the word "form" in any way would be more suitable. search-submit sounds more like the submit button 🙂
Hello 👋🏻
The design looks good, for my liking you could set the media queries a tiny bit higher. It looks a bit wonky right when the media query kicks in.
Also here are some tips:
This is a very good use case for the figure element, although you mixed up the parent-child relationship with the figcaption. The figcaption is supposed to be the child of the figure 🙂
In your HTML, always have the heading elements in descending order. You don't really have something in this challenge that you can use as an h1 so here it's missing for once, but the next heading in order would be an h2
There's also no need to wrap the heading and the paragraph in a separate div. You can just style the element with the same CSS rules.
Every page should have a main element. You could just exchange the div that is your .grid-container with the main element.
Variables in HTML and CSS are usually written in 'kebap-case'. The words themselves are all lowercase.
I hope this was helpful, happy coding! 👾
Hello 👋🏻
The design itself looks close to the original but there are some flaws in your code. I also recommend starting with smaller challenges to get the basics right. This way you are not going to form bad habits.
Here are some tips to improve your solution:
Look for a modern CSS reset to have a proper basis to work on.
The media query for 375px is way too small. Look at the site with your browser's developer tools and adjust the number
This challenge does not need any position: absolute. You can just center the container in the middle of the page with flexbox or grid.
Heading elements should be in descending order. Do not use heading elements just because 'they look like a heading element in the design'. When you reset everything with a proper CSS reset, you can define all the font-sizes to your liking.
Hope this helps and happy coding 👾
Heya 👋🏻
Here are a few improvement suggestions for you:
Every site should have a <main> element. Maybe exchange the .cardscontainer div with the main element.
And you should check your responsiveness again, on a 320px device, the boxes are too wide.
Overall, the site looks nice (the animations are maybe a bit too much) and good work on designing the additional view for tablets 👍🏻
Hope this helps and happy coding 👾
