KaiBoro• 120
@KaiBoro
Submitted
A little proud of myself... :-)
P
AjeaS
@AjeaSmith
All comments
What a challenging project!, but I pushed through it :) let me know what you guys think.
Thanks! :) and good catch I’ll check that out. Yea it took me quite some time to get the background image to work.
0- aayushi simzia• 355
@iucsim
Submitted
I am new to HTML and CSS..So any feedback are welcome:)
Hey Aayushi, great work on this! break points scale perfectly. Keep up the good work.
0 - Waseem Ahmed• 220
@codewaseem
Submitted
Hey Waseem, wow this great on all sizes good work!
1 - Sarvagya Sharma• 555
@sarvagya2545
Submitted
Hey guys check this out!
I created this site fully responsive and with many media queries.
Any valuable feedback from you guys is helpful and precious.
Edit: what is the problem with fontawesome?
Hey Sarvagya, your solution looks great! nice work. Has doing the font awesome that way always gave you trouble? I usually get the css from CDN and import it as a stylesheet with
linktag. usinghttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.cssnot sure if that helps, let me know. :)0 - Migo• 205
@ngoc199
Submitted
I still don't know how to fix the background and the image in the hero section. I can't put it in the correct position like in the mock-up. Could you tell me how?
Hi Migo, great work on this! If it's a background image you could try setting the
background-positionproperty, maybe something likebackground-position: top right. Let me know if that helps.1 - Shubham Sharma• 855
@shubhamthedev
Submitted
Hi, this is my third project over here and i want some feedback on this project. I am open to any suggestions you might have and any criticism about my design or the style of coding.
Hi Shubham!, Great work on this project! just a few suggestions
-
I noticed the design breaks a bit when it gets to
914pxI would suggest the media query break point to be before then. -
I see within your code you use the
headertag to wrap your whole content. Probably just a preference thing, but I usually use theheadertags for menu-like content like nav bars, and logos. Then I would use either themaintag or asectiontag for regular content. -
The last thing I noticed is that there is a
scripttag at the top, inside theheadtag. It's best practice to place anyscripttags at the bottom of the page, namely right above the ending</body>tag. That way when the browser runs, it loads the content first then any JS scripts.
Other than that, again great job! :) keep up the good work.
P.S. Hope this makes sense
2 -
- Jim• 50
@Jim-Garner
Submitted
There are a couple of things I couldn't quite manage, but overall I think I got pretty close.
Hi Jim, Great job on this! the mobile and desktop view looks exactly like the design. I'm curious what was it you weren't able to accomplish in this challenge?
1 - Ornella T• 425
@ornel77
Submitted
Hello,
If you have any critics or advice feel free to write them :)
Awesome job! like @emmy-html said, your solution is very close to the design. So again, awesome job on that. I noticed that you have a few accessibility issues, which I see are an easy fix. It's basically saying for best practices when working with links
<a></a>tags, if the link is not actually going anywhere like to navigate to a different page it can look like this<a>my link</a>. Or, if you are navigating to a different page then, using thehrefattribute like you did before is the way to go. Nonetheless, great work!P.S. hope that made sense :)
1 - Glory Praise• 40
@emmaglorypraise
Submitted
Hey Glory, nice work on this challenge! I did noticed on
min-width 501pxthe bottom boxes overlap. I’m curious if you tried using the mobile first approach. I believe it would be a much easier for you, starting off on a smaller screen and working your way to bigger screen. So for instance,- On smaller screen you could add a
flex-direction: columnon the.subso that they’re stacked on top of each other. - Then, maybe you could add a
min-width: 774pxmedia query and change the direction of.subby usingflex-direction: row
I hope that makes sense, nonetheless you did a great job. keep up the good work! and let me know if you need help with anything.
1 - On smaller screen you could add a
- Alex• 1,090
@AlexBueckig
Submitted
Great job Alex, I admire how organized your codebase is! very easy to understand and read through. Your solution looks great, keep up the good work!
1 - Lukasz• 315
@devluke88
Submitted
Good job Lukasz!, it's nice and simple, along with looking great on mobile and desktop. Keep up the good work.
0 - Lee• 455
@leecockcroft
Submitted
Great work Lee! looking good at all sizes
0 - ajr1982• 140
@ajr1982
Submitted
Originally attempted to do the theme-change animation with CSS Animations, but the animation duration would only register for the first play through. After that the styles would just instantly flick over from dark to light.
Tried 'resetting' the classes as described here https://css-tricks.com/restart-css-animation/ but couldn't get it working, so used Greensock instead.
Great work ajr1982! light and dark theme slides in perfectly and it looks great on all sizes.
0 - Alex• 1,090
@AlexBueckig
Submitted
Great job on this challenge Alex! UI looks great and it scales down nice and smoothly. Love the validation you did with javascript. Keep up the good work.
1 - ajr1982• 140
@ajr1982
Submitted
Hey Ajr,
Great work on this one! This one was a tough one for me to complete, but you nailed it with the css grid, very impressive for your first time using css grid. Keep up the good work.
1 - Jhabari Guidry• 190
@J-Guidry
Submitted
This was a doozy. Javascript involved in suppressing the native error validation message and more to toggle css when a validation error happens.
Hey Jhabari,
Nice work on this project. It scales down very nicely, I know implementing the javascript part was not easy.
I have noticed that there is a bit of scrolling on the front page to see the rest of the image, maybe you could try to have the banner image have a
height: 100vh.- I also noticed you had some html issues with the form, its a minor one. if your not using the
action=""attribute in your form, then its safe to remove it.
1 - I also noticed you had some html issues with the form, its a minor one. if your not using the
- Tiffany Arellano• 205
@yirano
Submitted
Not a question --
I kept the height and width to a fixed size for optimum visual. It was mainly to keep the photo from becoming pixelated on larger screens.
Hey Tiffany, Awesome job on this! it scales very nicely and looks great. Keep up the good work :)
P.S - I really like how you organized your README file, it's the most important part of the code. I'm definitely taking notes on that :)
1 - Dionisio• 190
@dg0397
Submitted
looks good!
1 - AlxandreLopes• 80
@AlxandreLopes
Submitted
Wow, that is great work Alxandre! I struggled hard doing this challenge, nice. Just 1 little thing I would say you could do is maybe add a little padding between sections so it won't be too close together. But other than that, wonderful work :)
Cheers!
0 - Khwilo Kabaka• 130
@khwilo
Submitted
- I would like a review on my code to see how well I can space the items on the second row and first column.
- I would also like to know how well to cater for mobile screen sizes other than the ones with widths less than 375 pixels.
Hey Khwilo, looks good! :)
-
you can try setting the justified-content to be 'space-evenly' this would make it not too spaced apart. But, if the spacing is still too much you could add padding (top and bottom) of elements to make it a little bit of spacing :)
-
I would say you could do 2 breakpoints.
-
(min-width: 375px) Phone screens - you can adjust the second row to be in a column (stack on top of each other)
-
(min-width: 768px) tablet screens and higher - you could set them back to rows (next to each other)
Hope this helps! :) if you need help with anything I'm on slack @ajeasmith
1 - argel omnes• 1,800
@argelomnes
Submitted
About halfway through it felt like I'm overusing media queries. I have lessen them before completing the challenge. Question is, how much is too much?
current breakpoints: 8 (inside _variables.scss) maximum used in 1 selector: 3 (ie, main and h3)
Hey Argel, I feel your pain. I used to get overwhelmed with trying to cover so many device breakpoints that my CSS would be filled with them lol. From my experience, I found that it was easier for me to cover only like 3 or 4 major breakpoints. Like (smartphones/iPhones, tablets, and desktops) instead of covering every single breakpoint I could think of.
I use this website when I'm working on media queries: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
Hope this helps! :)
1
