Skip to content
OverviewSolutions
33
Comments
6
Aymen developer
@aymenthedeveloper

All comments

  • Roberto Keppler•110
    @rkeppler42Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I learned a little bit more about responsiveness, but that is still a little bit difficult for me to understand. I will dive deeper into it so next time I will be more prepared!

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

    I had to research about ems and rems and how to implement them.

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

    I would like to know if there is something more that I could have done to make the project better and if there is a way to make the fonts responsive without having to use media queries;

    Blog Card trying to use responsiveness

    3
    Aymen developer•590
    @aymenthedeveloperPosted about 2 months ago

    i saw that you wanted to make fonts responsive without a media query, you can do that by using the clamp function when setting the font size of your text for example:

    font-size: clamp(min value, preferred value, max value);

    font-size: clamp(1rem, 1rem + 1vw, 2rem);

    now let me explain the min and max value are obvious right! the preferred value must not a be a static value meaning it you should not use px or rem alone instead you should combine a static unite with dynamic one like vw (view port width) this will make the font size grow or shrink based on the view port width.

    I hope you find this helpful.

    Marked as helpful
    1
  • Jan•290
    @Jan-Dev0Submitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    I had to experiment a bit with Flexbox because the elements didn't always occupy the intended space as I had planned.

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

    I would appreciate some general tips on using Flexbox for layout and feedback on whether I've made any mistakes or if there are better approaches I could use.

    Four card feature section -HTML, CSS, Flexbox

    2
    Aymen developer•590
    @aymenthedeveloperPosted about 2 months ago

    for a layout like this its better to use grid since it allows us to define the grid cols and rows and then we can use the properties grid-row and grid-column to position each element exactly in the grid, which makes thing much easier.

    i personally used flex box for this project when i did it but if i would go back an improve it i will defiantly use grid.

    you can check my solution if you want to see how i did it using flex box.

    Marked as helpful
    1
  • Aymen developer•590
    @aymenthedeveloperPosted 6 months ago

    Nice :)

    0
  • Karan Kumbhar•10
    @kumbharkaranSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I tackled this challenge in just half an hour, using flex in CSS (there are other ways, of course!).

    Responsive QR code component

    1
    Aymen developer•590
    @aymenthedeveloperPosted 8 months ago

    hey congratulations for completing this challenge ;) I just wanna say if you wanna get the solution close to the design install pixel perfect extension and use it to compare the design with your solution while you code, anyways good job mate.

    0
  • Leyker•60
    @leykerjsmSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm starting using SASS for the first time in a porject, I think I did not too bad

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

    The most challenging part for me was looking up the styles in figma

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

    I need review on the structure of my SCSS file and HTML

    Responsive QR code component

    3
    Aymen developer•590
    @aymenthedeveloperPosted 8 months ago

    hey! congratulations for completing this challenge :) your solution is amazing and it is very close to the design, the only thing left is adding the drop shadow and you are done ;)

    Marked as helpful
    1
  • Aymen developer•590
    @aymenthedeveloperPosted 9 months ago

    Hey Congratulations on finishing this challenge :)

    I have few suggestions that can help you improve your solution:

    • you should download the files assets of this challenge and use the svg icons instead of using screenshotted icons.
    • use the style guide to help you set the right colors, fonts and font sizes for your solution.
    • try to separate your CSS from your html file (for organization purposes)
    • try to use sematic tags in your document like header, main , ...
    • finally make sure your solution is responsive and works on small screen devices
    0