I spend too much time doing this challenge and I would like to get some advice on how I could write my code to improve my productivity. I think it would be great if in my next challenge I use the ITCSS - architecture. Do you have other recommendations ? Or is there something in my codes that I could do better ?
Kind regards
Christ
Hi Christ Kevin Touga Watat,
The challenge is quite well done. Cheer !
Be careful to respect the proportion of images in CSS.
Don't worry about the different CSS architectures for now.
Remember to structure your code well and try to respect the model as closely as possible.
I opened a first pull request for this project.
Good luck
Hello there:) Will be happy to get any feedback
P.S. I don't really know why the gradient bg is different on the left side from the template given, any tips?
Hello Kateryna,
hello, I would like to share with you my solution which is almost pixel perfect.
https://base-apparel-coming-soon-lka-loris.vercel.app/
Regarding the left background, I think there is a problem with the template :)
Otherwise, good work, it's nice to see.
See you soon
this project is called upon to improve
All suggestions are welcome. 😊
Salut Elise !
Super projet, c'est top !! :)
Bravo !!
Hey, everybody! 👋
I have to admit, this was a much trickier challenge than I thought! 🤔
I originally tried to layout this site using flexbox, but eventually switched to CSS grid (which I found to be easier).
I also decided not to try out any JS for the form validation but use CSS pseudo-classes and combinators to make the error elements appear when the email input is invalid.
I really wasn't sure about how to make this challenge responsive. 😥 Other than follow the designs for the desktop and mobile layouts of the site (which look nice when the screen is exactly 1440x800 or 375x800) I think there's a lot of blank space on other screen sizes and I wasn't sure if I should allow the images to scale a whole lot (because then they might not look so clear).
Any help or feedback on this would be greatly appreciated! 😌
Happy coding, everyone! 😁
Hi ApplePieGiraffe,
I just updated my solution and I allow myself to share it with you :)
https://base-apparel-coming-soon-lka-loris.vercel.app/
Thank you
Salut Elise,
Très bon travail pour ce projet ! J’ai quelques retours pour améliorer le rendu.
L’affichage sur un écran ultra-wide n’est pas optimal car tu appliques une hauteur de 753px sur ta class .background. Du coup je me retrouve avec un background coupé.
Je t’invite à supprimer cette hauteur et à appliquer à la place ‘min-height:100vh’. Ce qui évitera au passage un scroll sur les plus petits écrans.
Il te restera juste à centrer ta class .main en mettant : Top : 50%; Margin: 0 auto; Transform : translateY(-50%).
Sans oublier de vérifier l’affichage sur mobile :)
Je reste disponible si besoin
Loris
Tell me what do you think about this project? Your feedback is much appreciated. Feel free to open up an issue if you find anything wrong. Have a good day.
elements positioned with 'relative (top: 'number'px etccc) or absolute or float' are no longer part of the vertical rhythm and therefore can potentially overlap at resize. that's what I wanted to explain
when you resize your browser, img elements go out of their containers
Hi. These newbie challenges are amazing.
In this project I've used:
Any comments will be appreciated :D
Thanks :D
Hi SzymonRojek,
Very good work ! it is good for the eyes !
After inspecting your work, here is my feedback:
Pay attention to the size of your img (icons). After looking in the inspector, they are not 64x64.
To remedy I invite you to apply the following code:
img { display: block; height: auto; max-width: 100% }
without forgetting to remove the width and height of your img in your class (..grid__item-img)
I invite you to go and see my design which is not perfect but can support my point :)
https://four-card-feature-section-inky.now.sh/
I hope I helped you.
Do not hesitate if necessary
Good luck
How is my Website. I have a problem that my CSS sheet do not match exactly my design
Hello mohammed,
Why did you rename your index.html to index.md ??
.md files are files that allow you to use markdown. I'll let you see it on the web :)
-> rename your index.md to index.html
On will see later, if there are still conflicts :)
See you soon
Hi Mohammed Al-Fatlauy,
Good Work :) I like.
Just a question : Why do you repeat the same media queries several times ?
You call it once and you paste all the css you need.
See you soon :)
I had a hard time trying to copy the background in the desktop version of this design. I don't know what size to use so the whole svg image is fit within the screen.
Dear CAMSMY,
You did very well to use the body tag to apply your background image.
Do not forget to check your integration on mobile and to check that your elements do not exceed the container :)
Good luck :)
Would love feedback because the code definitely became a little hacky.
Dear Reynolds,
Good work. Please note several errors should be noted :
-> You call a javascript file "main.js" which does not exist in your file.
-> Avoid writing your javascript in your html. Move the javascript file that you will create.
-> Social networks (facebook, twitter, instagram) are not present. Is this normal?.
Also don't forget to take into account accessibility and HTML reports
Do not hesitate if necessary :)
Good luck :)
Good morning Kotaro666,
attention: don’t forget to test your integration on other browsers. You will be surprised by the result:)
I think you also forgot the responsive mobile.
Good luck
