Skip to content
OverviewSolutions
18
Comments
10
Andrew
@timshandrew

All comments

  • Professor_Pantss•140
    @KabeloMaps
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully integrating Tailwind CSS into the project, despite it not being a requirement. This challenge allowed me to learn and apply a new technology effectively. Next time, I would plan my workflow to include better initial setup for custom colors and avoid repetitive classes by utilizing Tailwind’s @apply directive earlier in the process.

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

    The main challenge was managing the learning curve of Tailwind CSS, especially in configuring custom colors and understanding its workflow with the CLI watch process. I overcame these by reading the documentation thoroughly and experimenting with the config file and build process until I gained confidence. Additionally, resolving conflicts between local and remote Git branches required careful use of Git commands and understanding version control concepts.

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

    I would appreciate feedback on optimizing the Tailwind CSS build for production, particularly how to effectively use purge to minimize file size. Also, how to implement the hover states for the main components

    Blog-Preview-Card

    2
    Andrew•420
    @timshandrew

    And with regards to the hover states, you can use what Tailwind calls 'variants' for these.

    A variant is of the form hover: bg-red. The 'variant' is the hover: part. The utility following the variant condition is applied only when the condition is met. The hover condition is met when the current element (the element you are applying the utility class to) is hovered.

    Many other variants exist too though. You can even set up custom variants so a style is applied only when the given condition is met.

  • Professor_Pantss•140
    @KabeloMaps
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully integrating Tailwind CSS into the project, despite it not being a requirement. This challenge allowed me to learn and apply a new technology effectively. Next time, I would plan my workflow to include better initial setup for custom colors and avoid repetitive classes by utilizing Tailwind’s @apply directive earlier in the process.

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

    The main challenge was managing the learning curve of Tailwind CSS, especially in configuring custom colors and understanding its workflow with the CLI watch process. I overcame these by reading the documentation thoroughly and experimenting with the config file and build process until I gained confidence. Additionally, resolving conflicts between local and remote Git branches required careful use of Git commands and understanding version control concepts.

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

    I would appreciate feedback on optimizing the Tailwind CSS build for production, particularly how to effectively use purge to minimize file size. Also, how to implement the hover states for the main components

    Blog-Preview-Card

    2
    Andrew•420
    @timshandrew

    Hello,

    I had not heard about having to purge unused CSS styles using purge before. Looking into it a little, it seems like this was a feature of Tailwind v2; the way it works in v3 is different now.

    From my understanding, Tailwind used to generate a massive amount of styles, and the dev had to manually set up a purge process to prune any unused ones.

    Tailwind v3 is the moremodern version and they by default now use a mode called JIT (Just in Time) compilation for the styles. This results in only the referenced styles ending up in the build. By this, I mean Tailwind scans your source code and checks for class names which are associated with a Tailwind utility. Out of all of the possible utility classes it knows about, it puts only the ones you have used in the final CSS build - so you don't have to manually purge anything.

  • DavidanKord10•40
    @DavidanKord10
    What are you most proud of, and what would you do differently next time?

    I'm proud of nothing, this project just showed how weak I am at programming right now.

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

    The most problematic challange was to center the elements, I tried to find the problem for a lot of time, then I just asked the problem to chatgpt, obviously I didn't use the chatgpt's solution, I only asked the problem.

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

    Is there any simpler and faster way to center the elements other than the way I wrote? And I found it difficult ti adjust the width and height.

    Flexbox, html, css, google fonts

    2
    Andrew•420
    @timshandrew

    Hey David,

    Good job. Don't stress about not understanding everything to begin with - just take everything you learn as a small win.

    In regards to the trouble you're having with setting the size for elements, I'd suggest only setting a width for the image. By default, if you set a width, it should retain the same aspect ratio and so the height should be adjusted automatically so it remains a square. That would fix the main difference I noticed between your implementation and the design - the image is stretched currently.

    The way you've centred the div is spot on I'd say. The standard way to do such a thing these days is to give the parent container a display of 'flex' and then use 'align item: center' and 'justify-content: center'. This will centre it to the parent container. If you want it centred in the middle of the screen, you need to be sure that the parent container is the size of the screen then. The parent container of the div is the body element and so you need to make this the size of the screen. By default I believe the body is always 100% width. The height is slightly trickier though because by default it will have a height large enough only to contain its child elements. A way to make it the full screen height (but also allow it to grow larger if needs be) is to set (min-height: 100vh). The vh unit stands for 'view height' and will always be equal to 1% of the screen height.

    Hope that helped somewhat and wasn't overwhelming :)

    Marked as helpful
  • Alex•120
    @CaplexW
    What challenges did you encounter, and how did you overcome them?

    For some reason, the fonts on my page are displayed differently than they did in the design photo, despite the fact that I used the same fonts and weight that were given in the style guide. I don't know why and how to fix it.

    Responsive recipe page

    1
    Andrew•420
    @timshandrew

    Nice work.

    The font looks like it has some opacity on it - that'd explain the difference you can see. You can fix it by either changing the alpha value of the font colour, or changing the opacity property of the container.

    Marked as helpful
  • Andrew•420
    @timshandrew

    Hi Diego,

    Nice solution, it looks great.

    Looking through your solution, the only thing I could think of which might help in future is: for the background image on the purple card, I think it's easier to use the background image property. This also has the benefit of keeping the content of your page separate from the styling.

    Hope this helps!

    Marked as helpful
  • Andrew•420
    @timshandrew

    Hi,

    Nice work! I looked through your solution to try to find some things to improve on and came up with these few things (although they are a bit nit-picky):

    If you look at your Google Fonts import, you've actually listed a bunch of fonts to import (the ones from the previous challenges). I noticed I'd done this too. Google Fonts has a 'basket' of fonts which isn't cleared upon refreshing the page. I looked into this and modern browsers should avoid downloading imported fonts which haven't been used, so it's not really a problem but worth noting I suppose.

    I would have personally made a CSS selector the 'card boxes' in general. This would have saved you repeating a large amount of properties for each of the properties. It is really only the grid information which is specific to a given box.

    Hope this was of some help!

    Marked as helpful
  • Andrew•420
    @timshandrew

    Hi Diego,

    Your solution looks great. Some things I think you could improve on though are the following:

    You have styled the "Perfume" heading by directly adding spaces and capitalising the letters in the HTML. There are properties in CSS to do this: 'letter-spacing' and 'text-transform'.

    I am not sure if it is a result of using React, but I think you could choose closer-matching HTML elements. For example the table row you have used to contain pricing information, it's not really tabular information and so a simple div with either flexbox or grid might have been better suited. The main argument for this approach would be accessibility, as a screen reader announcing a table is a little bit inaccurate.

    Hope this was somewhat useful.

    Marked as helpful
  • Andrew•420
    @timshandrew

    Hi,

    I'm not sure where I got the shadow on the QR code in all honesty lol. I put one on my solution but I think I meant to put it on the whole card itself. Looking at it now, there seems to be a subtle shadow at the bottom of the card, so it looks as if it is raised from the page slightly.

    Either way, it's just one of these: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

    If you Google 'css box shadow' there are websites which allow you to visually tweak a box shadow and then copy paste the css over.

    Sorry for the confusion.

    For the centring, I was doing this:

    body { height: 100vh; display: flex; align-items: center; justify-content: center; }

    Marked as helpful
  • Andrew•420
    @timshandrew

    Hi! Nice work. Just as some positive criticism, I would say you could perhaps look at choosing HTML containers with closer matching semantics. For example you used an unordered list for the nutrition information at the bottom of the page. You have created a table-like layout using an unordered list but you could have used an actual HTML table. This would make it more accessible for screen readers, as well as arguably making the HTML easier to read.

    Another tip might be to look into using variables in your CSS for things such as the colours. They are arguably not necessary here but it might make the code more readable if you are using the same colour in multiple places (for example, seeing the colour variable 'main colour' in multiple places, it is easier to recognise that those elements use the same colour, as opposed to seeing just a hex value e.g. #FF2B11). Of course there are other benefits, too.

    Hope this was of some help at least.

  • Andrew•420
    @timshandrew

    Looks good to me. If I had to nit-pick a few things:

    • Missing the shadow on the QR code image.
    • The card isn't vertically aligned with the page and so does not stay centred when you zoom out. Consider making the body element 100% of the viewport height and using flexbox to vertically align, rather than using top-margin as you have.
    Marked as helpful