Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
25
Comments
7

Charlie

@Charlie025x360 points

Hi I'm Charlie, I'm currently learning to code so I can one day start off my web development career. One way I polish my skills is by taking on frontendmentor challenges.

I’m currently learning...

HTML, CSS, Javascript, SASS, React.js, Redux, Git

Latest solutions

  • responsive solution using TS, Tailwind, and, react-hook-form

    #tailwind-css#typescript#react

    Charlie•360
    Submitted 12 months ago

    0 comments
  • News homepage, React + tailwind solution

    #react#tailwind-css

    Charlie•360
    Submitted over 1 year ago

    2 comments
  • intro-section-with-dropdown-navigation

    #react

    Charlie•360
    Submitted over 1 year ago

    0 comments
  • Interactive-card-details-form React + tailwind

    #tailwind-css#react

    Charlie•360
    Submitted over 1 year ago

    0 comments
  • Product preview card made with basic html and css


    Charlie•360
    Submitted about 2 years ago

    0 comments
  • built with React

    #react#sass/scss

    Charlie•360
    Submitted about 3 years ago

    0 comments
View more solutions

Latest comments

  • Charlie•360
    @Charlie025x
    Submitted over 1 year ago

    News homepage, React + tailwind solution

    #react#tailwind-css
    2
    Charlie•360
    @Charlie025x
    Posted over 1 year ago

    No I don't, I think that will be over engineering this little static site.

  • Charlie•360
    @Charlie025x
    Submitted about 3 years ago

    made with React and SCSS

    #sass/scss#react
    2
    Charlie•360
    @Charlie025x
    Posted about 3 years ago

    UPDATE* I have just completed this challenge using React.js, using a map method on the data.json to render the cards. All I had to do was convert my html to jsx, impliment a few lines of code from my original js file to the React's .jsx files, and relearn how state and props work.

  • itzjter•120
    @itzjter
    Submitted over 3 years ago

    Html&Scss-nft-preview-card-component-main

    3
    Charlie•360
    @Charlie025x
    Posted over 3 years ago

    Great solution! I took a peak at your code to see how you did the cyan overlay and learned alot from how you utilized opacity with scss.

    Marked as helpful
  • Gregg Christofferson•295
    @gchristofferson
    Submitted over 3 years ago

    Mobile first feature section using CSS Grid and Flexbox

    1
    Charlie•360
    @Charlie025x
    Posted over 3 years ago

    Looks great!! Only possible improvement you can make is to move your images lower.

    I tried to achieve this by adding a "justify-self: flex-end" to your card-icon class, but that didn't work for some reason. However adding "margin-top: auto" to card-icon did the trick. "margin-top: auto" basically gives margin-top the biggest possible, forcing the content to the bottom of it's container. And if you give "auto" to both margin top and bottom to the same content, you end up centering that content vertically. A similar effect can be achieve with margin left and right.

    Marked as helpful
  • Rizky P. Mahendra•390
    @rizky-pm
    Submitted over 3 years ago

    Article Preview Component With ReactJS, Styled-Componenets

    1
    Charlie•360
    @Charlie025x
    Posted over 3 years ago

    Nice solution, the animation was a nice touch too! I also posted my solution using react. After a quick glance at your code I noticed you styled your components within the .jsx files (where I made a separate scss (css) file, and linked it to it's corresponding .jsx component).

    Do you write your styles in the .jsx because that's how you're learning react, or is there advantage to writing styles in this way? Just curious.

    Another question, why do your class names look weird. I think they look generated, is that because of a dependency you are using or something?

  • P
    Ryan McGuire•280
    @mackieva
    Submitted almost 4 years ago

    React component working with state and onClick

    1
    Charlie•360
    @Charlie025x
    Posted almost 4 years ago

    I got the same problem. Adding " overflow: hidden;" to your container might do the trick, however the orange square becomes invisible too.

View more comments
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

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