Skip to content
OverviewSolutions
2
Comments
2
Houssame
@houssamedev

All comments

  • Linda Jensen•80
    @lindajensenSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    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

    1. 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?
    2. 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?
    3. 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?

    Responsive Blog Preview Card using Flexbox

    3
    Houssame•20
    @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
  • Osei-Bonsu Isaac•50
    @io-oseinanaSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing.

    What challenges did you encounter, and how did you overcome them?

    Nothing

    What specific areas of your project would you like help with?

    Nothing

    A QR code page

    1
    Houssame•20
    @houssamedevPosted 8 months ago

    Hello there 👋. Good job on completing the challenge ! I have some suggestions about your code that might interest you.

    .Use min-height instead of height for flexibility across devices and screen orientations. Fixed heights may cause issues, especially on mobile devices in landscape mode, try checking your solution on a mobile device in landscape mode, and you'll notice how the component height is constrained, and the background might not apply correctly.

    .Consider using max-width instead of width for your component's width. This way, it will resize when the screen is smaller.

    .In larger projects, adopting a mobile-first approach when working with media queries can be beneficial.

    I hope you find it useful! 😄

    Happy coding!

    0