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

  • @Yannisp2000

    Submitted

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

    I am proud of my second website i build.

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

    my challange was to lern the difference between block, inline and inline-block elements to get the yellow background around the "Learning".

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

    i need help with my main container. what i need to do that the container orientates on the svg?

    @DevonHughesCodes

    Posted

    Hello @Yannisp2000

    Great solution you've got here, well done!

    If you don't mind, I have a few suggestions I'd like to share about semantic HTML for improvement:

    📌 First: Use <main> to wrap the main content instead of <div>.

    Think of <div> and <span> in HTML like plain boxes or placeholders. They're handy for holding content, but they don't tell us anything about what's inside or what it's meant for on the webpage.

    📌 Second: Use <h1> for the main title instead of <h2>.

    Unlike what most people think, it's not just about the size and weight of the text.

    The <h1> to <h6> tags are used to define HTML headings.

    <h1> defines the most important heading. <h6> defines the least important heading.

    Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on. All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

    📌 Third: There are two active hover effects for the card when the user places their cursor over them. One for the Title of the card and one for the box-shadow. I've provided a snippet from my CSS stylesheet for you to have a look.

    /* Box-shadow hover effect */

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    /* Title hover effect */

    .container h1 { color: var(--black); font-family: 'Figtree', sans-serif; font-size: 26px; font-weight: 800; margin-bottom: 0.8rem; }

    .container h1:hover { color: var(--yellow); cursor: pointer; }

    All in all your solution looks awesome. I hope this helps. Keep up the great work!

    Marked as helpful

    1
  • @DAEM007

    Submitted

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

    I am happy I was able to work with vanilla css again.

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

    Just a little challenge with image fitting properly into containers

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

    How to fit images into containers properly with css

    @DevonHughesCodes

    Posted

    Hello @DAEM007

    Your solution looks really good!

    Just a quick piece of feedback from something I noticed. On the active state of the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided for the challenge.

    Here's a snippet from my stylesheet for reference:

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    Other than that, great work and Keep it up!

    0
  • @DevonHughesCodes

    Posted

    Hello @YohannesDream

    Your solution looks really good!

    Just a quick piece of feedback from something I noticed. On the active state of the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided for the challenge.

    Here's a snippet from my stylesheet for reference:

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    Other than that, great work and Keep it up!

    Marked as helpful

    0
  • @Harsh-Kumar-Dwivedi

    Submitted

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

    I am proud that I was able to build the highly closest design in comparison to the required design. From next time, I would try to complete the project in a significant lesser amount of time without compromising on the quality of the project.

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

    Essentially, I encountered following challenges:-

    1.Responsive paragraph.

    2.Designing the plan portion.

    3.Box-Shadow for the payment button.

    4.Designing the background of the card.

    I tackled these problems calmly by researching out various possible solutions, choosing the better solution, applying the solution, modifying it and then finalizing it. I used following approaches for respective problems:-

    1.Padding helped out in the problem of making the paragraph responsive as per the given design across different devices.

    2.Flexbox and `` element were highly useful, in designing the plan portion.

    3.Setting up the box-shadow CSS property with proper values, helped in giving the payment button a bottom box-shadow.

    4.Pseudo element ::before and position: fixed; were significantly helpful in designing the background.

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

    Would love to know following:-

    1.What better approach could be used for designing the background?

    2.Any suggestions in general or specifically regarding code optimizations, better approaches and production worthy practices.

    Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Happy Coding ! Thanks 😀

    @DevonHughesCodes

    Posted

    Awesome solution @Harsh-Kumar-Dwivedi

    Looks great. The only thing I noticed from your preview is that the overall container is missing a box shadow like in the design example.

    Here's an example from my own stylesheet for referrence:

    .container { background-color: white; margin: 20px; padding-bottom: 20px; border-radius: 20px; box-shadow: 0px 10px 40px rgba(34, 34, 34, 0.2); }

    Other than that, great job and keep up the good work!

    Marked as helpful

    1
  • keltiek 210

    @keltiek

    Submitted

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

    Doesn't look as bad as I thought:)

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

    Don't know enough about CSS/Flexbox and Tailwind

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

    Any suggestions on how I can improve on my solution are welcome. Thank you!

    @DevonHughesCodes

    Posted

    Hello! @keltiek

    Your solution looks great!

    Just a quick suggestion, I can't see your stylesheet, however, for the active state on the element with the box-shadow there is a very subtle hover effect that's super easy to overlook in the design previews provided.

    Here's a snippet from my stylesheet for reference:

    .container { max-width: 400px; margin-inline: auto; background-color: var(--white); padding: 1.5rem; margin-bottom: 2rem; border: 2px solid var(--black); border-radius: 1rem; box-shadow: 10px 10px 0px var(--black); transition: 0.5s; }

    .container:hover { box-shadow: 15px 15px 0px var(--black); }

    Other than that, great work and Keep it up!

    Marked as helpful

    0