Skip to content
OverviewSolutions
8
Comments
8
Antoine Delalande
@Hamsolovski

All comments

  • Antoine Delalande•130
    @HamsolovskiPosted 2 months ago

    Great, your design taught me a lot :)

    0
  • samritbasnet•200
    @samritbasnetSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of successfully implementing a complex, responsive layout using CSS Grid and Flexbox. Creating a design that closely matches a given template while ensuring it's responsive across different screen sizes is a significant achievement. My attention to detail in styling elements, managing typography, and adding subtle design touches like background images and shadows demonstrates growing proficiency in CS

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

    One of the main challenges was implementing the complex grid layout, especially positioning the cards correctly across different screen sizes. I overcame this by breaking down the layout into smaller components and using CSS Grid's powerful positioning features .The main properties used for positioning grid items are: grid-column-start grid-column-end grid-row-start grid-row-end

    Testimonials grid section solution

    1
    Antoine Delalande•130
    @HamsolovskiPosted 3 months ago

    Very good !

    0
  • Antoine Delalande•130
    @HamsolovskiPosted 3 months ago

    Very nice !

    0
  • Antoine Delalande•130
    @HamsolovskiPosted 3 months ago

    Very nice !

    0
  • Antoine Delalande•130
    @HamsolovskiPosted 3 months ago

    Hello ! Few tips if you want :

    • It is possible to style the bullet points of your lists using li::marker {} : you can change color, margin, and quite a lot of stuff.
    • Avoid naming your variables with the value they contain : if one day you have to change a color, you'll end up either having a variable named yellow containing red, or renaming the variable in your entire file. If you can, name them after their role : title-colour, background-colour, etc.

    Otherwise, you have the basics all right, but some elements of the original design are missing : padding, some text font and colors, the frame for preparation time, etc.

    You're not very far :)

    0
  • Antoine Delalande•130
    @HamsolovskiPosted 3 months ago

    Very nice !

    Little advice : you have an h4 tag following an h1. It's better to try to respect the order h1 > h2 > h3, etc. It will help google crawlers understanding the structure of your page.

    Marked as helpful
    0
  • arpan62825•60
    @arpan62825Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Happy that I made it look almost like the original one.

    • took less time than the previous one
    • Did all by myself

    Things I would like to improve:

    • Use of unnecessary margins
    • Unprofessional work/Bad Practices
    What challenges did you encounter, and how did you overcome them?

    There was not much of any challenge, everything went smoothly. Used flex to align all the items

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

    Okay, so I did this without any help (like chat GPT, google, stack overflow, etc) I am pretty sure that I did some unnecessary things.

    And did some Bad practices

    I would really appreciate anyone pointing out the mistakes/bad practices that I did. And would greatly benefit from any suggestions to make the code DRY

    Blog card with hover effect

    1
    Antoine Delalande•130
    @HamsolovskiPosted 3 months ago

    Hello ! Very nice work, you're near pixel perfect :)

    You wanted tips on bad practices you might have, here's what i've noticed :

    • css : don't use values when naming your variables (yellow, etc.), but instead, use a term describing the role of the variable (main-color, bg-color, title-font) etc. That way, if someday, you have to change the value of your variables, you don't have to rename it and avoid having a variable "yellow" containing an hex code for red.
    • html : avoid div if you can, there are a lot of other tags you can use : article, section, header, footer, etc. divs are not very good from a SEO point of view.
    • try to store your svg data into a dedicated file : it makes your code cleaner. Good habit to have : if you have one element or function you might want to use elsewhere : put it in a separate file.

    Some other tips :

    • you can put other values than colors in your variables : font, size, etc.
    • try to avoid fixed height and width for element whose size might change : your element will better adapt to its content.
    • you can use numeric values in font-weight : 100, 200, etc. It allows you to be more precise than using values like bold, etc.

    Hope it helps :)

    Very nice work on the transition btw !

    Marked as helpful
    0
  • Antoine Delalande•130
    @HamsolovskiPosted 3 months ago

    Nice !

    1