P
@Coder-LizSubmitted about 1 month ago
Latest solutions
Subscription form with email validation
#sass/scssPSubmitted about 1 month agoAs usual, anything I could improve on, do simpler, etc. Thank you!
Responsive article preview with functional share button
#sass/scssPSubmitted about 2 months agoAs usual, anything you think I could improve on, be more efficient, etc. Any feedback is helpful & welcome! Thanks :)
Responsive Landing Page Using CSS Flexbox & Media Queries
#sass/scssPSubmitted 2 months agoAs usual, anywhere you think my code could be improved, simplified, anything I could have included, excluded, etc. All feedback is appreciated! :)
Responsive & interactive dashboard using grids, flex boxes, & fetch()
#sass/scssPSubmitted 2 months agoIf there's anything I could have done simpler or anything I should replace, let me know!
Responsive Component using flex box & media queries
#sass/scssPSubmitted 2 months agoAs usual, any input on how I can improve my code, make it cleaner, any ways I could have done anything more efficient!
Responsive Testimonial Page Using CSS Grid
PSubmitted 3 months agoAs usual, anything you think I should know or anything I could improve on.
Latest comments
- P@Coder-LizSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I am proud to have completed this project using SCSS, and next time I will strive to make my code even cleaner.
What challenges did you encounter, and how did you overcome them?I deployed this project on Netlify, and when I previewed the site, I noticed that the popup message showed up first. I double-checked my code and discovered that I had mistakenly added the 'active' class to my overlay and popup wrapper elements. To fix this, I simply removed the 'active' class name from these elements.
- P@Mustapha909Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
For this challenge, I'm most proud of:
Successfully implementing a responsive layout that adapts well to different screen sizes.
Using pure HTML and Sass helped reinforce your understanding of styling with preprocessors.
Debugging layout issues and ensuring the interactive pop-up works smoothly.
Next time, I might:
Plan a more structured approach before coding to avoid layout issues later.
Experiment with CSS animations or transitions to make the pop-up appear more smoothly.
What challenges did you encounter, and how did you overcome them?1️⃣ Positioning the Pop-up
Challenge: The pop-up was not positioned correctly on mobile breakpoints. Solution: Adjusted absolute positioning, used CSS media queries, and tested different flex/grid layouts to ensure responsiveness.
2️⃣ Making the Component Fully Responsive
Challenge: The layout didn't adapt well to certain screen sizes. Solution: Used flexbox/grid, fine-tuned media queries, and optimized spacing for better mobile compatibility.
3️⃣ Handling Hover and Click States
Challenge: Ensuring the pop-up appears correctly on both hover (desktop) and click (mobile). Solution: Implemented conditional Sass styles and tested behavior across devices.
What specific areas of your project would you like help with?One challenge I faced was positioning the pop-up correctly on mobile. The goal was to make it span the full width and appear at the bottom of the screen, but I couldn’t get it to work as intended. I couldn't fully resolve this issue despite experimenting with different CSS approaches. If you have any suggestions or feedback, I’d love to hear them!
P@underhrPosted about 2 months agoit looks great! the only thing i would say is to make the container a bit wider. good job though!
Marked as helpful0 - @SimonHicklingSubmitted about 2 months agoP@underhrPosted about 2 months ago
Many things. I'm no professional so take what I say with a grain of salt
- Your images likely aren't showing up because you've used a folder name with a space. From what I know, this can cause problems. I recommend never using spaces when creating folder or files for development, use "-" as a replacement. You can change the name to Task1 or Task-1, but either way you don't need to include "../Task 1" at all, as this is leaving & entering the same folder. Instead of
src="../Task 1/images/drawers.jpg",usesrc="images/drawers.jpg"for all images.- To center the card properly, remove
.container { margin-top: 33vh; }& add
body { display: flex; justify-content: center; align-items: center; }-
Your colors are also off. They're available in the "style-guide.md" file, so I highly recommend using those, rather than trying to guess. Definitely go back & update the text & background colors to make the design look much more similar.
-
Check the smaller details, like the size of the profile image, the all caps in "SHARE", things like that to add the finishing touches.
Keep in mind I didn't test this code out myself, this is just based on observations, so go back & try this out & fix what's needed. other than those big things, your positioning & javascript is good! you managed to make your javascript much simpler than i did to accomplish the same thing, so kudos.
Happy coding!
0 - P@a-d14Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how modular and reusable I made my SASS code. This was my first project with SASS. I would try to plan the project better next time so I do not write too much unnecessary code and then later delete it.
What specific areas of your project would you like help with?I am unable to make the image in the header look exactly like the specification. I tried using scale() but if there is a better solution please let me know. Thank you.
P@underhrPosted 2 months agothe only thing I would say is to make the tablet header image bigger, probably make it fit the screen size. otherwise looks really good!
1 - P@nishanth1596Submitted 2 months agoWhat specific areas of your project would you like help with?
- There is an overlay on the footer image, I dont know how to find the overlay values from figma file not to apply it.
- How to give hover background color for the footer button here?
P@underhrPosted 2 months agoThis isn't a coding answer, but I had the same problem with the footer. What I did was put the 3 pictures in Figma, & added a fill of the color at 90% opacity. Not a perfect solution probably but it works good!
0
