@Choboy-dev
Latest solutions
Browser extension manager, scss, vanilla JS
Submitted 16 days agoI'd like help with JS; is there better way to do it with less code and more DRY, are there any flaws in my logic and possible improvements? Also, there is a lot of repetition in SCSS especially with implementing of theme switching; like with JS, is there anything I can do to trim the amount of code and reduce repetition.
Contact Form
Submitted about 1 month agoI'm not sure how 'good' my JS file and logic is; if there is better (best practice, less bloat) way to do it any help is appreciated.
Intro Component With Sign-up Form
#sass/scssSubmitted about 1 month agoAny help regarding JS logic is welcome.
Testimonials grid section responsive, SCSS, Grid
Submitted 2 months agoI'd like to get some help regarding grid and how to make it work better with responsiveness (media queries). When gradually making viewport bigger/smaller, is there any better way to make responsive grid work with media queries rather than having 2 ways (or methods) to shift elements around?
Single price grid component
#sass/scssSubmitted 2 months agoI'd like some help regarding using container queries. Is my implementation good, what are some best practices?
Latest comments
- @DomCroatia
Hey, very nice solution to this challenge. If I may, you could improve it even further on smaller screens. I'm not sure if it is best practice or the most optimal way, but how I did smaller screen sizes is that I didn't size grid elements to take
span 2or really move them around the grid until screen size is big enough to handle it. - P@j3dd3rsWhat are you most proud of, and what would you do differently next time?
I managed to apply my CSS grid skills to create the grid and then adapted it to be responsive by changing the amount of columns.
What challenges did you encounter, and how did you overcome them?Getting the 1-2-1 card pattern was something I had the right idea for, but the wrong implementation at first. So after a quick search, I managed to solve that issue and get them to be as expected.
What specific areas of your project would you like help with?Just reviewing if there was a more efficient way to do the card restructure, or if that is the best way to go about it.
@DomCroatiaHey, very nice solution. I'm not sure if there is more efficient way to do the grid segment, but I saw some people did it with flex instead of grid. Not necessarily better just different.
- @bigboyemma20What are you most proud of, and what would you do differently next time?
I take pride in the clean and organised structure of my HTML and CSS. In the future, I’ll focus on improving responsiveness with media queries.
What challenges did you encounter, and how did you overcome them?I initially struggled to center a card vertically and horizontally using margins and padding. Then I discovered that Flexbox was a better solution. By applying
What specific areas of your project would you like help with?display: flex,justify-content: center, andalign-items: centerto the body, I successfully centered the component.I need help with how to use the flex layout effectively and how to make responsive projects.
@DomCroatiaHey, congratulations on your very first challenge completed it looks amazing!
You really did amazing job overall, one thing which can help you with responsiveness, for example in this case, you can use
max-widthrather than justwidthon your div with class .card. That way it wont be bigger than 320px, but if screen is smaller it can shrink and you don't get that horizontal scroll bar that you would now. Also I've seen a lot of the times that people put onbodyelement min-height: 100vh just like you've done here.Marked as helpful - @Mehak-deep-kaurWhat specific areas of your project would you like help with?
I’d really appreciate it if you could take a moment to share your feedback on this project. I'm open to suggestions on how I can improve and would love to hear your thoughts on what worked well and what could be done better.
Also, if there are any specific areas I should focus on or keep in mind for future projects, I’d be grateful for your guidance.
Thankyou!
@DomCroatiaHey, congratulations on finished challenge!
First thing I'd like to mention is semantic HTML. Having a lot of divs as a containers for content is ok, but they don't have any meaning whatsoever. For example, instead of using div with class='container', you could use <main> element and <article> instead of
div.main. It makes your content more meaningful for screen-readers and other assisted technologies. Some other semantic elements besidesmainare: article, section, aside. footer, header, nav (I'm probably missing some). For smaller projects like this we don't use a lot of them but using them is good habit to develop.Regarding responsiveness, you don't have to give your elements strict
widthorheightvalue. You can use min/max width/height (ex., min-height:100vh; onbodyelement so it always takes full height, but expands more if content requires it or max-width ondivwith class of.cardhelps with content in your card stretching too far on big screens, and helps make card smaller on smaller screen because content in it dictates it's size).Also I noticed your button has
widthon it aswell. If you reduce viewport bit-by-bit you can see that at some point yellow background on it is not covering full button. The reason is because it is "reduced" to 25% of width. Better way to do this, in my opinion, is to addalign-items: start;on parent element and remove width property from button, you can see now that background covers full width of it.Lastly, you put your
imgelement into div, (and I think that is good for styling purposes), but you didn't give that divwidth: 100%;to make it responsive. - @Stankovic77What are you most proud of, and what would you do differently next time?
i'm proud of everything..learning new skills is great!
What challenges did you encounter, and how did you overcome them?nothing so big
What specific areas of your project would you like help with?About preview..when i zoom out site everything is great but when a site is on 100% zoom footer is a little bit messed up
@DomCroatiaRegarding footer when site is at 100% zoom, you can solve that problem by removing
position: absolute,bottom: 1%and you don't needwidth:100%.When you remove that, next problem is that in body element you now have 2 elements, and
display:flexon body is moving them next to each other (flex-direction: rowis default behaviour). If you addflex-direction:columnon body, footer should move below section.Marked as helpful - @alepacc@DomCroatia
Hey, very nice challenge solution!
I would just add 1 thing. If you try minimize your viewport bit by bit (before media query is triggered) you can notice that vertical scroll appears. To fix that you can add to your img
width:100%;and it will make it even more responsive.Also, on your media query for img you have 4 margin properties (margin-top, margin-left, margin-right and margin-bottom). There is shorter way to write that. You can just write
margin: -40px -40px 0 -40px. It is shorthand to writing margin for all 4 sides and it goes top, right, bottom, left. You can also do margin with only 2 values, then first value is applied to top and bottom, and second to right and left (ex., margin: 20px 0). Also, writingpxif value is 0 is not needed.
