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
    Will• 310

    @wansmth

    Submitted

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

    I managed to complete the project with few problems. Next time, I would hopefully spend less time on those few problems having gained experience from them.

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

    Three challenges here:

    1. Background image for the first card. I had never used these before. The effect was achieved using a few CSS properties which were easy to find using MDN.
    2. Layout of the student information (image, name etc). I resolved this by removing the default margin from the paragraph elements so I could put the grid cells closer together, and then adjusted their distance using row-gap.
    3. The most confusing problem occurred when I gave each of the cards a grid area. My idea was to give the cards a grid area in their styling but only use the grid area later in a media query. Before I added the grid areas, the cards sat nicely in the single column I created, each getting an automatic row. After giving the grid area (but not using it), the automatic rows did not work and all of the cards sat on top of each other.

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

    My problem relates to point number 3 above. It seems it would be nice to give an element a grid area with the intention of using it only later in a media query. This however seems to have stopped the automatic assignment to rows happening. I tried also assigning grid-auto-rows: auto and this fixed it but then broke my desktop layout when I wanted to use the grid areas in a media query.

    My question is: am I right in thinking that once a grid-area is assigned, the layout must be done using the grids areas? Or was something else causing this? My solution was to assign the grid areas only in the media query, but if you look at my CSS, it seems better to put the area names in the styles before the media query.

    Thanks

    Responsive Card Layout using Grid

    1

    f1r3• 120

    @f1r3place

    Posted

    yo, regarding the grid:

    you can set the grid-template-areas property in the grid by default to

    'daniel'
'jonathan'
...

    so that the layout works and then override it in the media query. that should work!

    and if you set the grid-areas, then yes, the layout must also use them because grid-area is responsible for the positioning in the first place (if i understand correctly)

    Marked as helpful

    0
  • Francesco• 270

    @FraCav99

    Submitted

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

    Pretty happy with the overall result. This time I try to split up the layout into different boxes to easily oraganize my markup.

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

    Nothing in particular

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

    Maybe I've absued a little bit Grid, but any suggestion is highly welcome! :D

    Four Card Feature Section (only HTML & CSS)

    1

    f1r3• 120

    @f1r3place

    Posted

    hi there! congratulations on completing the challenge

    here's some feedback:

    • love the semantic html and all the accessibility features, kudos for that!
    • but I don't really agree with the usage of <article> for cards. here's what MDN says about the <article> element: The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). I don't think the cards are self-contained compositions, because without the context of the website they don't make much sense
    • the css is quite readable, love the use of custom properties
    • it's great you've added another breakpoint besides the one shown in the design, makes the website look good on every screen size

    I guess that's about it. good luck on your next challenges!

    0
  • Gabriel Nascimento• 60

    @GabrielNP96

    Submitted

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

    I'm happy to see the results, especially since I used a mobile-first approach. However, I would research more about using images on the web before doing this project again or a similar one.

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

    Well, I definitely didn't encounter major difficulties. I only had some trouble using the font from Google Fonts, but in the end, I downloaded them and used @font-face.

    Product Preview Card

    1

    f1r3• 120

    @f1r3place

    Posted

    hi there! congrats on completing the challenge!

    here's some feedback:

    • for dynamic images (different ones on desktop and mobile) use the <picture> element. you can read more about it here
    • the proper fonts couldn't be loaded, for some reason.
    • also, when using @font-face i recommend using local in the src section, so that if the user has the font already they don't need to download it
    • i love how you did the switch with the flex on the main element!
    • in general your code is very compact, which makes it easy to read (appreciate that!)

    that's about it. good luck on your next challenges!

    Marked as helpful

    0
  • jordancareyui• 80

    @jordancareyui

    Submitted

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

    I'd like to think this is pretty clean for not using Figma. Ideally, I could push it to be a little more accurate, but then I'd have to generate another screenshot and I don't want to run out of those... I wasn't thinking mobile-first though since the other challenges haven't required much of that type of thinking, so I'll try to approach things from that mindset in the future.

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

    I already know HTML fairly well, so instead of focusing on writing semantic HTML, the challenge was more like, "learn how to style tables and write a media query"... I ended up taking a few lines from this person's CSS (https://www.youtube.com/watch?v=hbgGn96daIk), and asking for help on the Frontend Mentor Discord.

    Recipe Page

    1

    f1r3• 120

    @f1r3place

    Posted

    hi there! congratulations on completing the challenge!

    here's some feedback:

    • the code is very much readable, it's great it's broken down into sections!
    • there are some issues with the html:
    1. please add alt text to images! if there's only one thing to do for accessibility, that would be it.
    2. please don't use <b> tags as they carry no semantic meaning. instead you should use the <strong> tag in this case to emphasize text.

    everything else is fine as far as i can see.

    • it's a bit weird you've only added one color as a custom property, you can just add every other one used there to make your life a lot easier
    • i am not sure about this one, but instead of using display: grid; on your <tr>'s, you could use border-collapse: collapse on the table for borders to work
    • in the design all the things are flush on the inline sides (left-right), but in your implementation some things have indents

    that's about it. good luck on your other challenges!

    0
  • f1r3• 120

    @f1r3place

    Posted

    hi there! congratulations on completing the challenge!

    here's some feedback:

    • love that the code is commentated, makes it a lot easier to read!
    • don't really dig the tailwind style classes though, especially because they're mixed with normal css classes, it's probably best to choose one or the other
    • this website is basically a fixed size card, so a @media query isn't really needed

    best of luck on your other challenges!

    0
  • f1r3• 120

    @f1r3place

    Posted

    hi there! congrats on completing the challenge! here's some feedback

    • i love how close you got the spacing to the design!
    • there's some issues with the formatting of the CSS, you could use the Alt+Shift+L keybind to autoformat in VSCode if you're using that, probably possible in all other editors too
    • instead of translating the hsl colors into hex values by hand it would be wiser to use them directly (maybe as custom properties?)
    • you didn't import the actual "abstract illustration" image, instead writing the spec as the src into the <img> tag. you could either write the actual location of the SVG, or copy the code from the file directly into the html/css

    that's about it. good luck on your challenges!

    0
  • f1r3• 120

    @f1r3place

    Posted

    Here's some feedback:

    • you could probably do without the item div, using something like <main> instead.
    • instead of using class=bold, you could go for a heading element like <h1>
    • you don't need to declare a white border of a white element, because it has that by default.
    • you could just set the max-width of the image to 100% in the CSS instead of adjusting the size manually
    0