Didn't have fun creating this project, so submitted it without actually having to finish all of it :)
Younes Atyq
@younes-atyqAll comments
- @Mahmoud-solaimanSubmitted 3 months agoWhat specific areas of your project would you like help with?@younes-atyqPosted 3 months ago
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
1 - @shailesh7333Submitted 3 months agoWhat 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
@younes-atyqPosted 3 months agoHello @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
) orspan
tags for better structure and styling control.Marked as helpful1 - @devdocx123Submitted 3 months agoWhat 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.
@younes-atyqPosted 3 months agoHello @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.
1 - @essam0000121Submitted 3 months ago@younes-atyqPosted 3 months ago
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.0 - @mofadaSubmitted 3 months agoWhat 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
-
The
input
tag is added withrequired
. 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.
- Method 1: Add the
-
email
has two checksrequired
andtype=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
@younes-atyqPosted 3 months agoHi, 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 helpful0 -
- @nanmartinsSubmitted about 1 year ago@younes-atyqPosted about 1 year ago
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 helpful0