Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
27
Comments
11

Jonel Hatwell

@hatwell-jonelPhilippines585 points

Aspiring Frontend Developer.

I’m currently learning...

Front-end Development - ReactJS.

Latest solutions

  • BEM - Block Element Modifier, HTML, CSS

    #bem

    Jonel Hatwell•585
    Submitted about 1 year ago

    0 comments
  • Simple HTML,CSS and JAVASCRIPT


    Jonel Hatwell•585
    Submitted about 1 year ago

    Any recommedation to improved my work is welcome.


    0 comments
  • Simple HTML and CSS


    Jonel Hatwell•585
    Submitted about 1 year ago

    1 comment
  • Simple


    Jonel Hatwell•585
    Submitted about 1 year ago

    0 comments
  • Mobile First, SASS, JQUERY,

    #sass/scss#jquery

    Jonel Hatwell•585
    Submitted over 1 year ago

    0 comments
  • Firebase 10.5, ReactJs, react-beautiful-dnd, Scss. Authentication

    #fetch#firebase#react#react-router#sass/scss

    Jonel Hatwell•585
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • parkerrn9•210
    @parkerrn9
    Submitted over 1 year ago

    Interactive Stats Overview Card

    #accessibility
    1
    Jonel Hatwell•585
    @hatwell-jonel
    Posted over 1 year ago

    Hi, I've seen that when you put the responsiveness of the web in mobile or table size the content is overflowing to the size of the screen. additionally, On your HTML structure I think it much better if you use <main> tag than <div>. then suggest that you use BEM - Block Element Modifier for naming class.

    BEM LINK: https://getbem.com/naming/

    Marked as helpful
  • Caitlin Cataldo•30
    @CaitlinECataldo
    Submitted over 1 year ago

    Responsive testimonial page using CSS grid

    1
    Jonel Hatwell•585
    @hatwell-jonel
    Posted over 1 year ago

    Hi! Great work, I saw your work and I have some suggestion that can possibly improve your work.

    1. I think you should store all your image in one folder directory for much cleaner. file structure for your projects.
    2. the in testimonials class the grid-template-columns, it much better if you just use "grid-template-columns: repeat(6, auto)."
    .testimonials {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
    }
    
    .testimonials {
        display: grid;
        grid-template-columns: repeat(6, auto);
    }
    

    Keep coding. 👍👍👍

    Marked as helpful
  • Onyenekwulum Blossom Echezona•50
    @Cheche114
    Submitted over 1 year ago

    Huddle landing page introductory section

    1
    Jonel Hatwell•585
    @hatwell-jonel
    Posted over 1 year ago

    Hi, Great work. I saw your solution and there's some things that I think need some improvements,

    1. The whitespace when you adjustment the screen to mobile width, it is too tight or narrow.
    2. The Font size you should make it larger.
    3. The spacing in each sentence row, you need to add more space.
    4. the register word in button, you have to change the color based on the design. and add box shadow to it.
    5. the social media's button you should add more padding.

    keep coding. 👍👍👍

    Marked as helpful
  • Bryan Mañon•60
    @Bryan18201
    Submitted almost 2 years ago

    Todo-app

    #react#tailwind-css
    1
    Jonel Hatwell•585
    @hatwell-jonel
    Posted almost 2 years ago

    Good work! Keep it up.

    Marked as helpful
  • Lubna Fathima N•120
    @lubnafathima
    Submitted over 3 years ago

    3 Component Preview Card using HTML & CSS

    2
    Jonel Hatwell•585
    @hatwell-jonel
    Posted over 3 years ago
    1. The HTML lang attribute is used to identify the language of text content on the web. This information helps search engines return language specific results, and it is also used by screen readers that switch language profiles to provide the correct accent and pronunciation. you can fix that by adding lang="en" (if your language is English) inside the html opening tag.

    2. you have one main landmark like <h1> tag to identify the main content. A main landmark provides a navigation point to the primary content of the page for users of assistive technologies. since there is no page title visible in the design, you can make the h1 not to be visible on your page.

    3. In your html code you used role="row" this landmark can be used only within the grid container.

    suggestion:

    1. change your container div to main tag. so you don't need to use role="main"

    2. get rid of role="row" if you do not want to grid your container.

    3. please click the Generate New Report button inside the Report page to know if there is still some issues in your work.

    :) :) :)

    Marked as helpful
  • Lubna Fathima N•120
    @lubnafathima
    Submitted over 3 years ago

    3 Component Preview Card using HTML & CSS

    2
    Jonel Hatwell•585
    @hatwell-jonel
    Posted over 3 years ago

    Hey! congratulations for finishing this challenge. there are some problem the i saw in your work.

    1. when you view the the solution on the small screen device the cards is scrollable.

    2. the cards is too stretch when you view it in the portrait screen.

    3. you use <button> tag instead of <a> tag in learn more button.

    4. the accessibility and HTML issue

    suggested solution: to utilize the size of the cards you can use max-width or max-height to it. and for the <button> tag you must change it to <a> tag because when you are linking content in the website its ideal to use <a> tag than <button> tag. as for the accessibility and html issue you can check it in report page.

    articles:

    https://medium.com/design-code-repository/a-vs-button-b859547cae4d

    https://ishadeed.com/article/min-max-css/

    https://www.google.com/amp/s/www.freecodecamp.org/news/css-properties-examples/amp/

    Marked as helpful
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