I defined semantic color tokens in Tailwind CSS, to adhere to the convention set in the Figma design File.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Ok so first, functionnality wise, this is really close to perfect. Everything is working as intended.
Now obviously there is quite a few design details that are not looking close enough to the given design.
It is a pretty big project so I imagine what happened is that you focused on the functionnalities and might not have had the motivation to fix the little issues afterwards.
I can totally understand that because I felt like that on mulitple occasions doing this project, but I will tel you that you should still take the time to correct these little details.
If you feel tired with the project, take a break of this one for the rest of the day and come back the next day with a fresh head, it is what I did more than once with this one.
I would say the only thing that is actually bothering for usability is the fact that your selected choice stays selected after changing question.
Also, maybe the score tile that is plain white on plain white makes it lookt weird.
Overall, good job, keep up !
Honestly not much to say, it looks good. I would have liked to dig deeper in your code, but I am not used enough to vanilla javascript for web development.
I won't dig too deep in this one simply because, your react/javascript looks really good to me.
I like the way you have handled the active tip selection. Only thing I could say is the reset button doesn't set the custom to either zero or it's initial "custom".
Apart from this there is obviously some little designs mistakes, but I think you know how to fix these if needed.
The responsiveness is fine, deifnitely functionnal, but I would recommend you to take a look at the clamp porperty while setting your width. I use it to set my preferred width in vw (Knowing the desktop width they use is 1440, I will take the width of the container and convert it in vw).
With clamp you can also set a min value you don't want it to go lower then and a max value you don't want to go higher than. So let's say my preferred value is 60vw but I don't want it to go lower than 550px and not bigger than 1200xp. It will look like this: clamp(550px, 60vw, 1200px). For me this was a game changer, hope it can help you.
Also consider slowly but surely looking for another way of structuring your css. I would suggest either going for modules.css, wich won't take you too long to understand and do a really good job or if you are willing to put just a little more time, maybe look at SASS/SCSS.
Overall good job, keep up !
Aside from being proud of how the app turned out, both visually and functionally, I am proud I took the extra steps of fetching the data dynamically instead of implementing it statically and proud of the fact that I used yet another form of CSS which was new to me, CSS Modules. I'm aware the CSS Modules is basically vanilla CSS but it was nice to have my code more compartmentalized for easier readability and debugging.
Next time I will spend more time analyzing the structure of my JSX (HTML) to ensure I have a proper DOM structure and make applying my styles much simpler.
What challenges did you encounter, and how did you overcome them?I had several small roadblocks with this project but the most notable one would be the early steps of structuring the app. I initially had one additional component called Dashboard and was trying to fit the Layout component inside but in the end I wasn't sure which harbors which, the Dashboard or Layout. Finally, I scrapped the Dashboard component and just stuck with the Layout component and things started progressing so I just stuck with that structure.
What specific areas of your project would you like help with?My primary weakness now lies in the earliest stages of development, deciding which elements I want to break down into components. One example would be the UserProfile component. I wasn't sure whether to include the navbar in there, or create a Navbar component, or just include the navbar in the layout since this is a small project.
Once I gain more experience thinking in React, however, I believe the mental image of the app structure should come more clearly to me and I would have an easier time organizing my files as such. If there are any good resources on how to approach the early stages of app development, please feel free to share! I will also look into this on my own time.
Ok so first of all, your project looks really good. Your little animations on hover state, made me go back and animate mine because it really adds a little something. Good job.
1st thing Now, looking at your code, it really took me a few minutes to understand how you structured your work.
After a little while I understood what you went after. The idea of having a page folder and a component folder seems good for scalability. I am no expert in react structuring, but to me I feel like if you want to do this, maybe you should separate your components in two category. The ones that are page specific and the ones that might be reusable.
In your case you don't have any components that are directly reusable. To me if your components are page specific, and by that I mean when you have hardcoded content in there, it should absolutely be linked to his page.
Again I'm no expert, I'm sure you are more informed than me on that. I'm just speaking as another coder who looked at your code and had a hard time finding my way. If it was the case for me, maybe it's because I'm dumb, but someone else might be as well ahah.
What I would've done in your case is have a pages folder, inside it a timeframes folder and inside it all the components that are specific to it.
This is also why I choose to balance between scalability and logic when working on projects here. I feel like the way you have worked there would make sense in a project where you have a lot of reusable component. For a component to be reusable, the content in it has to be fully dynamic wich is not the case here and it might take a long while before you even come across building a component that you'll reuse.
2nd thing
So I will go on with some really cool thing I've seen from you. At first when I saw you created an icon object for all the images, I wasn't sure where you were going with it. Then I realized you used it in your map method wich is absolutely beautilful work .
Especially because it led me to another cool thing wich is the fact that you appropriated the json file and modified it to mkae i work better for you. Solid work there !
3rd Now talking about the json I saw you said you were happy with how you dealt with the data. To be fair the way you did worked really well and in the end is extremely similar to what you seem to think you have done, but I have to say you have not fetched the data from the json.
You have only imported it than used it like you would with any javascript variable or functions. Again everything that comes after is the same one way or another so you still did a really good job using that data.
Now when we're talking about fetching data, it means using the fetch function built in javascript (unless you were to use a specific library, but let's not get there.). I wouldn't go and tell your to redo it for this project, but maybe go and watch or read as much thing as you can on the fetch function. The big majority of your project would have been the same, but depending on how you would have fetched the data, you might have come across some issues at the time of deploying, so it is important to be ready for this.
Overall this is a really good looking project, I just had a lot to say about a few little things. Keep going, good job !
Responsive design: Works well on various devices and screen sizes.
Ok, so i'm not gonna dig too deep into this, but looking at your code, first thing I noticed is that all your css is in your html file using the tag.
Just type how to link CSS to html on google, it will take you 2 minutes to grasp and it will make your code look much cleaner :).
Now I don't know if you have noticed, your layout is centered at 1440px, wich shows me you"ve used the width given in the style guide, good job on that. The issue is the layout is not centered on any other widths.
The more I look at your code the more I realize this might have been a bit of a nightmare for you. Don't worry, not so long ago I wante d to break things trying to center something using CSS.
The first issue lies in your body selector. I see an align-content. First, align-content is a property that only works on flex containers. Second, I would tell you not to worry with the align-content for now, it is rarely useful.
What you would need in this case is a display of flex, a justify-content of center and an align-items of center. This will center your layout in realtion to the body. Wich leads me to the fact you have use a fixed height. Now this is fine for a project like this wich you know will never take more than the screen height (at least on desktop), but in other cases you should switch from "height" to a "min-height" of 100vh, this will allow it to "follow" the size for your project.
If you do all the above steps you wouldn't have the mess I see realted to margins on your container selector, because everything would have been centered from the beggining :).
So, I won't dig deeper into it, Overall it looks good, the sizes are not exact but the proportions are pretty much kept so it looks good.
Good job, keep up!
I'm proud to have mastered the techniques of building responsive websites, which not only improves the look of the site, but also makes a significant difference to the user experience. I'm also pleased that I was able to learn how to add my own fonts using @font-face, which allows me to fully adapt the design style to my vision. My greatest satisfaction, however, comes from the fact that I can prevent the page from reloading, taking care of the smoothness of the application, and that I have a good understanding of the principles of form validation, which translates into the safety and comfort of the users of my projects.
What specific areas of your project would you like help with?I would be very grateful for any comments or tips on areas I could still improve. Thank you!
Now this is a bit of a weird one to me.
At first glance, it looks quite a bit off (don't want to be mean, but with the slider it is obvious that your sizes are off by quite a bit).
I will come back on this and give you some tips, but when I clicked on your live site, first thing I realized is that you have handled the form error better than me (or at least closer to what was expected for this project I think).
Looking at your code I've realize that using vanilla javascript seems to be giving more possibilities for something like (I personally work with react) because of the possibility to interact directly with dom elements. All of that to say, I was really impressed by your javascript usage. I don't know what is your background, but it almost feels like you have more experience with javascript than with CSS.
So coming back to CSS and how it could be improved,
1 On frontend Mentor you should know that every project you are submitting is gonna be compared directly with what it should look like, so of course if it is even slightly off, it will show (at least for the desktop version). The projects are always giving the screen width the designs are based on. For desktop it seems to always be 1440px and mobile 375px.
Now this isn't important just for FEM Imaginea web designer gives you his design and specify that the page should look exactly like this at 1440px screen width, than you better be sure it looks exactly like that at 1440px.
The way I personnally do it is I'll try to have the same exact measures for 1440 and 375 and everything in between just has to look good and be responsive. In your case it is pretty obvious that everything is just way too small. You should spend more time trying to get the right font-size, maybe you can't get it perfectly, but in your case, you are getting readability issues wich should ring a bell that something is wrong.
Now your html looks really clean, again great job there, love to see the BEM convention.
With the good javascript, html and even the structure of your SASS file, it is even harder for me to understand how you couldn't make your overall design closer.
You are clearly talented, so I will just say take your time with the css. This is the first thing we see here when reviewing but it is also the first thing a user or a potential employer is going to see, you can't treat it lightly.
Overall, good job, keep up !
Using rem for sizes and using the var() for the colors
What specific areas of your project would you like help with?Feedback appreciated! Just want to know if there is need for improvements to my CSS
Ok, so just opened your code.
-1- I'm seeing variables at the top of your CSS, I love it. It is an easy way to make sure right from the beginning that you are not going to forget something and/or use a wrong value, good job ! Now I would like from you to start looking at how you could use them more. For instance for your typography and in some cases even for your spacings across one project :).
-2- Just another tip, you can type CSS reset on google and copy/paste the code at the top of your CSS file. A CSS reset is a way to avoid any unwanted behavior that is cause from "pre-built" CSS. For example, I use the one from Kevin Powell and what I like from his is that there is a min-height of 100vh set to the body and the h1,h2,h3,h4 don't have particular stylings anyways, because you should never rely on a tag to style anything.
-3- I can see that everything seems a bit bigger on your design, but everything looks proportional so it's still looks really good. Depending on if you have the figma file or not, it can be really finicky to get everything excatly the right size.
-4- Now I know at this stage of your journey you might not have gotten really into responsive web design yet, but I will still give you advice, because this will soon become the major thing you'll have to focus on. You current design isn't responsive, as in once you get to these lower screen sizes, the site start not adjusting well. Generally we want a website to look good to as low as 320px of screen width(sometimes it might even be 300, like on the challenges here.).
Now on your site there would have been a realy easy fix (at least from what I'm seeing). You have used fixed widths, instead you should think of using max-width, this way it allows elements to shrink when required. Fixed widths are fine for really small elements, like a little icon, but in general it's good to avoid it.
I woudl say overall this is a solid looking page, good job, keep up !
This submission is NOT complete. I found the share section part for the desktop design to be incredibly challenging. I'll need to come back in the future for this.
What specific areas of your project would you like help with?That share section in the desktop view.
Looks really good !
Personally I woudl have maybe triggered the media query at a little wider width to swicth between mobile and desktop layout, but it doesn't look too bad this way.
The react looks well structured as well.
Of course there is a few dimensions that seems off, personally I will work on the desktop version with a screen width of 1440px and mobile with a screen width of 375px (these are given in the style guide). I try to have everything looks spot on for these two sizes and tehn I make sure everything in between looks good.
Looking at your live site, I can see some responsive issues. I think this might not have been the best project to start learning bootstrap.
This project has so many different spacings, different layouts at different screen sizes, even without bootstraps I could barely use any cutom mixins/utility classes, because there was so many different things from one section to another or from one device to another.
I think as you say you will get better as you are getting used to bootstrap, but I think it also important to raise the question wether bootstrap is always a good idea. (I don't actually know, genuinely questionning as I don't know much bootstrap.)
Overall this looks good, now looking more in-depth;
1 I see in your code that you have included all of your css between two section and a <main> section would have been fine.
Still in semantics, why an h3 tag for your big text ? It is clearly the main and only header of the page therefore it should be an h1. h1, h2, h3, h4 are purely semantics tags, if you are to put only one of these tags, it should always be h1 and you ajdust the typography yourself.
3 obviously a few small mistakes with some font-sizes, for that my advice would just be to take your time more.
Good job ! Keep up!
If you review this one **please open the live site ** front end mentor generates a screenshot way too fast. If you open the live site you won't even realize anything, but the text in the first card takes like half a second (if not less) to adjust on top of its background. I tried regenerating screenshots many times the screenshot still looks bad.
Now I know I could have used a different approach with absolute positionning but with the project done and fine in an actual real scenario, I'm not messing with it again ahah.
The overall layout is pretty good, I like how it reacts when you reduce the size of the screen !
Now I think you might have spent a lot of time on that layout and maybe not enough afterwards. Obviously designs like this are a little weird as in it's hard to do without fixed widths wich are normally not recommended.
I am not going to go over everything, I think just comparing the designs you can easily see what is wrong, it's just a matter of taking more time on the little details.
Good job ! keep up !
