Understanding of flexbox, I will use grid layout next time.
What challenges did you encounter, and how did you overcome them?Improving my understanding about web elements.
What specific areas of your project would you like help with?About the asterisk property. I knew it's not a good practice but it works for me this time. What I can do to avoid this practice?
Nice design and coding here! i see you are using alot of px. Thats not a problem but i suggest to use rem or em when it comes to margins, padding and font-sizes. Use rem/em when you want it to be adaptive to the scale of the system. For example, if you use rem or em the size will change which adds accessability for people that have it harder to read.
thats all i got, keep it up!
Nice code you got there. There is still improvements you can do. The first one is up to you. I personally make a folder and put my css in there for styling. This is because the html file can be alot of lines making it harder to see and understand. The second is i see you are using alot of pixels on everything. I recommend you to use rem or em when you use padding and margins because it makes the website more responsive. Lastly i want to point out is when you make the width of your website smaller, the box doesnt react to that well. the elements are almost hidden. Maybe try min-width:100vw;
Anyways a good structure! I like your layout. I see you are using few divs and this is a good practise! The less is better. I want to point out its unique method of using article, i sure didnt use it. By the way nice table you made. Keep it up!
I am most proud of how quickly this project came together with relative ease. Like previous project, I would maybe experiment with a component library instead if I do it again.
What challenges did you encounter, and how did you overcome them?The challenge I did face was the social links styling. I originally had each link in a span, and then applied the styling class to the span. (a span was used instead of an a tag as there was no need to make them actual links) However, to organize the links I used an unordered list and made each link a list item, which messed with the style. The solution was to remove the span tags altogether and just use the style class on the li tags.
What specific areas of your project would you like help with?There is no specific area I feel I need help with.
good thing about the element "li". The code is easily readable
Your code is overall well-structured and follows good HTML and CSS practices. It is easy readable.
I have some suggestions to make it a little bit better. Note: this is small things but once you have learnt it, its good for making a website. In the svg element, make sure to put an "alt" attribute in there. This makes the accessibility better.
To ensure that text is more responsive and readable across devices, you can consider using units like rem or em instead px units.
Overall, you are doing a good job with this code! The structure is clean and your use of code is nicely. You have taken care of design elements like alignment, spacing and color, which shows an attention of detail that makes the design well!
Pour commencer, je suis assez heureux d'avoir pu réaliser la maquette.
What challenges did you encounter, and how did you overcome them?Le respect des break points pour le responsive
What specific areas of your project would you like help with?You can reduce repetition by using more general rules. For example, instead of specifying font sizes separately for p and body, you can use e.g. font-size: 15px on body.
Your use of media queries works fine for different screen sizes. It is good that you have taken into account larger screens in addition to small screens.
You have already started using CSS variables, which is a good practice.
Instead of using lots of padding and margin adjustments for placement, you can use display flex or grid to structure the layout better. This will give you better control over how elements are placed, especially on different screen sizes.
With these adjustments, your code will be both more readable and optimized, but it is already easy to see and understand your code. Good job!
