Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? It could improve like using <blockquote>(for each of the quotes) and maybe <header> (for the top section having the profile pic and name and verification).

    • Is it accessible, and what improvements could be made? There is definitely room for improvement. The image of the quote used in Daniel's card could have been done with just a background image and then there is no need to use an element that could be discoverable by screen readers. Also, the "alt" property doesn't give much helpful information in that case. Maybe use <section> for the cards? Please check Alternatives to using divs and

    • Does the layout look good on a range of screen sizes? In desktop it should be centered (vertically and horizontally) and it should acommodate nicely which is not happening until the mobile breakpoint is reached (425px). Remember the challenge was meant to use css grid. Thus the main container should wrap all cards (including the one for Kira). Here is my solution for you to check and some othere I found better than mine

    • Is the code well-structured, readable, and reusable? Well I believe readability and reusability will improve if we use BEM naming convention and a pre processor like Sass. These 2 things are not really complicated and I believe it would really help you if you start using it in the next projects.

    • Does the solution differ considerably from the design? Well, yes. The good thing is that it is not much different. I would recommend to try to redoing it using css grid (grid-template-rows, grid-template-columns and grid-template-areas).

    0
  • P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? Not much (more on the next question answer)

    • Is it accessible, and what improvements could be made? I see it is using only <div>, <h1>, <h2>, <h3>, <p>, <span> but some other tags could have been used to improve accessibility (help screen readers and people with visual impairements). Like <header>, <ol> (ordered list, so you don't need to manually add the list number in the Ingredients section. Probably <section> and <em> or <strong> tags could have been used too. Check this one: Alternatives to using divs you might find it helpful.

    • Does the layout look good on a range of screen sizes? Well, looks good on Desktop and Mobile. One thing I found was that even though

    • Is the code well-structured, readable, and reusable? Well I believe readability and reusability will improve if we use BEM naming convention and a pre processor like Sass. These 2 things are not really complicated and I believe it would really help you if you start using it in the next projects.

    • Does the solution differ considerably from the design? Not much.

    0
  • P
    VictorGerfaud• 210

    @JamesLaviron

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of the ways I used grids. I tried to make it clean and adaptable to tablets. I'm proud of how I anticipated the time it would take to do it.

    I would maybe try to focus more on mobile first but still anticipating more desktop and tablet behaviours.

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

    I encountered a challenge on how to organize classes and file tree using BEM technology.

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

    I'd like help to understand if I understood well BEM technology. Hwat could I have done differently in order to make it more reusable? Thanks :).

    Responsive testimonials using Grid

    1

    P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? Yes, definitely!

    • Is it accessible, and what improvements could be made? I believe it is ok.

    • Does the layout look good on a range of screen sizes? Yes, I see it look good not only in mobile and desktop but the grid accomodates itself depending on the dimensions of the viewport. Well done! (I have to admit I only thought on Desktop and Mobile)

    • Is the code well-structured, readable, and reusable? Yes, specially using separately .scss files (partials)

    • Does the solution differ considerably from the design? Nope

    - What specific areas of your project would you like help with? I'd like help to understand if I understood well BEM technology. Hwat could I have done differently in order to make it more reusable? Thanks :). I believe it is pretty reusable, not only using scss but the way things were organized. Also, the naming of the css classes, mixins, etc :)

    Marked as helpful

    0
  • cucumeris• 160

    @cucumerisGIT

    Submitted

    What are you most proud of, and what would you do differently next time?

    I learned how to use SCSS and BEM for this page and it helped me organize the files better. The naming of some classes could be a bit more specific if the project was bigger but for such a small project i think it's sufficient. The page is also way more responsive than other projects i did before, which i am most proud of.

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

    First i did not understand the purpose of BEM but after implementing it on the page and reading a bit about it i now understand that it helps organizing and scaling pages since i can reuse much of the component i create.

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

    I would appreciate feedback on the responsiveness, specifically if i used the media query correctly and if i should use something else than px for max-width. Also i would welcome feedback on optimization of the CSS.

    Four card feature section using SCSS and BEM

    1

    P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? Yes

    • Is it accessible, and what improvements could be made? Yes. Although I see you added order css property. I would avoid using it unless it is really necessary but in my experience 99% of the cases you don't need it. Here is more information about it a11y issues using order in grid and flex

    • Does the layout look good on a range of screen sizes? On mobile devices it needs some tweaking. Setting a fixed width to the cards would do the trick (you'll need to update the width on tablet/desktop)

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

    • Does the solution differ considerably from the design? Yeah a bit (font sizes, vertical alignment, box shadows, paddings). I also have my solution differing considerably but you might want to check it to cross check yours.

    Marked as helpful

    0
  • Mateus Lima• 230

    @mts-ml

    Submitted

    What are you most proud of, and what would you do differently next time?

    I liked the layout on different devices.

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

    Without Figma, it's a little hard to get the sizes 100% correct.

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

    Constructive criticism and tips are welcome.

    Product preview card component

    1

    P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? it is using <main> and <article>. I'm not really sure if <article> applies but I do believe <header> could have been used. I found this in Frontend Mentor Discord which might help you. This might be helpful too HTML5 alternatives to div.
    • Is it accessible, and what improvements could be made? Use more semantic html
    • Does the layout look good on a range of screen sizes? I think it can be improved. I have access to the figma files I was able to get the precise dimensions which I'm pretty close to match my solution here
    • Is the code well-structured, readable, and reusable? yeah
    • Does the solution differ considerably from the design? yes, I believe in the mobile version the solution is not really matching the design
    0
  • Emir Kaan Oğşarim• 30

    @0gsar1m

    Submitted

    What are you most proud of, and what would you do differently next time?

    I was happy to see that I grasped the flex and grid structure. I also realized that I understood how to build a container structure according to the current necessity. If I were to make a difference, it would be to make all padding and margin values regular and to make the word accents in the list elements through css instead of html.

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

    As a personal problem, I had a hard time putting the elements and values in the nutritions section into the flex structure, but when I gave new containers in html and made the correct class names, my problem was solved. Thank you in advance

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

    The “I would have made a difference” part may be valid.

    Recipe page

    1

    P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    Hey, you can use https://app.netlify.com/ to host your challenge solutions. Here are instructions on how to https://docs.netlify.com/welcome/add-new-site/. If you need more help, let me know here. I'll find some time to help but the process is pretty straightforward.

    0
  • P
    Emanuele Fabrizio• 220

    @efabrizio75

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am glad I got to implement Rich Data. Next time I would use a different approach for type setting and assign properties based on element selectors.

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

    It was tricky to get the image to be responsive.

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

    What do you guys suggest to place the image? Is it better to use only the picture tag and forget 15+ years old browser?

    Recipe page (no libraries) with Rich Data

    1

    P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? Yes
    • Is it accessible, and what improvements could be made? Yes. Maybe section tags could use arialabeledby and reference the inner h2 element.
    • Does the layout look good on a range of screen sizes? Sort of. It not strictly following the design though (paddings, dimensions)
    • Is the code well-structured, readable, and reusable? Yes
    • Does the solution differ considerably from the design? Yes, you can see it live in the solution vs design above
    0
  • P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? yes
    • Is it accessible, and what improvements could be made? well yes, still a <nav> could have been used.
    • Does the layout look good on a range of screen sizes? yes but not strictly equals to the figma design (there .social-profile element have different widths depending if mobile, tablet, desktop)
    • Is the code well-structured, readable, and reusable? yes
    • Does the solution differ considerably from the design? Not really. Aside of the responsiveness issue (see above) the hover state of the link buttons should be green according to figma
    0
  • P
    Jaime• 150

    @Jaimealicante83

    Submitted

    What are you most proud of, and what would you do differently next time?

    It was easy to do, I think I did it look like the design. I would check more the details next time

    Responsive blog card with flexbox and scss

    1

    P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? yes
    • Is it accessible, and what improvements could be made?
    • Does the layout look good on a range of screen sizes? yes (but check my comments at the bottom)
    • Is the code well-structured, readable, and reusable? yes
    • Does the solution differ considerably from the design? No, but I see there are a few things missing:
      • The "Learning" pill is missing the border
      • There are no hover, active state styles applied (check figma file)
      • The person avatar should be black&white (I miss this too)
      • The title is moving funny while changing the browser dimensions
    0
  • P
    gajbos99• 170

    @gajbos99

    Submitted

    What are you most proud of, and what would you do differently next time?

    Feeling more comfortable with css.

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

    /

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

    /

    Qr Code Component

    1

    P
    Gonzalo Tejada• 130

    @vgt3j4d4

    Posted

    • Does the solution include semantic HTML? yes

    • Is it accessible, and what improvements could be made? I see you're using pixels instead of relative units. I believe it would be better using rem/em https://www.freecodecamp.org/news/css-units-when-to-use-each-one/#:~:text=It's%20a%20good%20idea%20to,This%20helps%20with%20accessibility.

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

    • Is the code well-structured, readable, and reusable? yes, and since you are using sass, I believe using additional partial files for css reset, variables, etc. will help reusability (although this is pretty simple but I helps for future more complex websites) https://www.w3schools.com/sass/sass_import.php#:~:text=Sass%20Partials,are%20called%20partials%20in%20Sass.

    • Does the solution differ considerably from the design? no

    0