Skip to content
OverviewSolutions
12
Comments
14
Lyna
@lynaIFR

All comments

  • Yujan Bajagain•170
    @GamingClausSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    i am proud of how i was able to complete this challenge, i would like to use different tools to achieve better results next time

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

    i didn't face much problem in this challenge as my previous challenges were much harder.

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

    if there are any suggestions for improvement then please lemme know

    Solution to Huddle Landing Page using Flex(Easy to Understand)

    1
    Lyna•260
    @lynaIFRPosted 3 months ago

    Great work, just try to center the social media icons in the circles

    0
  • Lyna•260
    @lynaIFRPosted 3 months ago

    You did a good job but there are things you should take into consideration:

    • learn to write a css reset code.
    • don't use brut values for margin and position to place your elements, you'll cancel the default responsiveness of your website, instead use grid or flex displays.
    • don't fix a width, use max-width.
    Marked as helpful
    0
  • Fatma Tawfeek•110
    @Fatma-TawfeekSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    • learning how to use local hosting fonts
    • learning how to use box-shadow and what's every value in box-shadow property refers to
    What challenges did you encounter, and how did you overcome them?
    • using local host font "figtree" asking chat GPT how to set up a local host font
    What specific areas of your project would you like help with?
    • dealing with responsive screens

    Blog preview card

    1
    Lyna•260
    @lynaIFRPosted 3 months ago

    Congrats on completing this challenge, here are things you can improve:

    • never use px for font-size, instead use rem.
    • any website is responsive by default, but when we set a value to the width of elements, that responsiveness will be affected, I saw in your code that you gave a value to the width of your elements, if you want for an element to have a proper size, give it a max-width.
    • you used a flex display, that's good, use all of its properties to organize the space between your elements like gap, don't use padding and margin everywhere, that's bad practice and it will cause problems
    • in your html try using proper tags other than div, for the card content you could use the article tag for exemple Overall you did a great job, keep going 😁
    Marked as helpful
    1
  • Lyna•260
    @lynaIFRPosted 3 months ago

    Nice job. Try to center the summary list in the mobile design, and you forgot the icons of the results category

    0
  • Lyna•260
    @lynaIFRPosted 3 months ago

    Nice job, here are things to improve:

    • never use px for font-size, use rem instead
    • don't give specific values to margin and padding, learn about flex and grid layouts, they are more efficient
    • the border-radius should be set for the container, add to it overflow: hidden; to see the magic
    • the first <section> tag should be replaced with a <main> tag, remember, every web page needs a main landmark
    • learn about <picture> it allows you to switch images for different screen sizes so your website can be responsive
    • you may want to use a media query to make the mobile design like provided in the challenge Hope this helps, good luck
    0
  • Clyo•140
    @clyoSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Managed to figure out certain issues I was having before

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

    n/a

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

    Styling the ordered list was the most difficult part.

    recipe page

    1
    Lyna•260
    @lynaIFRPosted 4 months ago

    Congrats on finishing this project!

    • I noticed that the font is not the same, when looked into your code, it turned out you forgot to put a ; at the end of the src in your @font-face.
    • You don't have to give a class name to every tag, in CSS you can select the tag itself.
    • there are 2 font-family in this project : 'outfit' and 'youngSerif'. You can add another @font-face for the 'outfit' font. But overall, you did a good job!
    Marked as helpful
    1
  • Lyna•260
    @lynaIFRPosted 4 months ago

    Hi, congrats on completing this project! It looks good.

    I took a look at your code, it's well written, but here are some things you can do better:

    • Always use rem for font-size never px.
    • To make a good CSS reset, I invite you to check Josh Comeau CSS Reset, It was very useful for me.
    • You should set a min-height : 100vh; for the body, so that it can use all the frame height.
    • In the HTML, I think it would be better to contain the elements in a div or more, because using values for the margin and padding to center elements is a bad practice. Check out Anamol Soman article to have a better understanding on how to do it.

    I hope this feedback will be helpful for you in the upcoming challenges, keep it up 😁

    Marked as helpful
    0
  • Lyna•260
    @lynaIFRPosted 4 months ago

    Nice work!

    Marked as helpful
    0
  • Megumi Nagumo•10
    @Megumi-NagumoSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I thought it might be challenging but I could purely enjoy the process!

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

    It took me a bit to figure out how to center the image in html but I could solve the issue by using "transform: translate(0, 50%);"

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

    JS knowledge.

    QR code by Megumi

    3
    Lyna•260
    @lynaIFRPosted 4 months ago

    Congrats on completing this project! At first glance, it seems you didn't see the design guide provided in the project folder, I invite you to take a look at it to better understand the requirements, I also took a look at your code, you should know that the attribution shouldn't be in the card (you can also take it off your website if you want), I invite you to check Josh Comeau for CSS reset, there is no need for the id; you can use other tags like h for the first p, using values for the padding and margin can be chaotic at some point, try flex box or grid and let the browser center elements for you If you have questions I'll be happy to help !

    0
  • NatSRod•20
    @NatSRodSubmitted 4 months ago
    What specific areas of your project would you like help with?

    If you have any feedback on how I could use different properties to make it simpler, please don't hesitate to tell me :) I would really appreciate it.

    Blog using has selector and media query

    1
    Lyna•260
    @lynaIFRPosted 4 months ago

    Congratulations on completing this project! Your code is good but you should fox a width and height for the panel, set max value to them and with flex box the browser will set the right dimensions.

    0
  • cinquante six•140
    @CinquantesixSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm really proud of making this challenge without @media (…){…}. I think It will really help me to build better website in the futur. This is a great new way of thinking.

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

    I didn't know about the child size when you use flex-direction:column;. Tanks @gmagnenat for the help about this specific part.

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

    I need to try to use more fluid properties like min-width or min-height and also value en fonction like clamp(…). If you know some good read about it…

    Blog preview card solution

    2
    Lyna•260
    @lynaIFRPosted 4 months ago

    Great work, I noticed that in the CSS reset there are elements that don't exist in the HTML code, you may want to delete them, other than that the code is clean and well written.

    0
  • Mystique(Nyo)•20
    @Mystique9901Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think I did it pretty well. I didn't take so long to center it, lol.. Maybe next time I should use another file to write css.

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

    For responsive, it was a little difficult for me to figure out the breakpoint. I did it just as I wanted. And I am not satisfied with that.

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

    How many breakpoint do I need for real life website? What should I do or learn to make the website more responsive? I am still the beginner and hope you could guide me. And any other advices are also warmly welcome>>

    QR Code Component

    2
    Lyna•260
    @lynaIFRPosted 4 months ago

    Congrats on completing your first project, the code looks good, but I think you should take a look at the design guide provided in the project folder to come up with an output closer to the design output, also try to better center the card

    0