Skip to content
OverviewSolutions
12
Comments
9
P

Jan

@NegligencePhilippines170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Bartosz Dudziak•720
    @bartoszdudziak-dev
    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)

    #sass/scss
    1
    P
    Jan•170
    @Negligence

    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 🤣

  • Jaime•150
    @Jaimealicante83
    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

    #sass/scss
    1
    P
    Jan•170
    @Negligence

    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
  • P
    MAGENE Sem Joel•320
    @Jomagene
    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

    #accessibility#sass/scss
    1
    P
    Jan•170
    @Negligence

    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 🤣

  • P
    Carlos Pizarro•150
    @IncorrigibleSpirit
    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

    #sass/scss
    3
    P
    Jan•170
    @Negligence

    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 🙌🏻

  • Mikov•110
    @mikov144
    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

    #bem#sass/scss#semantic-ui
    1
    P
    Jan•170
    @Negligence

    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 😌

  • P
    Jan•170
    @Negligence

    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 🙌🏻

View more comments