Skip to content
OverviewSolutions
7
Comments
9

Mathieu-310

@Mathieu-310180 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Ethan John Paguntalan•260
    @dev-ethanjohn
    What are you most proud of, and what would you do differently next time?

    Getting more comftable with CSS grid and media query. I would explore in the future using Javascript to dynamically adjust sizing and location of components.

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

    I got into an issue where my CSS for the part of individual styling of cards is becoming more lengthy. Luckily I was able solve it by building a more robust selector by just utilizing locally declared custom properties. By creating a locally scoped variables, I was able to modularize individual cards.

    .testimonial-card:nth-of-type(1) {
  --testimonial-bg: hsl(var(--clr-purple-500));
  --testimonial-highlight-clr: hsl(var(--clr-white));
  --testimonial-detail-clr: hsl(var(--clr-purple-50));

  --author-name-clr: hsl(var(--clr-white));
  --author-status-clr: hsl(var(--clr-purple-50));
  --img-border-clr: hsl(264, 82%, 70%);
}

    taking advantage of shared styles such as the ff:

    /*shared styles for author info texts*/
.author-name {
  color: var(--author-name-clr);
}
.author-status {
  color: var(--author-status-clr);
}

    There are many more robust solution and even more outside of plain CSS, but this gets the job done for now.

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

    I would love see any feedback on responsiveness and maybe further recommendations that I may check out for.

    Testimonial Grid Section Responsive Layout using Grid and Media Query

    1
    Mathieu-310•180
    @Mathieu-310

    Hello!

    You did it :) great job!!

    ✔ You forgot to add the title of the page

    ✔ You used h1, h2 and then hide them in css, I guess you're worried about accessibility, but I think here it's just a block and in it there are divisions just to be able to style them and so there's not really a need to use semantic tags. Indeed semantic tags are parts of a website in their own right but here it's just a single block so you can give it a semantic tag and the rest used generic tags for style reasons. So you shouldn't use semantic tags anywhere, you should rather understand the major sections of the website and use them if necessary.

    Happy coding 🥰

  • Mathieu-310•180
    @Mathieu-310

    Hello dear!

    You did it :)

    Here's some suggestions:

    • You use h1 throug h3 in the first section and p througout every component's title, but I it's just a paragraph not headings in the first section and it is good practice to use headind tag for evry title not a p tag.

    • On 450px wide and above your card looks too large so you have to use maybe a max-width to avoid that.

    Happy codding!!!

  • Mathieu-310•180
    @Mathieu-310

    Hi!

    Great job :)

    Here's some suggestions: You have a lot of unused css rules so they can slow down your site load time. It is best to delete all unused properties.

    I think "add in card" is not a button but just a link which will navigate people to a payment page so use an <a></a> tag instead.

    Lastly you have to use max-width to manage the width of your product's container because it looks very wide on medium screens. Just use a div element here because it's just for styling purposes so there is no need for article element.

    Happy coding!!

    Marked as helpful
  • P
    Trischa-99•170
    @Trischa-99
    What specific areas of your project would you like help with?

    This was my first time using semantic elements in a project, and I'm not entirely sure if I used them correctly. I would appreciate any feedback and tips regarding their usage.

    Social Links Profile

    2
    Mathieu-310•180
    @Mathieu-310

    Hi dear!

    This some some suggestions about using semantic HTML5:

    • You use <header></hearder> for the name and the address in your profile card. I think there is no need for header tag here because the header tag contains the primary information of the page including navigatons links, logo, or sometimes the title of the page. -If you want you can use <address></address>tag for the address infos. Like this:
    <address>London, United Kingdom</address>
    • Lastly don't use <section></section> everywhere.Think like semantic tags are meaningful label for different division for your website just like your home: there are the bathrooms, bedrooms,etc. But there are also some part where you put some of your stuff that aren't really sections in their own right.They're just sections for organizational purpose. So the idea is to use semantic tags where it's necessary to label a part of your website just like the different parts of your home and generic tags for organizational purpose. So here there is not different part, just some division for organizational purpose so in this case just use <div></di> element for styling purpose.

    In conclusion if you want to provide a meaningful division of your website use semantic tags if not just use div element for styling division purpose.

    I hope you are understanding, happy coding!!

    Marked as helpful
  • Maruchet O•270
    @MaruchetO
    What specific areas of your project would you like help with?

    How to make the ::marker be in the middle of list?

    Recipe page

    1
    Mathieu-310•180
    @Mathieu-310

    Hi!

    I have some suggestions:

    • On 320px wide we have to scroll horizontally that's not really good.

    • About the breakpoints you applied media query to are random. I suggest to use the breakpoints which are widely used, and instead use the max-width property to manage the size of your container in small screens.

    In general you did a great job!!!

    Marked as helpful
  • milicaaa175•130
    @milicaaa175
    What are you most proud of, and what would you do differently next time?

    I am proud that I managed to do this faster than other projects and I think I used Flexbox correctly this time.

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

    I didn't have challenges in this project.

    Social media links using semantic HTML and CSS

    2
    Mathieu-310•180
    @Mathieu-310

    Hi!

    Great job!

    Here is some points you can improve:

    • In 320px wide there is no padding between your design and the border of the screen.

    • Also in small screen your footer's content overflow due to the set height.

    • Finally you should have a transition in your interactive component so that they are fluid.

    In general your design is good.

    Happy coding!

    Marked as helpful
View more comments