Skip to content
OverviewSolutions
8
Comments
12
P
Michael
@Networksentinel

All comments

  • P
    Michael•170
    @Networksentinel

    Hi Leonard!

    Your solution looks awesome, and the responsiveness is totally on point—really great job!

    I especially liked how you used @media queries 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: 40px

    I 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.scss
    • main-content.scss
    • footer.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•350
    @Sarah-okolo
    What 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

    Responsive testimonials page using CSS grid

    #framer-motion#react#sass/scss#vite
    1
    P
    Michael•170
    @Networksentinel

    Hi 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
    Michael•170
    @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 em or rem units instead of px is a common best practice in responsive design and it can improve UX. I personally use rem for 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
    Ricardo Geada•100
    @RicardoGeada
    What 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.

    Product preview card component with SCSS

    #sass/scss
    1
    P
    Michael•170
    @Networksentinel

    Hey 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 @media queries 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
    Rodrigo•250
    @RiickyRiick
    What 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!

    Skilled E-learning Landing Page

    1
    P
    Michael•170
    @Networksentinel

    Hey 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:

    1. 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...

    1. You’ve got classes like nav-header and main-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.

    2. 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).

    1. 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
  • P
    Michael•170
    @Networksentinel

    Hi there!

    I would love to take a closer look at your solution, but the code is not available and the link to the live site takes me to a somewhere else.

    If you plan on uploading the code and the correct link, please let me know!

    NOTE: On the screenshot the solution looks a bit too big, but the content layout, styles etc. looks really good!

  • rrocker89437•80
    @rrocker89437
    What are you most proud of, and what would you do differently next time?

    I'm proud of not having to use google every few minutes. Had some fun with the svg's. Next time I might try to use css grid just for fun.

    What challenges did you encounter, and how did you overcome them?

    I had a few challenges with the html layout and deciding how I wanted to nest the elements but I figured it out.

    What specific areas of your project would you like help with?

    Tips or advice of any kind would be great. I'm always eager to learn.

    Responsive page using flexbox

    #sass/scss#vite#bem
    1
    P
    Michael•170
    @Networksentinel

    Hey there!

    Loved how you upgraded the original design—looks like you had fun with it 😄

    I sometimes feel the same urge to go beyond, but then I wonder… what if I spend all that time improving things and the “client” just says, “Nah, stick to the design”? Still figuring out how to balance that too.

    I checked out your code and really admire how you use functions—definitely something I want to improve on in my next project.

    One small thing I noticed in your main.scss is the nesting. It's not super deep (3 levels), but with so many selectors, it can feel a bit hard to scan through.

    I try to follow a tip I once heard: “If you’re about to nest a third level in Sass, ask yourself if there’s a better way to structure your HTML or modularize your SCSS files.” Even on small projects, I’ve found that mindset helpful—and I imagine it pays off even more on larger ones.

    Keep up the awesome work!

  • Renita M•40
    @renitam
    What are you most proud of, and what would you do differently next time?

    I'm not sure. This project along with the QR Code and Social links profile are pretty repetitive. I got it done in under an hour.

    What challenges did you encounter, and how did you overcome them?

    Not many challenges to report. Code was smooth. I needed to specifically define the tag margins to match the figma.

    What specific areas of your project would you like help with?

    Let me know if I missed anything important!

    Responsive blog preview card with HTML & CSS

    #bem
    2
    P
    Michael•170
    @Networksentinel

    Hi Retina, your solution looks great — I love the mobile-first approach! 😊

    I reviewed your code and wanted to mention a few things I noticed:

    • On mobile screens, when the phone is flipped, the <footer> gets pushed a bit too close to the card.
    • In the Design comparison view, the desktop layout appears smaller than the design specs.
    • The card isn’t fully centered vertically relative to the screen — the <footer> takes up some of the viewport height, which affects the alignment.

    I took the opportunity to clone your repo and experiment a bit. Here’s what I changed:

    • Added some top padding to the <footer>.
    • Centered the card vertically with a few small CSS tweaks.
    • Reorganized index.html and styles.css slightly to reduce repetition and improve clarity.

    I didn’t adjust the sizing yet, since that would take more tweaking. But for sizing, I used clamp() in my version of the challenge because I wanted to complete it without using media queries — and clamp() worked perfectly for that!

    If you're interested, I’d be happy to open a pull request so you can check out the changes — and we can also talk more about how I used clamp() for responsive sizing 🙂

    Whether you respond or not, thank you — your solution gave me the chance to clone a repo and work with someone else’s code for the first time!

    Keep up the awesome work!

  • P
    Michael•170
    @Networksentinel
    What are you most proud of, and what would you do differently next time?

    I’m proud of how I managed to incorporate the design’s fixed pixel values into the clamp() functions. This allowed me to create a layout that stays true to the design specifications while still being fluid and responsive to different screen sizes.

    What challenges did you encounter, and how did you overcome them?

    I struggled a bit with the Figma file. It felt a bit complicated at times, and I had to flip between the design system and the design a lot. But I didn’t solve that issue, I just kept going and pushed through! 😄

    What specific areas of your project would you like help with?

    I'd love to get more efficient with using Figma files. If anyone has any tips or tricks, I'd really appreciate it. Thanks in advance!

    Blog preview card using HTML/CSS/VITE

    #vite
    1
    P
    Michael•170
    @Networksentinel

    I want to expand on two points mentioned above.

    1. Here's a quick example of how I used clamp() to make the main card responsive while sticking to the original design dimensions:
    .card {
  width: clamp(327px, 26.67vw, 384px);
  height: clamp(501px, 36.25vw, 522px);
}

    If you want to know how to calculate those values, just ask 🙂 I’ll be happy to explain.

    1. My Figma struggles: a lot of the elements in the design were labeled with variables like Text-preset-1, etc., and I had to go back and forth (A LOT) to look up what those meant in terms of actual values.

    I’m not sure if I missed a more efficient way to handle that — maybe there's a better workflow I don’t know about? If anyone has suggestions or a smoother method, I’d really appreciate the insight!

  • P
    Michael•170
    @Networksentinel

    Hey, the small version of your solution looks really cute! 😄

    I noticed that the background color isn't quite the one defined in the design. Did you happen to check the Figma files or the style-guide.md? There's a lot of useful info there that might help.

    I’d love to give more feedback, but I’m not super familiar with your code since you’re using Tailwind and React.

    Keep up the awesome work! 😊

  • Curtley•100
    @curtleyAk
    What are you most proud of, and what would you do differently next time?

    I'm proud that I could complete it with my current knowledge. Layouts are quite tricky, and I need more practice.

    What challenges did you encounter, and how did you overcome them?

    I tried using grid before, but I was overcomplicating it a bit. Then I used floats, but the concepts of floats are still a bit tricky to understand, but I will get there with more practice.

    What specific areas of your project would you like help with?

    Mostly, the CSS layouts as a whole, some tips and tricks would do me well to understand them better.

    QR component center using flexbos

    2
    P
    Michael•170
    @Networksentinel

    Hi there!

    You did a great job—it looks awesome!

    I just have one small suggestion regarding semantics.

    I learned a valuable rule that stuck with me: "If there's a more semantic tag you can use, go for it—avoid <div> when possible. Your SEO and accessibility will thank you later!" 😄

    You used a <div> to group related content—sound familiar?

    I think <section> would be the ideal element here. 🙂

    Keep up the good work and good luck with the grind!

  • Dule•90
    @Harty1989
    What are you most proud of, and what would you do differently next time?

    I am proud of my start on projects.

    What challenges did you encounter, and how did you overcome them?

    I hope this will work

    What specific areas of your project would you like help with?

    My biggest problem was send all on this page

    Responsive landing page

    2
    P
    Michael•170
    @Networksentinel

    Hi, if you would like to write more simple CSS code (and less lines) you could use very common shorthands.

    This is your code from style.css:

    p {
  font-size: 15px;
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-align: center;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 10px;
}

    You can achieve the same result with this code:

    p {
  font: normal 15px "Outfit", sans-serif;
  font-optical-sizing: auto;
  text-align: center;
  margin: 10px 30px 0;
}

    The font shorthand packs multiple font-related properties into one line:

    font: [style] [weight] [size]/[line-height] [family];

    Similar for the margin shorthand:

    margin: top right bottom left;

    BONUS TIP

    Margin shorthand rules - depending on how may values you define:

    • 1 value: applies to all sides → margin: 10px; → top, right, bottom, left = 10px

    • 2 values: → margin: 10px 20px; → top/bottom = 10px, left/right = 20px

    • 3 values: → margin: 10px 20px 30px; → top = 10px, left/right = 20px, bottom = 30px

    • 4 values: → margin: 10px 20px 30px 40px; → top = 10px, right = 20px, bottom = 30px, left = 40px

    NOTE: the exact same logic as for the margin shorthand applies for padding, border-width, border-style, border-color, inset, border-radius

    I hope this helps! Keep up the good work :-)

    Marked as helpful