Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
2

darenhua

@darenhua125 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

  • Responsive site with flex, grid, and sass!


    darenhua•125
    Submitted almost 4 years ago

    0 comments
  • First time using Sass!


    darenhua•125
    Submitted almost 4 years ago

    0 comments
  • Modal screens using Finite State Machine (NOT RESPONSIVE SOLUTION)


    darenhua•125
    Submitted about 4 years ago

    0 comments
  • Calculator! Javascript, HTML, and CSS.


    darenhua•125
    Submitted about 4 years ago

    2 comments
  • My Profile Card!


    darenhua•125
    Submitted about 4 years ago

    2 comments
  • Plain HTML&CSS | First Challenge!


    darenhua•125
    Submitted about 4 years ago

    1 comment

Latest comments

  • tediko•6,700
    @tediko
    Submitted about 4 years ago

    Calculator - Mobile first, Sass, BEM, Webpack, vanilla-picker

    13
    darenhua•125
    @darenhua
    Posted about 4 years ago

    I absolutely love your work here. As a beginner, I've been intensely reading your github repo code, and there are just so many wonderful techniques. Just from reading, I learned so much about how to organize and break sass/css files into many (with layout, base, util folders...), niche things like aria-label, a resets.css/sass file... and a LOT more. Thank you for your wonderful work and documentation.

    I have only been exposed to the tip of the iceberg of development- with a cookie-cutter code structure of one big "styles.css" file and one big "script.js" file, and I desperately want to write code that is more organized and can scale more neatly. If possible, could you explain a little the purpose of the div with the class "overlay", that you included before the calculator div? Also, I would greatly appreciate a little breakdown of how you personally tackle the task of splitting your sass files. As far as my beginner analysis goes: base is the folder for "initializing" sass files- like initiliazing with margin resets or font family

    component is for any "component" styles, like modals or other popups that are normally hidden and not a part of the main webpage

    layout is where the main webpage layout happens- for styles like changing display:, width/heights, padding/margins, position, etc... making the webpage layout properly

    and utilities is for helper files with variables, animations, etc that are used in the main style files?

    At the moment, I am also confused on where things like element background colors, things like font size of the text on the keypad keys, or even the background color of the body. Surprisingly for me, I can't find any style like

    body{ background = blue; }

    in the code haha! I'd love to hear any feedback on how I could get to the level you are at, or any tips/resources to getting to write more professional-feeling code.

    Thank you so much!!!

  • darenhua•125
    @darenhua
    Submitted about 4 years ago

    Calculator! Javascript, HTML, and CSS.

    2
    darenhua•125
    @darenhua
    Posted about 4 years ago

    AHH Apologies everyone! I was too excited to post the solution after finishing javascript work that I forgot I needed to make the page responsive...

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

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