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
    Sani development• 80

    @sepehrsylvanus

    Submitted

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

    • Using css variables
    • Nice design

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

    • Review HTML CSS

    Social links

    2

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    Looks nice. Some suggestions.

    • Every page must have a <main> landmark element wrapping the main content of the page.
    • The attribution should go inside a <footer> landmark element, which will be outside of the <main>.
    • I would use a <h2> for the user's name here. It acts as a heading for the content that comes after it.
    • Use rem for font-sizes. If the user change their browser font size, the text in your site won't react to it because your font-sizes are in px. If you have the font-sizes in rem, text in your webpage will scale according to the the users preferred browser font size. I would use rem for max-width too.
    • Do you need the div that wraps the <p> element which contains the user's bio? I think it's not needed. <p> element alone is fine. Try to keep the HTML simple.

    Marked as helpful

    0
  • Itoro (Celine) James• 160

    @CelineJames

    Submitted

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

    I am proud of the fact that i am getting comfortable using CSS grid. i am really proud of that, i tried using the mobile first design technique and i prefer that next time i would try to make use of Sass technique.

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

    Nothing much.

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

    well, i am still learning and practicing my efficiency with grid layout.

    CSS grid layout

    1

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    Looks nice. Some feedback.

    • Heading levels should go in order. If you used a h3 for the name, you shouldn't be using a h1 for the testimonial text that comes after the name.
    • You should not have multiple h1 elements in a web page. h1 is usually the top most heading that describes the content of the page. In this design you actually don't have a h1. But you can create a visually-hidden element and give that a h1 if you want.
    • Looking at how you have used the heading levels, i feel like you are deciding the heading level based on how they are styled in the design. You should not be doing that. You should decide what elements to use based on their semantic meanings. Not styles. After that you can use CSS to style the headings however you want.
    • I would use a h2 for each name and then use <p> elements for the testimonial text. I would also wrap the testimonial <p> elements in a <blockquote> element.
    • I think it would be better if you give the container a max-width in rem, so that the grid items doesn't keep increasing in size on larger screens.
    • It's better to use rem for font-sizes, media queries and max-width. If the user changes their browser font size, text in your site won't respect that if the font-sizes are defined in px. If you have them in rem, the text will scale accordingly with the user's preferred font size. I usually use rem for all values, not only fonts. But it's just preference.

    Marked as helpful

    0
  • Darkstar• 1,000

    @DarkstarXDD

    Posted

    Looks nice. I have couple of feedback.

    • The <header> or the banner role is usually used to wrap content that is common across multiple pages of a website. Usually you see it at the top of the webpage wrapping the site logo and a navbar. I would not use a <header> in this challenge.
    • What you need is a <main> landmark element. Every web page needs a <main> element wrapping the main content of the page.
    • The <nav> element is for a list of links that navigate within the site. Not for links that navigate to outside websites such as social media sites. In this case having the links inside a <ul> is enough.

    Marked as helpful

    1
  • Rgeb1• 110

    @Rgeb1

    Submitted

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

    I'm happy with the result, I don't think I'll do anything differently at this stage, maybe with more practice I'll have better methods.

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

    Right now my biggest challenge is understanding how to use git and GitHub. I don't use the terminal much, so it's something that I need to start doing a lot more.

    Responsive social links profile card using HTML and CSS

    1

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    Looks good. Some suggestions.

    • The <nav> landmark element is intended for links that navigate within your site, not for external links like the social links. Usually you see the <nav> at the top of the page inside the <header> along with the brand logo. Having the social links inside a <ul> with <li> elements is enough.
    • I see that you are using rem for font sizes, padding and margins. Why not use rem for media queries and max-width as well? I usually use rem for everything. So if the user changes their browser font size everything will scale accordingly.

    Marked as helpful

    0
  • Yulia• 320

    @YuliaLantzberg

    Submitted

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

    This challenge forced me to learn and understand grid and flex layouts better, as well as the differences and use cases for them.

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

    First I wanted to use flex layout to build the structure. I didn't find how to make it with flex so I moved to grid. And that made me understand that flex layout is more useful for dynamic and changing designs but grid layout is good for the structure.

    Responsive four cards page using grid and flex layouts and media query

    2

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    Looks good. But i see some foundational mistakes you are doing, that are usually fixed on much more smaller challengers.

    • Avoid setting fixed widths and heights on elements containing text. Fixed widths can prevent text containers from resizing properly in smaller screens, leading to overflow issues. Instead use a max-width in rem. This will make sure the container won't grow too large, but still will allow them to resize as needed when there is no room in smaller screens.
    • Avoid using percentage values. They give unpredictable results. One exception would be using something like width: 100% if you want an element to take up 100% of it's parents width. Other than that I usually use rem every where.
    • When the screen size shrinks, text wraps into new lines causing the container to increase its height automatically if needed. If you've defined a fixed height, the container can't adjust, leading to text overflow. So don't set a height on text containers. The browser will decide the height based on font size, padding, margins etc.
    • So the cards in this project shouldn't have any fixed widths or heights. You only need a max-width in rem on each card, or on the entire grid. I suggest you go through your QR code component challenge again and remove the fixed widths and heights set there too.
    • There's no need to change the font size on the html element. Most of the time you never need to change anything on the html element. That's just asking for trouble.
    • Start developing mobile first.
    • You don't need this many media queries. If you are using this many then that's a sign you are doing something wrong somewhere. Most of the time you will only need 1 media query for the desktop layout, and sometimes 2 if there's a different layout for medium size screens (tablets).
    • Avoid using ids to style. Always use classes to style. In this project, you can give each card a second class name like card--supervisor, card--calculator etc. to style individual cards.
    • I feel like the icons in this design are decorative images which brings no value for screen reader users. For decorative icons you keep the alt attribute empty like this. alt="".
    • No need to wrap the <img> in a <div>. Try to keep the HTML simple as possible.

    Marked as helpful

    0
  • Robel T. Hawelti• 100

    @Rapbit27

    Submitted

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

    My understanding of css grid is even better with this challenge. Positioning the cards accordingly was quite satisfying.

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

    Please check out my code and give me feedback on how to better setup the grid.

    Testimonials Section Grid solution

    1

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    Looks good. Couple of suggestions.

    • I don't think the user's name and the verification status are headings. Definitely not <h1>s. You should only have one <h1> heading for a page, which will be the primary text that explains the content of the page. It's better to have the user name and the status as <p> elements.
    • I would always use rem when specifying the max-width and avoid using percentage values for max-width.
    • Is there a need for the grid-auto-rows: minmax(10rem, auto)?

    Marked as helpful

    0
  • Roberto Rojas• 90

    @roberto-rojas-dev

    Submitted

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

    I loved the style of this card. It was a fun challenge to code.

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

    I was trying to find a way to set the spacing for all the different elements using fewer lines of code. However, it seems that the distances between some of them are different and unrelated, so I had to set different margin-bottom values for multiple elements.

    Is there a better approach for this? Considering that using something like gap or margin-block wouldn't give the desired result since each distance is slightly different.

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

    I would really like to get feedback on my use of semantic HTML tags. I’d also appreciate any advice related to good CSS practices.

    Thank you so much for reading. I hope you have an amazing day/night 💜✨

    Blog preview card component

    1

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    Looks good.

    • The spacing between the elements are same in this design. So you can use the gap property without any issues. If somehow the spacing was different, and the difference was like 1px or 2px i would ignore it and still use the gap property. Sometimes designs can have inconsistencies. However, in this design the spacing is same. I checked the Figma file.
    • I see you are using values like 16.8px, 15.4px. You most probably never will use broken values like these in actual production. 16.8px is 16px. I assume you don't have access to the Figma file and you may have guessed the values. It's totally fine. Just round the value to the nearest value you feel like.
    • The "HTML & CSS" is a heading in this design. It's an <a> inside a heading.
    • The text should be in a meaningful element like a paragraph tag <p>. Text alone inside a <span> or <div> is not recommended since neither of them are meaningful elements. You can replace all those span tags with p tags.
    • In this design the whole card should be clickable. Not only the "HTML & CSS" part. Try to make it to work. You will need to use a pseudo element on the <a> for that.

    Marked as helpful

    0
  • AReactDeveloper• 340

    @AReactDeveloper

    Submitted

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

    Hello again dear community in this project i used scss preprocessing i didn't wanna use just vanilla like previous one i wanted to learn something new every challenge from this website i tried to get this as pixel perfect as possible though sometimes that gave me a headache considering its very hard to calibrate between margin and padding i know basic box model stuff but I've always struggled with that if you have any tips please leave them down below ill make sure to mark your comment as helpful comment if you care to spare time to review my code help me out with my mistakes and stuff i appreciate that a lot also thank you much for passing by

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

    trying to get pixel perfect design while calibrating width and height with margin and padding I don't think I overcame that

    almost pixel perfect social links profile using SCSS CSS on steroids'

    3

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    As someone has already mentioned it here, I too would suggest you to stop focusing on "pixel perfect". Often, you can only achieve it for very specific screen sizes using bad CSS techniques. Instead what you should focus is developing a website that is accessible and looks good on all screen sizes.

    There is a small improvement you can do in your code. You are using min-width for the .profile container, causing it to overflow on screens that are below 370px in width. You can see this if you resize your screen in the browser dev tools. You should develop a solution that looks good on screen sizes down to 320px. min-width is not needed for a container. What you need is a max-width so that the container won't keep expanding forever as the screen size increases.

    0
  • Sunil• 130

    @SunilParbhoo

    Submitted

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

    I am proud I was able to complete this project as close to the design as intended. I was glad I was able to closely replicate the desktop, mobile, and active states of the designs. The only part of the challenge I had issues with was changing the font-sizes when going from desktop to mobile, without the use of media queries. I am sure the solution to this is something easy I overlooked, as I attempted using the new CSS feature container-name and @container (max-width ), however I was not successful. Any pointers on that part would be greatly appreciated.

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

    Aside from the remaining challenge mentioned above regarding the font size changing, I was glad to overcome an issue with resizing the svg image in mobile vs desktop by utilizing the object-fit property.

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

    How can I make font-size changes more fluid yet still specific to a size based off a container (without using a media query)? For example, if the card size in desktop has a width of 384px and a paragraph text is 16px, then when the card shrinks to 327px, the text shrinks to 14px?

    Blog Preview Card

    1

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    • Have you checked clamp()? It is exactly what you need here.
    0
  • Reuel VJ• 80

    @rvj1

    Submitted

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

    I'm happy that i leaned a lot, but still got a lot to improve.

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

    I encounter problems in using grid and I couldn't overcome them properly

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

    i would like help with the grid section. In this project the 1st box and the 4th box should be in the middle but I couldn't do it.

    four card feature | Responsive design

    1

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    • You are almost there. I will give some help. The first box should start at row 2 and end at row 4. Same with 4th box. But you also have to define row spans (row start and row end) for the two middle boxes as well. Try to find the row start and row end for those two. You will also have to reduce the height of your rows a bit in your grid-template-rows, which is currently at 200px.

    Marked as helpful

    0
  • Alexander Romero• 180

    @AlexanderTejedor

    Submitted

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

    Overall, a very fun challenge, it helped me continue reinforcing my skills!

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

    I had a small problem: the image does not occupy 100% of its parent container. That's why, when I hover over the image, the hover effect looks off. If anyone has an idea why this happens, I would be very grateful!

    NFT preview card component

    1

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    • Make the <img> a display: block. That should fix it.

    Marked as helpful

    1
  • P
    Matt Cope• 340

    @MatthewPCope

    Submitted

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

    I'm proud of the responsiveness all around.

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

    I usually put the footer outside the main section but I couldn't get the footer to extend the full width so I had to put the footer inside the main section.

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

    For the life of me I couldn't get the text in the footer button to be on one line and I couldn't get it to change colors and turn the cursor to pointer on hover. The hero buttons work fine on hover and even though the footer button is the same, for whatever reason it won't work.

    Meet landing page solution

    3

    Darkstar• 1,000

    @DarkstarXDD

    Posted

    • The button hover isn't working because of the z-index: -1 on your footer. Instead of giving the footer a negative z-index give the wrecking-ball-icon a z-index of 0 or higher.

    Marked as helpful

    1