Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
31
Comments
3

Abe

@abe-m1Los Angeles770 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!

I’m currently learning...

Vue, Microservices, Node, Kubernetes, Docker, Design Patterns

Latest solutions

  • landing page with SCSS and BEM


    Abe•770
    Submitted almost 4 years ago

    0 comments
  • Responsive page with Flexbox and SCSS


    Abe•770
    Submitted about 4 years ago

    0 comments
  • Todo App with Vanilla JS


    Abe•770
    Submitted about 4 years ago

    0 comments
  • Mobile first component with SCSS


    Abe•770
    Submitted over 4 years ago

    0 comments
  • Responsive page with Grid and SCSS


    Abe•770
    Submitted over 4 years ago

    0 comments
  • Responsive page with ReactJS


    Abe•770
    Submitted over 4 years ago

    0 comments
View more solutions

Latest comments

  • Anne-Sophie•245
    @annesophie22
    Submitted over 4 years ago

    Mobile first using BEM notation and SASS

    1
    Abe•770
    @abe-m1
    Posted over 4 years ago

    Hi Anne-Sophie, Your solution looks great. For handling media queries, I use the following Mixin below. It lets me pass in a parameter corresponding to the screen size I am targeting, and there are $if statements to determine which media query to apply.

    @mixin respond($breakpoint) {
      @if $breakpoint == big-desktop {
        @media (min-width: 1800px) {
          @content;
        }
      }
      @if $breakpoint == desktop {
        @media (min-width: 1400px) {
          @content;
        }
      }
      @if $breakpoint == tab-land {
        @media (min-width: 1200px) {
          @content;
        }
      }
      @if $breakpoint == tab-port {
        @media (min-width: 900px) {
          @content;
        }
      }
      @if $breakpoint == phone {
        @media (min-width: 600px) {
          @content;
        }
      }
    } 
    

    and to use it:

    .class {
        @include respond(tab-port) {
            height: 1.5rem;
        }
    } 
    
  • Jesus David Rodriguez•30
    @Jesus-D-Rodriguez
    Submitted almost 5 years ago

    Social media dashboard

    1
    Abe•770
    @abe-m1
    Posted almost 5 years ago

    Hey Jesus, Great job on the solution.

    I tried the same approach for the JS file where I toggled classes on and off. But I found it was a lot of code.

    So I came across a solution where you...

    1. use CSS variables to define the light colors.

    2. Then when the toggle is switched on it adds a data-attribute in the HTML.

    3. and then in the css there is a class for the newly added data-attribute inside which the previous defined CSS variables are redefined with the dark colors.

    It made the code cleaner by having to write less lines of code and use less classes.

    this is the article i got it from: (https://raoulkramer.de/css-dark-mode-light-mode-rethought/)

  • P
    Gabriela C•195
    @gcardenasdev
    Submitted almost 5 years ago

    Intro Component With Sign-Up Form using SASS

    1
    Abe•770
    @abe-m1
    Posted almost 5 years ago

    Hi Gabriela, great job on the JavaScript, I noticed a few things,

    1. The HTML would look cleaner if there were no empty elements (<small> tags)

    In my solution to this challenge, I tried not to have any empty elements in the HTML, so if there is an error I created a new element with the error message and appended it to the DOM.

    It is hard to describe it in words, but if you look at my JS solution the code is commented.

    1. The SCSS looks good.

    There are two things that I implemented in my code which I find useful. I used BEM notation, so I could nest selectors in a way that was more readable .

    Also I used a Mixin for media queries, which lets me nest the media queries directly inside the CSS declarations instead of having one large media query at the end of the file.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub