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
    Thomas Dimnet• 250

    @tdimnet

    Submitted

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

    Hey, thank you for reading this!

    I started to use clamp css function. For a long time, I also used pixels and pourcentages instead of REM. I'm not fully happy about my skills even though it looks okay. I'm probably going to follow one or two courses before reworking on my projects.

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

    Most of the time, my challenge are related to choosing the right unit and how to display the more pixel perfect with the less amount of CSS.

    I read a few stuff on web.dev: it's a great ressource but I'd like to find other ressources.

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

    By giving me advice about my use of CSS unit. Should I use for example ch instead of pourcentages, em, or rem?

    Thank you for passing by, Tom.

    Neil• 140

    @neildeo

    Posted

    Hi Tom, think you've done a great job here and shouldn't be too hard on yourself! The design looks great at desktop and mobile sizes (although you might want to change it at intermediate sizes as the cards look a bit strange on screens of ~1000px, but that's a matter of opinion...).

    Regarding your question about units, I can give some advice but only as another newbie! My understanding is that for any text element or container of a text element, it's best practice to use rem. This is because individual users can edit the text size in their browser by changing the pixel/point value of 1rem. So text on your page needs to be sized in rem, so that users can customise its size to their preference. As a consequence, any block element containing text should also be sized in rem so that your layout looks consistent regardless of the font size selected by the user. Don't forget that you can set the pixel value of 1rem in the :root selector (it defaults to 16px I think): so you can set your whole page up just using pixels, and then at the end go through and convert those all to rem by just dividing by the value of 1rem!

    While the text itself should be sized using rem, I like to use the em unit for top padding and margins (NOT inline!), as by setting a single value of em (for example in the body CSS selector), the spacing looks good (i.e. big headings have more space around them than small paragraphs). I like to use ch for setting a width to a container which holds text which I know I want to take up a certain number of lines (in fact, usually a min or max width, so the container can be automatically responsive within certain screen sizes). Percentages are useful when you know how big you want something to be relative to its parent, e.g. you have an image which you want to take up half the width of its container. I also think it's absolutely fine to set image dimensions in pixels: the raw file probably has an intrinsic pixel width, and they are usually decorative elements anyway, so it doesn't matter too much if the user can't enlarge them. But you may want to consider how they affect your layout: in order to keep the layout consistent, if everything else is sized with relative units (rem, em, ch, ...) then the images also need to use these units to stay in sync with the rest of the page.

    As for resources, I really recommend Kevin Powell's videos on YouTube, especially this one on responsive design. Hopefully it will help you understand how to make use of natural CSS behaviours to easily make responsive pages with minimal code! I really recommend his other videos too, they've been incredibly useful in my journey of learning HTML and CSS.

    0
  • Neil• 140

    @neildeo

    Posted

    This is a really great reproduction, both the desktop and mobile versions are very close to the design. If I had one critique it would be to make a design which scales to intermediate sized screens (400-700px), as currently on such devices the extra screen real estate is not being used productively.

    The CSS is formidably organised and very easy to follow.

    0
  • Devs-advocate• 180

    @Devs-advocate

    Submitted

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

    Most proud of learning about list styling and how tricky it can be. Fairly happy with how well my solution resembles the design. Next time I'll be better prepared based on the experience I've gained from this challenge.

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

    Styling ordered and unordered lists, and there markers. My online research first showed me I needed to remove the bullet marker and create my own to properly replicate some styles, or simply style the marker that was there. If I wasn't able to style the marker directly, then I deployed flexbox and created a marker in the html using the unicode representation. This was due to the marker not centering with the list that was wrapping to different lines.

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

    The numbers for the Outfit font didn't match the design. I'm not sure why. I'm not sure the approach FEM expected me to use to style the list. The removal and recreation of bullet points using list-style-display: none; or direct styling of li::marker?

    Neil• 140

    @neildeo

    Posted

    This is a great piece of work which matches the design almost exactly, well done! Brilliant spot to notice that the bullet points in the Preparation section should be centred, and great job getting that to work, I did not notice that at all when doing the challenge myself.

    There are some easy points to improve to get a better visual match: some of the font weights are too heavy (800 instead of 700; you actually defined variables for font weights but haven't used them!), and the h1 should be the darkest grey colour.

    One other thing to maybe focus on in the future is making sure the design looks good at a range of sizes: while this solution is a near perfect match at the specified screen widths, it doesn't resize well for intermediate sizes (or sizes below 350px, which I think exist on some folding phones now?). One way to get around this is to set the container width to 100% for smaller screens using a media query, instead of specifying a pixel width.

    Finally, I also got frustrated by the number 1 not matching the design. I think it's something to do with the font design at different weights but I could be wrong. In any case, I just made peace with it for this challenge. In the real world, if it bugged me enough I would just use a different font!

    To conclude, again great job on the list (and table) styling, it's really clean and your code is nice as well. The semantics of the HTML are strong and the code is well organised. Keep it up!

    Marked as helpful

    0
  • Neil• 140

    @neildeo

    Posted

    Really nice job Martin. Particularly like your CSS reset, I'll be stealing it for myself! The organisation of the CSS is also great.

    The only improvement I can think of is to make your .container div a main element, to improve the semantics of the page.

    0
  • josh-conde• 190

    @josh-conde

    Submitted

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

    osjiqosiqw

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

    odjwoiwdjqowidjoqjodwqo

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

    foiwjfiowjefiowjfeioj

    Neil• 140

    @neildeo

    Posted

    The content and style look great! The layout could be improved by adjusting padding values and the line height of the title.

    1
  • 4lzaaa• 10

    @4lzaaa

    Submitted

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

    I would like to add more functionality/ learn how to make static pages more functional using javascript

    Neil• 140

    @neildeo

    Posted

    This is a great attempt! It could be improved by a couple of quick things:

    1. The title should use the specified grey-blue colour, not black
    2. Adding margin-left to the img class has actually de-centred the QR code (I think removing this declaration will put the image in the correct place)

    Apologies, I don't know anything about JavaScript.

    Marked as helpful

    0