Skip to content
OverviewSolutions
12
Comments
9
P
Jan
@Negligence

All comments

  • Bartosz Dudziak•640
    @bartoszdudziak-devSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    To be honest I'm not proud of this page at 100%. I had a lot of problems e.g. background image behaviour. Overall, it's looks nice comparing with the designed page.

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

    I had to create a lot of sass custom variables to change font sizes and make the page responsive.

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

    I want to improve my solution but I am stuck. My code might be not clean for you. I get lost in it myself 😅

    Let me know what do you think I should change in my solution.

    How to deal with destroying page when zoom out? I used grid and stretched content to keep the page in place but I am not satisfied with it.

    What is the best way to increase and decrease font sizes and paddings to make page responsive?

    Meet Landing Page (SCSS)

    1
    Jan•170
    @NegligencePosted 28 days ago

    All I can say is "I feel your pain" I want to help you, but I'm also struggling with the same thing to be honest 🤣

    0
  • Jaime•150
    @Jaimealicante83Submitted 3 months ago
    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
    Jan•170
    @NegligencePosted about 2 months ago

    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
  • MAGENE Sem Joel•320
    @JomageneSubmitted 3 months ago
    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
    Jan•170
    @NegligencePosted 2 months ago

    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
  • Carlos Pizarro•100
    @IncorrigibleSpiritSubmitted 3 months ago
    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
    Jan•170
    @NegligencePosted 3 months ago

    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
    @mikov144Submitted 3 months ago
    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
    Jan•170
    @NegligencePosted 3 months ago

    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
  • Jan•170
    @NegligencePosted 3 months ago

    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
    @jpmaHubSubmitted 5 months ago
    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
    Jan•170
    @NegligencePosted 3 months ago

    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
    @yogesh2142Submitted 3 months ago
    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
    Jan•170
    @NegligencePosted 3 months ago

    Yogesh Peer Review

    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
  • Jan•170
    @NegligenceSubmitted over 2 years ago

    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
    Jan•170
    @NegligencePosted over 2 years ago

    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