Design comparison
Solution retrospective
My second Frontend Mentor Challenge and I'm really proud of the fact that I found a solution to the whole cursor:hover dilemma. I'm not sure using an image was the correct way to go, but it did solve the problem.
If I could do it all over again I would probably try a mobile-first approach. I really need to practice that and a lot of people says that's the way to go. I'm just really new to this whole coding thing and I'm not really sure how to go about it. Like do I just make my screen smaller and start from there?
What challenges did you encounter, and how did you overcome them?One challenge I encountered was how to make the pointer change when I hovered over the link. I Googled forever and couldn't find a way to change the color of the pointer. So after quite some time I decided to use an image as a pointer. I hadn't done that before but it wasn't all that difficult.
Another challenge I encountered was the font-sizes. In the description it said "The font sizes in this project a slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries." I decided to use rem, but I'm not sure that's a solution to the problem. I tried using the calc() function, but I couldn't get it right.
What specific areas of your project would you like help with?Questions
- Is using an image as a pointer the "correct" solution to the problem? Are there other ways of solving it? Like is it possible to change the color of the pointer?
- Is using rems or ems one way to make the font-size smaller on smaller screens? Is that how they work? Or is there another solution?
- How do you design for mobile-first? Like practically? Do you just make your screen the size of a mobile screen and start coding or is there another, better way of going about it?
Community feedback
- @houssamedevPosted 8 months ago
Greetings, Linda .
Good effort on this challenge!
I will try to answer your questions based of what i learned (I'm new like you) :
1.i think in this challenge you don't need to add a custom pointer , in every system like win or Linux or mac they have default cursors design ,so i think the figma design for this project made in mac so the cursor is black . my point is that you have to focus in hover function that's all not how the cursor looks.
2.you did great using rem and ems ,also use % units for responsive design , but the solution for you case is to use clamp property in CSS
font-size: clamp(1rem, 2.5vw, 2rem);or use media queries to change the fonts size for each screen but i prefer clamp property.3.mobile first approach is to make your website responsive for every mobile screen starting from the smaller screen like iPhone 5 screen size of 320px to the higher ones , so when coding you start with those sizes using media queries to adapt the content of your website to the desirable size , by the way HTML document is responsive by default , if you remove the style from your website and resize the browser you will see the content adapt automatically to the width of the screen ,so make profit of that .
Hope you find this helpful.
keep coding
0
Please log in to post a comment
Log in with GitHub
Join 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