@luan-services
Latest solutions
Tailwind + JS? No problem - my take on the "Article Preview Component"
#vite#tailwind-cssPSubmitted about 2 months agoI’d really appreciate if someone could take a look at how I used Tailwind CSS and give me some feedback on how to keep it clean and readable. I tried to stay organized using comments, spacing, and indentation, but I’d love to pick up good habits early on and make sure I’m heading in the right direction.
Plane Descending Onto the Responsive Landing Page – No Code Delays
#sass/scss#vitePSubmitted 3 months agoI’d love if someone could take a look at the hero section I mentioned earlier. Is there a better or more effective way to make the background image bleed on the mobile layout—maybe a way to make it scale more smoothly without relying on a
@mediaquery to changebackground-size?Any tips, tricks, or advice would be much appreciated!
Responsive Grid section using all kinds stuff
#vite#sass/scssPSubmitted 3 months agoIf anyone has a moment, I’d love some feedback on two of my files:
_feature.scssand_cards.scss(specifically the//INDIVIDUAL CARD STYLESsection).Is the way I’m using Grid there effective? Would you simplify or improve anything?
Any tips, tricks, or advice—no matter how small—are very welcome and much appreciated!
Responsive Four card feature using CSS Grid
#vite#sass/scssPSubmitted 3 months agoI’m really curious if there’s a better way to switch between different Grid layouts without relying on
@mediaqueries. Like with Flexbox, I can useflex-wrap: wrap;to let items drop to a new row and kind of change the layout automatically.- Is there something similar I can do with CSS Grid?
- And would that actually make sense for this particular challenge?
Any tips, tricks, or advice would be super appreciated!
Responsive preview card - media queries + clamp()
#sass/scss#vitePSubmitted 3 months agoIf anyone has tips on handling responsiveness more effectively, I’m all ears! Same goes for my mixins — if you see anything I could improve or clean up, let me know. Any trick or suggestion is totally welcome and appreciated 🙌
Recipe Page using Sass/SCSS and build with Vite
#sass/scss#vitePSubmitted 3 months agoI’d love some feedback on my code structure, especially when it comes to:
- The way I’ve organized my mixins and variables
- Any potential improvements to the modularity of my code
- Suggestions for improving my HTML structure, particularly around semantic elements and accessibility
Any tips or suggestions would be super helpful!
Latest comments
- P@Networksentinel
Hi there!
First off, I checked out your solution from all angles and tested its responsiveness—gotta say, it looks great! It's interactive, responsive, and matches the Figma file really well. Awesome job! 👍
Quick question though: why did you create two separate components? 😄
I also noticed a couple of small areas where things could be improved:
-
When you click the share button to show the tooltip, the animation is super smooth (and by the way, I love the hover effect on the icons!). But when you click the share button again to hide the tooltip, it disappears instantly. I think adding a smooth hide animation would make it feel even more polished.
-
This is just a small UX/UI suggestion, but a common one: you could make the tooltip close when the user clicks anywhere outside of it. 🙂 It helps with overall usability.
I’d really love to give more specific advice on how to implement these in React, but I’m not quite there yet—I’m currently working with Tailwind CSS and vanilla JS, and planning to transition to React a bit later.
Once again, great work—keep it up, and happy coding!
-
- P@lenny131P@Networksentinel
Hi Leonard!
Your solution looks awesome, and the responsiveness is totally on point—really great job!
I especially liked how you used
@mediaqueries inside your@mixins for text presets. It honestly never occurred to me that I could do that 😄.I went with a different approach and used
clamp()for font sizing, so it adapts based on screen width. Something like this:$font-size-xl: clamp(2.5rem, 4.1666vw + 1rem, 4rem); // desktop: 64px, tablet: 48px, mobile: 40pxI think my version works well for typography when only one or two properties need to adjust, but your method looks much more scalable—definitely something I’ll keep in mind for larger projects. So thanks for the inspiration!
Also, your code is really well-organized and easy to read—nice job there too.
Just two small suggestions I'd like to share:
1. Modular SCSS – Right now, everything is in one big file. Even though your code is spaced out nicely, it can still be a bit much to scroll through. You’ve already used
presets.scss, so you could break the rest down into partials like:hero.scssmain-content.scssfooter.scss
It’s a great way to separate concerns and make things more maintainable.
2. SCSS Imports Tip – For smaller projects, you can import SCSS files like this:
@use "presets" as *;That way, you don’t have to reference the file name every time and can just do something like:@include text-preset-4;Anyway, I hope some of this was helpful! And if not (since you posted this a month ago 😄), at least I learned something new from your code—so thanks again, and keep up the great work!
Marked as helpful - @Sarah-okoloWhat challenges did you encounter, and how did you overcome them?
The gridddd, really stressed me out. I didn't just want to make a static grid layout. I wanted something dynamic. Guess I shot myself in the leg with that one. Anyways, after much trial and error, I finally was finally able to get it right😊.
What specific areas of your project would you like help with?I would like feedback on the overall responsiveness of the site and on the accessibility as well. Thankss
P@NetworksentinelHi Sarah!
I really liked your take on this challenge — the way the cards load when the page refreshes is cool!
Also, I totally felt your pain when you wrote, “The gridddd, really stressed me out.” 😄 I could see it in your code, and honestly… same here! Grid layouts can be tricky, but you did a great job pushing through it.
While going through your solution and checking out your code, I noticed a couple of small things — hope you don’t mind me sharing:
1. Kira’s card not spanning as expected (600px–950px) At screen widths between 600px and 950px, the fifth card (Kira) isn’t spanning two columns — instead, it’s spanning two rows, probably because of this:
@media (max-width: 950px) { .wrapper { grid-template-columns: repeat(2, minmax(250px, 1fr)); } .card.style5 { grid-column: 1; grid-row: span 2; } }I think what you might’ve meant was:
.card.style5 { grid-column: 1 / span 2; grid-row: span 4; }2. Layout gap between 950px–1250px In this range, there’s an empty space in the bottom-right corner of the grid. Not sure if that was intentional, but you could fill that space by either:
- Spanning the 4th card (Patrick) across the 3rd column:
.card.style4 { grid-column: span 3; }- Or making the 5th card (Kira) span three rows:
.card.style5 { grid-row: 1 / span 3; }I know it’s been 8 months since you posted this solution, so maybe you’ve already spotted these things or would handle them differently now. Either way, I hope this feedback helps a bit!
Also, if you do happen to see this, I’d love to hear how you’re doing now! How do you feel about this solution looking back? Would you change anything? I think it’d be super interesting to hear your perspective after some time has passed.
Thanks again for sharing your work — and if you don’t get a chance to respond, no worries at all. Keep up the awesome work, and happy coding! 😊
- P@NataJenkinsP@Networksentinel
Hi Nata!
Looking at your solution, a couple of things came to mind:
First off, I really love your approach! Honestly, I wish I could use React as you do.😂 You seem to be doing a great job already.
Would you mind sharing some tips or suggestions on how to get started with React? Maybe tell me a bit about your journey or progress? I’d love to get inspired—or maybe even borrow some of your ideas! 🙂
I noticed a small issue with the layout on tablet screen sizes, around 856px to 740px—the cards get a bit squished. At first, I wasn’t sure why because everything else seems to scale nicely, then I realized you skipped the tablet layout and jumped straight from mobile to desktop. Maybe adding the tablet layout would help—it’s more vertical, so it fits better on those screen widths.
Also, I saw a lot of fixed pixel values in your code. Using
emorremunits instead ofpxis a common best practice in responsive design and it can improve UX. I personally useremfor almost everything and even create variables for them, which helps keep projects scalable.I’d really appreciate any tips or tricks you can share about React—thanks in advance! If you don’t have time to respond, no worries at all. Keep up the great work and happy coding! 🚀
- P@RicardoGeadaWhat challenges did you encounter, and how did you overcome them?
I wasn’t sure how to load different images for mobile and desktop. After some research, I found the <picture> element, which made responsive image handling much easier.
What specific areas of your project would you like help with?I’d appreciate any feedback on how to improve the responsive design, especially regarding layout, image handling, or best practices for different screen sizes.
P@NetworksentinelHey man!
Really liked your take on this — it’s responsive, looks great on all screen sizes, and pretty much nails the design. What more can you ask for? 😄
One small thing I’ve been playing around with: using a combo of
clamp()and@mediaqueries for more fluid layouts. It’s not super necessary for this specific challenge, but it can help make things scale more smoothly between breakpoints instead of jumping from one layout to another.In my own solution of the same challenge, I tried it out just to experiment — the result wasn’t perfect (the card gets a bit weird at some sizes), but it showed me how useful that combo can be.
Anyway, just thought I’d share!
Keep up the awesome work and happy coding! 🚀
Marked as helpful - P@RiickyRiickWhat are you most proud of, and what would you do differently next time?
This project design had me in a twirl. The background image was a hassle! I couldn't get it to work until I used @media queries, but I feel this was a bit messy since my design ended up being very glitchy.
I managed to make it work somewhat, but in the end, I need to find a better approach and/or figure out how to correctly use @media queries with background size and position.
Another mistake I made was not making my text and text containers responsive. I accidentally added px instead of % so that they could size correctly with the viewport.
What challenges did you encounter, and how did you overcome them?Coming into this project, I learned that setting up a background image can be very difficult. I struggled to position the image correctly within all the viewports, which meant not having fluidity when changing throughout all the viewport sizes; instead, it had a glitchy, small-to-big change in size.
I got some good responsiveness after I used the % and vw to get a responsive outcome.
I also made the mistake of not using px instead of % on my .main-header, which created an unresponsive box.
What specific areas of your project would you like help with?If you can give me any advice or tips for a better solution with background-image positioning or another better option instead of the background image, please do. I would appreciate it very much!
Happy coding and blessings to all!
P@NetworksentinelHey man! 👋
Just wanted to say—I really love seeing the effort you put into this challenge. I totally get the struggle you're talking about. I go through the same rollercoaster with every project 😂. Frustration, confusion, a bit of despair... and then boom—“Yo, I got this!” That feeling when it finally clicks is the best. And yeah, every time it gets a little easier and cleaner.
Anyway, I think your final result turned out awesome! It looks clean and works well on all screen sizes. Great job on that 🙌
I checked out your code and had a couple of small suggestions—nothing major, just stuff that might help you level up a bit:
- You’re using a lot of
<div>s. Totally fine, but here’s an advice that stuck with me: "If there’s a more meaningful HTML tag, go for it-avoid using<div>as much as possible. Your accessibility and SEO will thank you latter." 😂. Like this bit:
<div class="nav-header"> <h3 class="nav-title">skilled</h3> <button class="nav-btn">Get Started</button> </div>That could easily be a
<nav>(which is what it's doing anyway), or maybe even a<header>. Speaking of<header>brings me to the next point...-
You’ve got classes like
nav-headerandmain-header, which is totally cool, but there's actually a<header>tag you can use. Every section can have its own<header>and<footer>, and your main one can sit right at the top of<body>, outside of<main>for stuff like - logo, navigation, call-to-action button, etc. -
Your CSS is all in one big file, which works, but splitting it up with some comments (like
/*GENERAL STYLES*/,/*NAVIGATION*/,/*MAIN*/, etc.) helps tons when you come back to it later or if someone else checks it out (especially when working in a team).
-
Also, something to look into: MODULAR CSS. You can have a separate file for each section (like
general.css,nav.css,main.css, etc.) and import them all into one main CSS file - and only that one will be linked to your index.html. It keeps things clean and more readable, especially if you ever start using Sass or another preprocessor. -
NOTE: Modular CSS is a little harder on performance, but on small projects it's absolutely fine — on bigger or more complex projects, the best way is to use a pre-processor (like Sass or Less) and even better, pair it with a build tool (like Vite).
- Tiny detail, but adding a couple of
<meta>tags in your<head>(like description and author) is a nice touch—makes your project feel more complete.
Overall, it really looks like you’ve got a solid handle on HTML and CSS, and it’s obvious you care about getting better.
Just wanted to share a few tips that helped me too. I hope this will be of some value to you. Keep it up, man—you’re doing awesome! 💪
Marked as helpful - You’re using a lot of
