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
Log in with GitHub
OverviewSolutions9Comments47

All comments

  • Joseph• 770

    @Jos02378

    Posted

    Hey @Geoff-Walker, good job on this solution!

    Some suggestions for you:

    1. Try not to set a fixed height to an element, consider using min-height or not setting the height at all so the element can grow as the content grows.
    2. You can try to watch this video on creating an accordion with less Javascript accordion video.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    1
  • Joseph• 770

    @Jos02378

    Posted

    Hey @satyamallick7, good job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase to capitalized text in CSS.
    2. Try to wrap your code in the body using a main element to clear some accessibility issues.
    3. You can try to use flexbox to create this solution, it will be easier for you to create the layout for the card.
    4. Don't set a fixed height to an element as it can cause issues. You can use min-height or not setting the height at all so your element can grow as your content grows.
    5. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    6. You can try to use more relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    Marked as helpful

    2
  • Chit_Thet_Aung• 195

    @ChitThetAung

    Submitted

    Hello guys! Please suggest me about my solution .Thanks you.

    Html and Css

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @ChitThetAung, great job on this solution!

    Some suggestions for you:

    1. You can use the main element to wrap your code in the body to clear some accessibility issues in the report.
    2. You don't need to add alt text for the images because they are for decorative purposes.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Joseph• 770

    @Jos02378

    Posted

    Hey @nas096, good job on this solution!

    Some suggestions for you:

    1. You can add a max-width to your main tag to keep the structure and shape of your card when the size of the screen is getting bigger.
    2. You can try to follow a CSS naming convention called BEM which can save you from repeating your code. You can watch this video for more information Watch the video.
    3. You can try to put the div with the class of attribution inside a footer tag to clear the accessibility issue in the report.

    I hope this helps, good luck!

    Marked as helpful

    1
  • Jonathan• 295

    @Nathan-Front

    Submitted

    Any suggestion to make it better will be helpful in learning. Thank you

    Stats preview card

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @Nathan-Front, good job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase to capitalize text in CSS instead of typing them in HTML.
    2. You can try another way to create the image and the overlay using an img tag and a div like in this video overlay video.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Joseph• 770

    @Jos02378

    Posted

    Hey @Jxai00, good job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase to capitalized text in CSS instead of typing them in HTML.
    2. You don't need to fill in the alt tag since the image is just for decorative purposes.
    3. Try to add a max-width to your container so that you can keep the structure and shape of the card if the screen size is getting bigger.
    4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    5. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit read the article.

    I hope this helps, good luck!

    Marked as helpful

    1
  • Joseph• 770

    @Jos02378

    Posted

    Hey @omerome83, good job on this solution!

    Some suggestions for you:

    1. For the mobile size, try to give some space so the card doesn't stick to the left and right sides of the screen.
    2. You can use background-size: cover; and background-repeat: no-repeat; so the image can cover the container without being duplicated for IPad size.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit read the article.

    I hope this helps, good luck!

    Marked as helpful

    1
  • Joseph• 770

    @Jos02378

    Posted

    Hey @egemendemir, great job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase to capitalized text in CSS instead of typing them in HTML.
    2. You can add a transition for the button to make it nicer.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit read the article.

    I hope this helps, good luck!

    Marked as helpful

    1
  • Pop Andrei• 120

    @pccipri

    Submitted

    I would appreciate if you could tell me what you think about my solution.Let me know if u have any advice regarding accessibility or responsiveness. I'm a beginner so any advice is welcomed. Anyway thanks for taking the time to view my solution.

    Stats preview card component - HTML & CSS Flexbox

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @pccipru, good job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase for capitalizing text in CSS instead of explicitly typing them in HTML.
    2. You can add an additional overlay with a lower opacity to achieve the same color for the image.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like rem in the future. Here is a link to an article that explains when to use which unit read the article.
    5. Try to recreate this solution without setting an explicit height on your elements. You can try to use min-height or not setting the height at all so the card can grow as the content grows.

    I hope this helps, good luck!

    Marked as helpful

    1
  • Joseph• 770

    @Jos02378

    Posted

    Hey @VaNaChiMa, great job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase to capitalized text in CSS instead of explicitly typing them in HTML.
    2. For decorative images or icons, you don't need to put alt text for it since they don't actually add meaning to your content.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like em in the future for padding. Here is a link to an article that explains when to use which unit read the article.

    I hope this helps, good luck!

    0
  • Joseph• 770

    @Jos02378

    Posted

    hey @JSaporski , great job on this solution!

    Some suggestions for you:

    1. For your stats, instead of splitting the h2 and the span tag, you can use <h2>10k+ <br><span>companies</span></h2> instead.
    2. I don't know how you manage to get the image to look like that without styling it but you can use an overlay for the image using a div just like in this video overlay video.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Joseph• 770

    @Jos02378

    Posted

    Hey @obaryo, great job on this solution!

    Some Suggestions for you:

    1. For the name and age, you can try to use a span with a heading like this <h1 class="name">Victor Crest <span>26</span></h1> and then style the span.
    2. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    3. You can try to use relative units like em in the future for padding. Here is a link to an article that explains when to use which unit see the article.
    4. Try deleting all of the code that you don't need like the ones that you comment in the CSS file just to keep your code looking clean and professional.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Joseph• 770

    @Jos02378

    Posted

    hey @yasser22269, great job on this solution!

    Some suggestions for you:

    1. You can add a border-radius for your card to look similar to the design.
    2. You can use object-fit: cover; to prevent the image from being squeezed and use object-position to position the image.
    3. You can add another overlay for the image and use mix-blend-mode: multiply; to achieve a similar overlay for the image.
    4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    5. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit read the article.

    I hope this helps, good luck!

    0
  • Cacti• 390

    @nottohave

    Submitted

    I am not good at using Javascript. My issues are not enough the whitespace at the bottom when multiple answers are selected in both desktop and mobile view. The other one could be the design how the card is not center at the begin of any screen size. This looks okay on 375px and 1440px width screen. Any other will not center the card. Let me know what else I can learn. Thanks!

    HTML CSS JS

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @nottohave, good job on this solution!

    Some suggestions for you:

    1. For the space problem of the card, you can fix it by not setting a fixed height on the card. You can use a min-height or not setting the height at all so your card can grow as your content grows.
    2. For centering the card, you can try to use margin: 0 auto.
    3. You can improve your method of creating the accordion by watching this video watch the video
    4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    5. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Joseph• 770

    @Jos02378

    Posted

    Hey @wanaz13, good job on this solution!

    Some suggestions for you:

    1. The reason why your image doesn't appear is that your image URL is wrong. Since you put your image in a separate folder from the CSS file, your image URL should be ../images/image-header-desktop.jpg.
    2. You can use justify-content: space-between to spread your stats element.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    0
  • Joseph• 770

    @Jos02378

    Posted

    Hey @ebbscode, good job on this solution!

    Some suggestions for you:

    1. You can try a mobile approach first in the future.
    2. Try to give your font a fallback so your design can be consistent if the original font can't load.
    3. For the height, I think you can give a margin between the paragraph and the button to increase the height.
    4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    5. You can try to use more relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Robert Iancu• -20

    @R0b3rtG

    Submitted

    Hi, I had very much fun making this web page.

    I encourage you to try it too if you didn't already :)

    I managed to make it responsive for every single device using the mobile-first method.

    Hope you like it!

    And please give me some feedback:

    • what you like
    • what you don't
    • and what you would change

    All the best! :)

    Made using HTML, CSS basics, Flexbox and mobile-first design

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @R0b3rtG, good job on this solution!

    Some suggestions for you:

    1. Try to split your CSS styles into a different file so it improves the readability and maintainability of your code.
    2. You can try to give your main tag a max-width to keep the structure and shape of the card.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like em in the future for padding. Here is a link to an article that explains when to use which unit see the article.

    I hope this helps, good luck!

    0
  • Olabayoji• 135

    @Olabayoji

    Submitted

    Any suggestion would be highly welcome. Thank you in advance.

    HTML, CSS, Flex

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @Olabayoji, good job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase to capitalized a text in CSS instead of explicitly typing the in HTML.
    2. You can try another way to create an overlay for the image using div. You can watch this video for more information overlay video.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit link to article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Joseph• 770

    @Jos02378

    Posted

    Hey @bcr95, good job on this solution!

    Some suggestions for you:

    1. You can give your card a border-radius and change some of the icons with the appropriate one.
    2. You can try to add a hover state for the button that makes the background transparent.
    3. If you are planning to apply the same style to many elements, consider using class instead of id. Id is intended to be used for 1 element.
    4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    5. You can try to use relative units like em in the future like for padding. Here is a link to an article that explains when to use which unit link to article.

    I hope this helps, good luck!

    1
  • Martina• 60

    @MartinaWebDev

    Submitted

    Hello guys, I am at the beginning of learning web development so any feedback on this code is appreciated. Tips and Tricks are welcome. Thank you :)

    HTML 5 / CSS 3 - FOUNDATIONS

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @MartinaWebDev, good job on this solution! I see that your solution is not responsive yet, looking forward to seeing it.

    Some suggestions for you:

    1. You can use text-transform: uppercase; to capitalized text in CSS instead of explicitly typing them in HTML.
    2. You can try another way to create an overlay for the image using div by watching this video overlay video.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. I don't recommend you to use the unit em for font size because it can cause issues if there is deep nesting of elements. I would suggest you use rem for font size. Here is a link to an article that explains when to use which unit link to article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Joseph• 770

    @Jos02378

    Posted

    Hey @ZainMhrez, good job on this solution!

    Some suggestions for you:

    1. You can try to make the blur of the box-shadow bigger and use hsla instead of var so you can play with the opacity and match the design.
    2. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    3. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit link to article.

    I hope this helps, good luck!

    Marked as helpful

    0
  • Kashish Sondhiya• 45

    @K-ash-ish

    Submitted

    I came across many hurdles I overcome some of them. But still, I am unable to make it look like the final design. But I learned many things and also any suggestions are helpful because I want to make it look like the given design. The mobile part looks good I think😅 the desktop image part is what I really struggled with.

    Mobile first site using HTML CSS

    1

    Joseph• 770

    @Jos02378

    Posted

    Hey @K-ash-ish, good job on this solution!

    Some suggestions for you:

    1. Try to use a max-width for your card so you can keep the structure of the card if the size of the screen is getting bigger and bigger.
    2. Add a position: relative to your card so you can position your box based on the card, not the screen.
    3. You can make the questions bold when it is active to make it similar to the design.
    4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    5. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit Article.

    I hope this helps, good luck!

    Marked as helpful

    2
  • Joseph• 770

    @Jos02378

    Posted

    Hey @myatthu000, good job on this solution!

    Some suggestions for you:

    1. You can use text-transform: uppercase to capitalized text in CSS instead of explicitly typing them in HTML.
    2. Wrap your code inside the body in a main tag.
    3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
    4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit link to article.

    I hope this helps, good luck!

    Marked as helpful

    1
  • Joseph• 770

    @Jos02378

    Posted

    Hey @fangyinglim, good job on this solution!

    Some suggestions for you:

    1. Try to Wrap your container inside a main tag to clear some issues.
    2. Try to fix your URL link for the Sedan icon to /images/icon-sedans.svg because it doesn't load on the website.
    3. Try not to set the height of the container explicitly because the cards break in the phone size, try to use min-height: 100vh; or not setting the height at all so the container can expand as the content grows.
    4. I don't recommend you to use em unit for font size because it can cause a problem if there is deep nesting of elements. Here is a link to an article that explains when to use which unit link to article.
    5. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.

    I hope this helps, good luck!

    Marked as helpful

    1