Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Ken

@kenreibman
New York, NY
935Points

hey

Latest Solutions

  • Desktop design screenshot for the Sunnyside agency landing page coding challenge

    SUNNYSIDE AGENCY LANDING PAGE using CSS Grid, Vanilla JavaScript

    #accessibility#bem
    • HTML
    • CSS
    • JS
    0
    Ken935
    Submitted

    This was actually a lot of fun, and I learned a lot from this project. I learned that...

    • There is a big advantage to Figma. This project almost made me want to get the FEM Pro subscription so I can see the exact distance and measurements of certain elements.
    • Planning is very important. I don't think I did enough initial analysis of the design and planning what variables to create.
    • This project also helped me realize how useful the gap property is.

    If anyone is reading this, I would like to have some assistance on one thing from this project.

    • Currently my mobile navigation menu can be toggled by clicking on the hamburger icon.
    • I tried treating the mobile nav window like a modal and attempted to make it so that it listens to an outside click and closes the menu. However, I could not get it to work. If anybody can share with me their ideas on how to make it so that the mobile nav can close when the user clicks on the hamburger icon AND outside of the mobile nav menu, that would be great!
  • Desktop design screenshot for the Tip calculator app coding challenge

    Tip Calculator using CSS Grid, Flexbox, Vanilla JS

    • HTML
    • CSS
    • JS
    5
    Ken935
    Submitted

    Going to keep updating this calculator, there are a few bugs. Any feedback would be greatly appreciated.

  • Desktop design screenshot for the QR code component coding challenge

    QR Code Component using CSS

    #accessibility
    • HTML
    • CSS
    0
    Ken935
    Submitted

    Pretty simple and straight forward

  • Desktop design screenshot for the Time tracking dashboard coding challenge

    TIME TRACKING DASHBOARD using CSS Grid, Flexbox, Vanilla JS, and BEM

    #accessibility#bem
    • HTML
    • CSS
    • JS
    0
    Ken935
    Submitted

    Wow. This one was a real challenge. I had to constantly look up a lot of things especially on the JS part.

    Any feedback is always appreciated.

    I learned:

    • More about grid
    • Using JSON files
    • Appending content with JS
    • Utilizing flex-wrap to make things more "responsive" when content gets too small
  • Desktop design screenshot for the Huddle landing page with a single introductory section coding challenge

    HUDDLE LANDING PAGE (SINGLE) using CSS Grid, Flexbox, and BEM

    #accessibility#bem
    • HTML
    • CSS
    2
    Ken935
    Submitted

    Another challenge pushing me to learn more. This was really fun, and I can't wait to go on to the next one!

    I struggled a lot with trying to make the page as responsive as possible. Again, the discovery of clamp() has helped me a lot with this, and it is SO useful.

  • Desktop design screenshot for the Ping single column coming soon page coding challenge

    Ping Coming Soon Page using Vanilla JS, Flexbox, BEM

    #accessibility#bem
    • HTML
    • CSS
    • JS
    5
    Ken935
    Submitted

    This challenge was surprisingly difficult to me. It took me two days to complete. I also had to take a few breaks during the 48 hours because certain things weren't going the right way for me.

    This video by Kevin Powell helped me tremendously with responsiveness.

    The video taught me about:

    • clamp() -- can't believe I never used this before!!
    • margin-inline
    • utility classes to make my projects easier to organize and create.

    I absolutely love frontendmentor for another challenge that pushes me to teach myself and learn new skills.

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    Four Card Feature Section

    5
    Ken935 | Posted about 1 month agocommented on Anaz Anoiar's "Four card feature section" solution

    Professionally and personally I use the clamp() function for truly responsive typography. This will genuinely take your responsive game up to a professional level.

    Check out this video: https://youtu.be/U9VF-4euyRo

    0
  • Solution screenshot
    • HTML
    • CSS

    QR code component challenge hub

    6
    Ken935 | Posted 2 months agocommented on dannyguzman31's "QR code component" solution

    Nice job on the submission! Unfortunately the preview image isn't appearing on here, but I looked at your live site and it looks great.

    I noticed you were centering the div twice with your body and container. Your body could have been your container in this case, and the container could have been your items. In my opinion it was not necessary to do that.

    I would also recommend when you're centering a div to use min-height: 100vh instead of height: 100vh to make responsiveness easier in future projects. Setting a fixed height like that may bring some issues in bigger projects. I would also stray away from setting a fixed width like 100vw, as well, for parent elements. The set width also applies to containers, or cards as well. I would set a max-width instead, which is more responsive friendly, and you can also reassign the dimensions in a media query when the screen gets bigger/smaller.

    As you do bigger projects on here, you should also start giving your elements more "meaningful" names. Always think about someone else reviewing your work, and wondering if they would be able to understand what each line is referring to. If it was a bigger project, I would have no idea what p1 and p2 is referencing. Start using naming conventions like BEM early, and maybe start putting comments in your code as well, which will definitely help people in this community when they review your code.

    I hope this helped!

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Responsive article preview with flex and JS

    2
    Ken935 | Posted 2 months agocommented on Florin.Porut's "Article preview component" solution

    Hey! Great submission!!

    Instead of having share__options as a child element of your share__section, I would have it as a child element of your main content. That way your position absolute would be within that container, making it easier for you have the same position.

    I hope this helps!

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Responsive Landing page using flex-box

    2
    Ken935 | Posted 2 months agocommented on Juraj S's "Sunnyside agency landing page" solution

    Hey! Great submission.

    I was wondering why you built the page entirely using flexbox. Did you want to practice flexbox? Are you more comfortable with flexbox? I feel like you could have a lot less lines of HTML and CSS if you use grid.

    • Some of the paragraphs and sub-heading are the wrong font-family as well.
    • I don't think you included a function mobile menu as well, which I would have loved to see.

    Regardless, the design looks great, and you did a great job making it responsive!

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Intro component with signup form

    5
    Ken935 | Posted 2 months agocommented on Misiu's "Intro component with sign-up form" solution

    I forgot to add on... for your JavaScript, instead of changing the innerHTML, I would create a class that reveals the error text like, .show-error with display properties, and add the show-error class to the element with .classList.add('show-error')

    changing the innerHTML is not the most correct way to do it, as well as setting the opacity to 1 and 0 does not hide it for people with screen readers so they will still get an error message regardless of if you can see it on the screen or not.

    You can take a look at my code here as well.

    0