Skip to content
OverviewSolutions
8
Comments
12
VictorGerfaud
@JamesLaviron

All comments

  • Ian Parker•200
    @i-prkrSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm glad to have continued working with Sass and BEM (and am enjoying it!), and feel I'm getting more comfortable and familiar with how to implement them together. I feel as though I'm getting much faster and more familiar with layouts in general and working with flexbox and elements such as `````` for good responsive design.

    Next time I would consider using grid more instead of flex everywhere, it is probably my default preference. I would also spend a little more time planning out the layout and solution before beginning coding as I ended up changing the Sass structure a few times.

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

    It took me some time to get the image correct for the footer! I was playing around with it for a long time because of my lack of understanding of the position property, and the stacking context, things I'm probably still not fully understanding. I found a helpful digital ocean tutorial (linked in the readme), and just kept trying different things until it was correct. Working with images is something I'm still getting better at.

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

    I would love to ask for feedback on two things in particular:

    1. How I have used Sass and BEM in the project
    2. Whether the pictures in the solution should have been done in a different way. Particularly things like the mobile footer picture looks zoomed in compared to the design.

    Thank you for looking at my solution!

    Meet landing page (Sass, BEM)

    1
    VictorGerfaud•210
    @JamesLavironPosted 2 months ago
    • Does the solution include semantic HTML?

    Yes it does, ice work here.

    • Is it accessible, and what improvements could be made?

    It's accessible. However you could add some aria-label to images and buttons in order to explicit what it is.

    • Does the layout look good on a range of screen sizes?

    Yes it does, however on mobile it seems like your image take more space than current screen width. Maybe add overflow-x: hidden; to body in order to remove it.

    • Is the code well-structured, readable, and reusable?

    It is well done! I would have put text presets inside classes using @include as many presets are linked to "common" elements such as h1/h2 tags or description class.

    Moreover you could use mixins in order to use it for responsive handling such as (if you code mobile-first):

    @include desktop {
[desktop styles related to class/tag]
}

That way, if you ever change a device breakpoint, you don't have to change it 25 times xD
    • Does the solution differ considerably from the design?

    It's very close to design. Good job mate :)

    Marked as helpful
    1
  • VictorGerfaud•210
    @JamesLavironPosted 3 months ago

    Hey,

    I see you made big improvements since last time. Nice use of semantic html, sass and classes. You should definitely use a linter for sass and html, would help you clean code. And for classes, you should take a close look to how it works in BEM (container__cards__grid__card is too long - keep it readable/short :) ).

    Nice work btw!

    0
  • BekzodIsakov•100
    @BekzodIsakovSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    1. Tried my best to make my solution pixel perfect and responsive
    What challenges did you encounter, and how did you overcome them?
    1. BEM & SCSS to make the code clean and well structured
    2. Divided SCSS code into different files to make working with styles and debugging easier
    3. Added h1 heading for accessibility reason and hid it from UI with .sr-only class
    4. Used aria-label attribute for article elements to enhance accessibility
    5. Used grid-template areas to position cards inside the grid
    What specific areas of your project would you like help with?

    Would love to receive feedback on how clean and well structured my code is. Other than this, I'm always open to any other feedbacks!

    Responsive grid testimonials section

    1
    VictorGerfaud•210
    @JamesLavironPosted 3 months ago
    • Does the solution include semantic HTML?

    Yes it does. Maybe you could have use section and header tags but overall it's great.

    • Is it accessible, and what improvements could be made?

    It is accessible. I loved the fact that you used aria labels but I assume it's not enough meaningful.

    • Does the layout look good on a range of screen sizes?

    Yes it does. Good job!

    • Is the code well-structured, readable, and reusable?

    Yes it is, loved the way you used grid-are instead of grid-template properties.

    • Does the solution differ considerably from the design?

    It's very close to the design. Nice :)

    0
  • Mateus Lima•360
    @mts-mlSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Had a hard time trying to align the cards using only display: flex;, so I decided to learn Grid for this challenge, proud of that.

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

    This challenge was difficult for me because I couldn't get the design right using only display: flex;, so I had to learn Grid in order to display the cards correctly.

    Also, I don't have access to Figma files, so some sizes might be off.

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

    Constructive criticism and tips will be appreciated.

    Four Card Feature Section challenge

    1
    VictorGerfaud•210
    @JamesLavironPosted 3 months ago
    • Does the solution include semantic HTML?

    Yes it does, a lot. Maybe you could have used article or section tags but overall it's nice!

    Is it accessible, and what improvements could be made?

    Yes it is.

    Does the layout look good on a range of screen sizes?

    Yes it does look very good. Good job.

    Is the code well-structured, readable, and reusable?

    Well, no. Selectors are poor-performance/not reusable as no classes are used. I will advise you to look at the BEM methodology. It will make you understand how to make your CSS readable and reusable :)

    Does the solution differ considerably from the design?

    Not at all. GG

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

    I used microdata to enhance semantics.

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

    To stretch the image to fit the card height on desktop view, first I applied display: flex both on the image parent element and on its parent; but, the image did not stretch correctly on Safari. To fix, I forgot about flex and just added height: 100% to the image itself (and object-fit: cover to ensure the image remains well-proportioned).

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

    No particular help requested.

    Product preview card component solution - HTML, SCSS

    1
    VictorGerfaud•210
    @JamesLavironPosted 3 months ago
    • Does the solution include semantic HTML?

    Yes it does.

    • Is it accessible, and what improvements could be made?

    It's accessible

    • Does the layout look good on a range of screen sizes?

    It looks very good, seems weird on breakpoint transition but nice solution!!

    • Is the code well-structured, readable, and reusable?

    Yes it is. However it seems like you decided to use complex css stuff. You could have done something far easier to maintain but I assume you wanted to work on it :)

    • Does the solution differ considerably from the design?

    Not at all, it's very precise (maybe too much precise haha)

    0
  • Hernan Amaiz•10
    @Maizo21Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I feel fine with my solution. Sería mejor si tuviera acceso a Figma 😅

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

    The semantics

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

    Feedback about the css, how can I do it better.

    Semantic HTML5, CSS, CSS Grid, Mobile-first

    1
    VictorGerfaud•210
    @JamesLavironPosted 3 months ago

    Hey, since I saw your solution in my feed and saw that you wanted some CSS tips, I decided to take a look at your code.

    First of all, it's very good. You've used semantic HTML as much as possible and tried to make it reusable. However, it looks like you're having problems with the fonts, maybe you need to check why it's not working as expected.

    As a first step to improving your css, I'd focus on using more reusable and powerful query selectors. Perhaps take a look at some articles on how you create your selectors (spoiler: use classes and IDs :) ). Checking out the BEM methodology can be a great way to understand how CSS and HTML work together.

    Nice solution :)

    ps: I've just seen that you use the 'px' unit. Avoid using pixels at all costs, it won't work well on many high-resolution screens. Better to use rem/em :)

    Marked as helpful
    1
  • VictorGerfaud•210
    @JamesLavironPosted 3 months ago
    • Does the solution include semantic HTML?

    yes, it does.

    • Is it accessible, and what improvements could be made?

    It's accessible. However you should focus on the way we you use classes and css selectors. You could look at some articles about how css selectors work (see https://medium.com/@paulohfev/css-best-practices-you-should-know-374c388a00dd for example). The way you do it could lead to performance issues.

    Maybe also look at BEM methodology and SASS. It will help you structure your html and css to make it more reusable and easy to maintain.

    Nice work overall though :)

    Does the layout look good on a range of screen sizes?

    It looks good.

    Is the code well-structured, readable, and reusable?

    It's fine

    Does the solution differ considerably from the design?

    it's very close, great job!

    Marked as helpful
    0
  • Alex Enogiasun•40
    @Alex-EnogiasunSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    It take me a very short time to complete the project

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

    There where no challenges of any kind

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

    I am available for any assistance that i can do on Html, css, Javascript, react

    HTML AND CSS

    1
    VictorGerfaud•210
    @JamesLavironPosted 4 months ago
    • Does the solution include semantic HTML?

    Yes it does, nice use of semantic HTML here. You could add a main or a section.

    • Is it accessible, and what improvements could be made?

    It is.

    • Does the layout look good on a range of screen sizes?

    Yes it does look ok.

    • Is the code well-structured, readable, and reusable?

    Not at all. You have to use CSS variables in order to make it reusable on future components. You souldn't use tag selectors such as h2{} p{}. It is very bad for performances. Always use classes or IDs. Moreover you should use a code editor and an extension for code formatting in order to avoid issued syntaxes.

    • Does the solution differ considerably from the design?

    Yes it does, many differences.

    0
  • Mikiyas Kebede•360
    @Miki0035Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to finish this project fast. Now I understand that all those studying and coding are paying off. But still there is room for improvements , like being to understand scss better , this was my first time using it

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

    I was having some problems trying to use scss , like how to use it in raw HTML . I found the solutions from their documentations and stack overflow

    Responsive Profile Social Media links

    1
    VictorGerfaud•210
    @JamesLavironPosted 4 months ago
    • Does the solution include semantic HTML?

    Yes it does, maybe you could add main or section tag.

    • Is it accessible, and what improvements could be made?

    Looks great.

    • Does the layout look good on a range of screen sizes?

    Yes it is but you should remove useless attribution to match screenshot.

    • Is the code well-structured, readable, and reusable?

    You should avoid common tags selectors such as h1 styling. When doing this, browsers will get all h1 and for each h1 will check ancestor. Performances could be lowered on big sites :( Otherwise nice ideas!

    • Does the solution differ considerably from the design?

    Nope, apart from padding on main div.

    0
  • voespinal-code•50
    @voespinal-codeSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    In this project I was able to use media query to achieve one of the assigned requirements and make this card responsive. also add certain attributes

    Blog preview card using flexbox and media Query

    1
    VictorGerfaud•210
    @JamesLavironPosted 4 months ago
    • Does the solution include semantic HTML?

    Many divs, not enough semantic tags.

    • Is it accessible, and what improvements could be made?

    It is. There some size issues but it's fine.

    • Does the layout look good on a range of screen sizes?

    Yes

    • Is the code well-structured, readable, and reusable?

    You definitely should use prettier-like stuff in order to format your code. You also could use variables to make it reusable for other potential components.

    • Does the solution differ considerably from the design?

    Yes but it's fine.

    Marked as helpful
    0
  • VictorGerfaud•210
    @JamesLavironPosted 4 months ago
    • Does the solution include semantic HTML?

    Yes it does, nice ideas. Loved the way you used classes and variables.

    • Is it accessible, and what improvements could be made?

    yes it is accessible. I would pack texts in a container that handles most of padding stuff.

    • Does the layout look good on a range of screen sizes?

    It looks good.

    • Is the code well-structured, readable, and reusable?

    It seems so, I would personally have sticked with HSL.

    • Does the solution differ considerably from the design?

    Yes, a lot. Are you using figma? It seems like many values are approximative. Overall it's looking nice :)

    Marked as helpful
    1
  • a-yemisi•110
    @a-yemisiSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Learning text and border shadow

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

    Trying to center the qr code component on the webpage

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

    None for now

    Frontend Mentor - QR code component solution

    2
    VictorGerfaud•210
    @JamesLavironPosted 4 months ago

    Does the solution include semantic HTML?

    Yes it does, a lot.

    Is it accessible, and what improvements could be made?

    Yes.

    Does the layout look good on a range of screen sizes?

    Yes

    Is the code well-structured, readable, and reusable?

    Seems like.

    Does the solution differ considerably from the design?

    Dude had a trip on text shadows and added attribution that broke design comparison :)

    0