Skip to content
OverviewSolutions
5
Comments
6

Younes Atyq

@younes-atyqMorocco240 points

A normal Avocado tries to code.

Latest solutions

Latest comments

  • Mahmoud•270
    @Mahmoud-solaiman
    What specific areas of your project would you like help with?

    Didn't have fun creating this project, so submitted it without actually having to finish all of it :)

    Multistep form

    1
    Younes Atyq•240
    @younes-atyq

    Hi @Mahmoud-solaiman,

    Looking at your code, I can see why you didn't have fun: No framework :)

    the funny thing is that I went without one for this challenge too lol

    but still, a heart for trying <3

  • Shailesh Chauhan•20
    @shailesh7333
    What are you most proud of, and what would you do differently next time?

    I tried to make it responsive as much as possible. Initially struggled to style black border similar to given design but after little bit of research learned more about following property.

    • box-shadow
    • when and how to use !important
    • max-width and max-height
    • how to scale image size using transform property.
    • vertical-align

    Responsive Blog Preview Card - HTML CSS

    2
    Younes Atyq•240
    @younes-atyq

    Hello @shailesh7333, congrats completing the challenge!

    I recommend using a fixed width for your card and employing media queries to adjust its style across different screen sizes. This will significantly enhance your card's visual appeal on various devices.

    Avoid using the !important declaration as it can lead to style conflicts. Instead, prioritize specificity in your CSS rules. For instance, if the .blog_title element is overridden by the style in .blog_preview_child p, create a more specific selector like .blog_preview_child p .blog_title to target the title within its parent element.

    Consider replacing generic tags like p with more semantic elements like heading tags (e.g., h1, h2) or span tags for better structure and styling control.

    Marked as helpful
  • devdocx123•40
    @devdocx123
    What are you most proud of, and what would you do differently next time?

    Color Selection.

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

    nothing.

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

    I think there is no need of any help i have seek while designing this webpage.

    Responsive using css grid

    2
    Younes Atyq•240
    @younes-atyq

    Hello @devdocx123, congrats finishing the challenge!

    I recommend removing the position: absolute property from your card. Given that you're already using Flexbox on the body, it's unnecessary and will require extra effort to adjust spacing for different screen sizes.

    To enhance your card's appearance on various devices, consider setting a fixed width. This will create a more consistent look. For responsive design, explore using media queries to apply different styles based on screen size.

  • Younes Atyq•240
    @younes-atyq

    Hi, good job! For this complex layout, I recommend using CSS Grid instead of Flexbox.

    While Flexbox is great for simpler, one-dimensional layouts, Grid offers more flexibility and control for complex structures.

    By utilizing Grid's grid-template-areas property, you can easily define and position different sections in your container.

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

    In the process of completing this form, I will try to find the best solution. In this process, I learned a lot.

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

    In the process of completing this form, I encountered two problems, which made me a little entangled. I don't have a good solution. Here are the problems I encountered and the solutions

    1. The input tag is added with required. At this time, the pseudo-class selector :invalid will take effect directly during initialization, resulting in an error message being displayed as soon as the page is opened. I think this is not good.

      • Method 1: Add the novalidate attribute to the form, and then check it yourself through js. This is too troublesome.
      • Method 2: Use :foucus + :invalid to display the error message, which is only displayed when focused.

    2. email has two checks required and type=email. Any failure in any check will make the pseudo-class :invalid effective, and there is a requirement to check the email format in the requirements. So here I can only use js to distinguish the check type and modify the corresponding text.

    For the above problems, if you have a better method, please let me know, thank you

    contact form with tailwind

    #tailwind-css
    1
    Younes Atyq•240
    @younes-atyq

    Hi, great job!

    I recently watched Kevin's video addressing the same issue you encountered but in vanilla css.

    I searched for that pseudo element in Tailwind CSS but couldn’t find it. If it hasn’t been added yet, you can always incorporate a custom CSS code into your project.

    Additionally, it’s advisable to set a fixed height for your form elements. This way, when an error message appears, it won’t push the rest of the content down.

    Marked as helpful
  • Younes Atyq•240
    @younes-atyq

    Hello, congrats completing the challenge!

    I notice that you added an overflow-y: scroll style to your html tag that's make the scroll bar appear in all pages with no needs to it, Also in technology all three images are getting a bit bigger at 1920px which make the scroll bar appear again, but every thing except that was well done as I sow.

    wp :)

    Marked as helpful