@phucphan01866Submitted about 2 months ago
Antoine Delalande
@HamsolovskiAll comments
- @samritbasnetSubmitted 2 months agoWhat 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
- @dev-romeSubmitted 2 months ago
- @YwissamSubmitted 4 months ago
- @AZZAM-KSubmitted 3 months ago@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 - @Limpi23Submitted 3 months ago@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 helpful0 - @arpan62825Submitted 3 months agoWhat 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
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
@HamsolovskiPosted 3 months agoHello ! 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 helpful0 - @MateuszZalewSubmitted 3 months ago
