Skip to content
OverviewSolutions
3
Comments
4

RemyJuanes

@RemyJuanes90 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

  • Submitted 18 days ago

    Social Links Profile Main

    • HTML
    • CSS
    1

    Accessibility

  • Submitted about 1 month ago

    blog-preview-card-main

    • HTML
    • CSS
    1

    I would like some help to solve the third point: reduce font-size without using media queries.

  • Submitted about 1 month ago

    Page with flexbox model

    • HTML
    • CSS
    2

    I know that semantic HTML is good for A11Y and that what I did, but I never had to use it. So I would like to have advices about A11Y.

Latest comments

  • MarinaPerezR•50
    @MarinaPerezRSubmitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    I'm feeling more comfortable using flexbox.

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

    I get a bit confused when using @media for responsiveness.

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

    Any feedback is always welcome!

    Responsive social links profile created with HTML and CSS

    2
    RemyJuanes•90
    @RemyJuanesPosted 18 days ago

    The only difference I can see is the links's height, they seem to be just 2 or 3 pixels bigger, good job !!!

    In the HTML:

    You use lot of div tags instead of semantic tags like main for your container. You can wrap you img in a figure and the text inside a figcaption.

    The links are supposed to be a tags, this way, users can click on it to be redirected. If you use button, you had to use JavaScript in order to open a new page

    In the CSS:

    Your CSS file is short, that's a good point for readability. You can use CSS variable declaration to avoid style repetition.

    Marked as helpful
    1
  • RemyJuanes•90
    @RemyJuanesPosted about 1 month ago
    • It seems the background color is not the same as the design described it.
    • Your implementation looks good, but the size is smaller than the design.
    • The border-radius you used looks not enough.

    I could help you better if you made your Github repository public.

    0
  • RemyJuanes•90
    @RemyJuanesPosted about 1 month ago

    You should use semantic HTML tag like <main> for the main content, <figure> to wrap the <img> and <figcaption> for its description, instead of <div>. It will make your code more readable, clearer and increase its maintainability.

    I recommend to use a separate CSS file for the style. In this file you can use :root in order to store the main design system properties as constants like spaces, colors ...

    It seems you forgot to put a border around the card and its padding looks smaller than the design. I suggest to use a tiny CSS reset, it will save you from many headaches:

    * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
    Marked as helpful
    0
  • RemyJuanes•90
    @RemyJuanesPosted about 1 month ago

    HTML

    • The white container doesn't have any border radius
    • Be careful, you use many div. Try to avoid it as possible as you can: it's a tag dedicated to divide content. I suggest to use semantic tags, in your code you can use <main> to put your "main" content. And <figure> for the picture then <figcaption> for its description.

    Semantic HTML increases the readability of your code and its maintainability.

    CSS

    • In your :root you can also add the lengths for padding, margin, ...
    Marked as helpful
    0