Skip to content
OverviewSolutions
0
Comments
139

xNyfPtx

@xNyfPtx1,260 points

#myself { behavior: repeat(25666, eat code cat sleep); }

I’m currently learning...

CSS, JS

Latest solutions

No solutions submitted yet.

Latest comments

  • Ricardo Alberto Carrero Bator•160
    @rc-0105
    What are you most proud of, and what would you do differently next time?

    Im proud that i could center correctly the main container, also doing the hover and the box shadows make me be more aware of the things that could be done.

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

    I didnt know how to make the main container flex work the right way, all the content where overflowing so i had to see some tutorials to get in the mood.

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

    I am new to this kind of development so if you have comments ill be greatfull to know.

    Blog preview card solution

    1
    xNyfPtx•1,260
    @xNyfPtx

    CSS

    1. Use a css reset. You shouldnt really be manually applying box-sizing: border-box on each element. I reccomend using Josh Comeau's or Andy Bell's css reset for this.
    2. Never ever set font-sizes in rem. See why
    3. Consider using the rem unit in place of the px unit. The rem unit is generally better since it scales with the user's set font-size in the browser's setting. You would generally use px for decoration like outlines, borders, shadows, filters and etc. There's more to it but I won't dive more deeper than that since the effect is very minimal.
    4. Never ever set fixed-widths. Fixed-widths are like width: 365px. They arent responsive most of the time and you should really be using max-width instead. The only exceptions I see are small icons and profile pictures.
    5. No need for the .blog-card wrapper, just apply the styles directly on the body element.
    6. No need for the sections either, just use divs instead. It just adds more semantic noise. You would typically use sections for larger stuff of a page aswell
    7. Wrap the .blog-card-link class inside a <h2>. You could also wrap it inside an h1 but it a real site, there would be an h1 already here.
    8. No need for the alt text on the profile picture image, its decorational anyways.
    9. Replace the .attribution div with a <footer> tag instead. About the footer tag

    Update your code and I will continue with more feedback later.

    Marked as helpful
  • Daniil Churikov•80
    @ddosia
    What specific areas of your project would you like help with?

    I really dislike how I did the Nutrition part. Ideally it's simple 2 column grid with lines in between, but it was difficult to achieve it. I though it has to be ul (since this is a list), but it doesn't play well with grid. Also it was difficult to align items to beginning of cells and add borders.

    Recipe page with tailwind-css

    #tailwind-css
    1
    xNyfPtx•1,260
    @xNyfPtx

    Hi @ddosia, your code and solution looks good but it has some few issues. Don't worry though as these issues are very easy to fix and are quite common aswell.

    My Tips and Feedback

    1. Put the challenges in their own Github repositories instead of putting all of the in one Github repo. It will take longer to clone and and it might take longer aswell to commit and push in the long run.
    2. Consider self-hosting your fonts instead of linking to Google Fonts. Using Google Fonts is bad for performance and violates GDPR laws which is an issue on larger websites as it may lead to lawsuits. I use this handy tool for helping me self-host the fonts.
    3. Remove the "mY" prefix on the colors. I don't see the need for it and it just makes things more verbose.
    4. You can use global styles instead of setting a utility for each element since this project is mostly text-based. Like using @apply for the styling the headings and the paragraphs.
    5. Use a table for the Nutrition section. See more about it here
    6. Wrap the article tag inside a main tag. The main tag signifies the primary content.
    7. Use the hr tag for the borders on the end of each section.
    8. No need for the min-w-80 on the article tag. I don't see why you would need margins there and instead you should use padding on the parent element instead

    That's pretty much all. Have fun coding!

  • Shaian•80
    @zshaian
    What are you most proud of, and what would you do differently next time?

    Next time, I'll add a loader while fetching the data. :)

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

    I'd like to ensure that all country flag images display at the same size in both the country list and details view. Some flags have different aspect ratios, and I don't want to set a specific size, as that might crop parts of the flags.

    Rest Countries ( React, Tailwind )

    #react#tailwind-css
    1
    xNyfPtx•1,260
    @xNyfPtx

    Try CSS subgrid for this. I've tried setting aspect-ratios on the flag images aswell but some of there either are distorted or cropped. Setting height / min-height does the same aswell.

  • Joshua Olanrewaju Ikulayo•220
    @Saviourjr
    What are you most proud of, and what would you do differently next time?

    Happy to be a part of the Challenge and been able to complete it.

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

    Hmm! Firstly it was more of a task! Had to wrap my head around to finally come up with the best idea.

    The challenge i'm having is.. i get to guess the dimensions used! i don't know if it will always matches the preview

    Product-Review

    1
    xNyfPtx•1,260
    @xNyfPtx

    ㅤ

  • P
    David Pokrajac•530
    @DavidPokrajac
    What are you most proud of, and what would you do differently next time?

    This project was created using CUBE CSS methodology. I tried to separate CSS styles into Composition, Utilities, and Exceptions folders. Also, I worked on making it more accessible.

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

    1.) When menu sidebar appears for mobile devices, I would like to know how the Menu Close icon, in the upper right corner, gets focus first. Also I would like to get some tips on how to improve accessibility even more. 2.) Should I give role attributes to every div and span? Also, do the nav and ul tags also need role attributes?

    Responsive and accessible Grid Layout made with CUBE CSS methodology

    #accessibility#cube-css#next#typescript
    2
    xNyfPtx•1,260
    @xNyfPtx

    No, you rarely only need to use the role="" attribute. Navs and uls are already semantic but I've heard about of using role="list" on ul and ol because Safari do some wild stuff. Divs and spans are only there for presentation but there are some cases where you would need to use a role attribute for it like a tablist. Check this and this

    Marked as helpful
  • Dominic•170
    @Dpal88
    What challenges did you encounter, and how did you overcome them?

    Customizing the ordered list numbers, but I was able to find a simple solution using css and the ::before pseudo element.

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

    I would appreciate any feedback on ways that I can make my html more semantic if at all possible. Thank you!

    Recipe Page - HTML & CSS

    2
    xNyfPtx•1,260
    @xNyfPtx

    Hi @Dpal88, your solution and code looks good but it has some few issues. Don't worry though as these issues are very easy to fix and is a common mistake when learning. "Mistakes are a part of learning".

    My Tips and Feedback

    1. Consider self-hosting your fonts instead of using Google Fonts. Google Fonts violates privacy laws such as GDPR which can be a problem on larger sites due to lawsuits and it it also slower. I use this handy resource for helping me self host my fonts.
    2. Use the ::marker pseudo-class to change the list styling instead of using ::before.
    3. Use proper semantic HTML. Replace the .container div with a <main> tag instead. The <main> tag signifies the main content of a site and each site should have atleast 1 main tag. There is no need for the <header> or <section> tags as there are already headings. Replace all of the <h3> tags with an <h2> tag, self explanatory since the headings are the same. Also, the .attribution div should be a <footer> tag instead. Use the <strong> tag instead of a span for the bold text.
    4. Use a CSS reset. What a CSS reset does is that it makes your styles look more consistent across devices and browsers since it removes all of the browser default styling. I recommend Andy Bell's or Josh Comeau's CSS reset for this. For this type of project where there are alot of text, use Andy Bell's CSS reset instead. You should also use a CSS reset for all of your projects. You don't have to do anything special since you only need to copy and paste the CSS reset inside your code.
    5. No need for counter-increment for this.

    That's pretty much all and refactor your code after this and I will continue with feedback.

    Marked as helpful
View more comments