Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Jaime• 150

    @Jaimealicante83

    Submitted

    What are you most proud of, and what would you do differently next time?

    I did in less than three hours working quietly. I would like to be more focused next time and do it faster.

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

    To position the cards in the grid in the desktop version. I had to use different containers to position different elements, like name and position besides the image.

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

    How to improve the code efficiency.

    Testimonial cards using grid and scss

    1

    P
    Jan• 160

    @Negligence

    Posted

    Hi Jaime 👋🏻,

    This is really great work for something done in less than three hours 👏🏻.

    As for How to improve the code efficiency.

    Here's a personal preference that I personally use that you're welcome to try out if you want:

      .container {
    grid:
    "a a b e" 
    "c d d e"
    ;
    grid-template-columns: repeat(4,  1fr);
  }

  .card__1 {grid-area: a;}
  .card__2 {grid-area: b;}
  .card__3 {grid-area: c;}
  .card__4 {grid-area: d;}
  .card__5 {grid-area: e;}

    Marked as helpful

    0
  • P
    MAGENE Sem Joel• 300

    @Jomagene

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm proud of effectively using Sass mixins and variables to streamline my CSS, making it more modular and reusable. I also successfully integrated CSS Grid and Flexbox within media queries to create responsive layouts that adapt seamlessly to different screen sizes. Additionally, I'm proud that my implementation closely matches the original design.

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

    One of the main challenges was maintaining responsiveness while preserving the design's integrity across different screen sizes. I addressed this by combining CSS Grid and Flexbox within media queries. I also used Sass mixins to ensure consistent top-line styles across elements. Achieving the perfect box-shadow and spacing required some trial and error, but iterating on my SCSS setup helped me get it right.

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

    I'm seeking feedback on optimizing my responsive design, particularly in combining CSS Grid and Flexbox effectively. Additionally, I'd appreciate advice on maintaining clean and efficient Sass code, especially with mixins and variables. Insights on refining box-shadow properties for a more polished look would also be helpful.

    Responsive four card feature section using sass, grid and flex-box lay

    1

    P
    Jan• 160

    @Negligence

    Posted

    I love how you've replicated the design almost perfectly 🙌🏻.

    With regards to the feedback you were seeking, try looking up the grid property on mdn, it might help you streamline things.

    Here's how I used it in this project in particular:

    .cards__container {
  gap: rem(30px);
  grid: 
  "    .    t    .    "
  "    s    t    c    "
  "    s    k    c    "
  "    .    k    .    "
  ;
}
.supervisor__card {grid-area: s;}
.team__card {grid-area: t;}
.karma__card {grid-area: k;}
.calculator__card {grid-area: c;}

    This is just MY personal preference though, I'm not sure if this is what you were looking for 🤣

    1
  • P
    Carlos Pizarro• 100

    @IncorrigibleSpirit

    Submitted

    What are you most proud of, and what would you do differently next time?

    During this project, I reviewed some concepts related to designing responsive layouts and working with images.

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

    Overall, the project was manageable.

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

    I'm open for reviews and suggestions.

    Product preview card component using Sass

    3

    P
    Jan• 160

    @Negligence

    Posted

    The only minor thing that I've noticed is the applied color to .card-title

    It's currently set to color: #000000;

    and should instead use color: hsl(212, 21%, 14%);

    But aside from that, it looks perfect in my eyes to be honest, great job 🙌🏻

    0
  • Mikov• 110

    @mikov144

    Submitted

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

    The biggest challenge was to add styles to the list's marker and putting some space between the text and the marker. To solve this problem, I added the necessary styles to "li::marker", added padding-left to my "...-list-item".

    Responsive landing using flexbox, sass, mixins and media queries

    1

    P
    Jan• 160

    @Negligence

    Posted

    Hi Mikov 👋🏻

    I read your note above saying "To solve this problem, I added the necessary styles to "li::marker", added padding-left to my "...-list-item"."

    Hi five to that, I relate so much! 🙌🏻

    You would think that it's a simple design, but that minor detail really throws you for a loop.

    Especially the differently colored ::markers for each section, not to mention the annoying smaller font size for it 😌

    0
  • P
    Jan• 160

    @Negligence

    Posted

    Hi Noel 👋🏻

    This is a great solution that incorporates Vite, React, and SASS. I'm always impressed when people use multiple technologies into these challenges.

    But I'd love to hear Your personal thoughts on this challenge if possible.

    If not, as far I can I tell, it seems that you've nailed the design perfectly. Great job 🙌🏻

    0
  • Jaseera Abubacker• 20

    @jpmaHub

    Submitted

    What are you most proud of, and what would you do differently next time?

    I am proud of creating a responsive design component.

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

    Challenges were mainly achieving the responsive design in mobile. I learned them by doing it and understoond how it all worked together. I struggled to align the card to match with the design like center it.

    Blog preview card

    1

    P
    Jan• 160

    @Negligence

    Posted

    Hi Jaseera 👋🏻

    • Centering

    I noticed that you've vertically centered the component using margin-top: 50%; on line :12 in your blog-preview-card/src/components/BlogPreviewCard.css file.

    Here's an alternative that I personally use with all my projects at present:

    • Alternative
    :root {
  width: 100%;
  height: 100%;
}

body {
  width: inherit;
  height: inherit;
  display: grid;
  place-content: center;
}

    Feel free to check it out and incorporate it into your own if you like it 🙌🏻

    Marked as helpful

    0
  • Yogesh Nagar• 40

    @yogesh2142

    Submitted

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

    he was project at specific time line and full confidences with project completed.

    QR CODE COMPONENT

    1

    P
    Jan• 160

    @Negligence

    Posted

    I think you just initialized your project so I won't be too harsh. Here's a few things I've noticed:

    Structure-wise

    You might want to move the closing </div> from line :23 to line :18 instead. This will separate your .container from your .attribution.

      <div class="container">
  <img src="./images/image-qr-code.png" alt="">
  <h1>Improve your front-end skills by building projects</h1>
  <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  
  <div class="attribution">
  Challenge by : <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a> 
  Coded by : <a href="https://yogesh-Nagar.app">Yogesh Nagar</a>
  </div>
  </div>

    Font-wise

    You might want to connect a "Outfit" from Google Fonts

    Alternatively

    You can instead just copy and paste this code snippet at line :10 in your html

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
    0
  • P
    Jan• 160

    @Negligence

    Submitted

    Do you know of any other functions that you personally use to make life easier? I really had fun creating a simplified SASS file here for convenience functions. The absence of partials is as intended because of the simplicity of this challenge so I would like to receive any feedback aside from that.

    Stats Preview Card Using Component using SASS initialized with Nodejs

    1

    P
    Jan• 160

    @Negligence

    Posted

    Do you guys have other alternatives for accurately getting the image to have the exact same color filter as the design? Although I'm already plenty content with the output from my solution, but it's not quite the same as the design and it won't hurt to try learning from other methods.

    For context, I used a ::before pseudo-element and blended the image with the mix-blend-mode property. This yielded better results in my opinion, but it came at the cost of trial-and-error -- trying out every mix-blend-mode value available to find the best results. 😅

    &::before {
    grid-area: img;
    justify-self: normal;
    content: '';
    background-color: var(--accent-color);
    mix-blend-mode: multiply;
  }
  
  > img {
    grid-area: img;
    height: rem(240px);
    object-fit: cover;
  }
    0