Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
23
Comments
199

Dylan Heslop

@dylan-dot-cNew York2,460 points

I am a passionate front-end developer with backend experience. I specialize in building web applications using React, TypeScript, Vite, and Tailwind CSS. On the backend, I have experience in creating full-stack applications with REST APIs built using Flask or Node.js with Express.

I’m currently learning...

Full Stack Web Development - with Supabase, Firebase, Drizzle ORM, React Cross Platform Mobile Development - React Native, Expo Vue.js alternative for React

Latest solutions

  • Responsive Browser Extension UI | Vue | Tailwind | Pinia

    #pinia#tailwind-css#vue#accessibility

    Dylan Heslop•2,460
    Submitted 3 months ago

    Improvement of accessiblity.


    2 comments
  • Responsive Ticket Generator | HTML, SCSS, JS

    #sass/scss

    Dylan Heslop•2,460
    Submitted 7 months ago

    I would like to know ways I can improve my accessibily, scss code and my JS code.


    1 comment
  • Responsive Landing Page React + Typescript + TailwindCSS

    #react#tailwind-css#typescript

    Dylan Heslop•2,460
    Submitted 8 months ago

    Navbar, better positioning of background images


    0 comments
  • Responsive Time Tracking Dashboard | HTML CSS JS


    Dylan Heslop•2,460
    Submitted 8 months ago

    Making it more accessible and optimizing the js code.


    2 comments
  • Responsive Recipe Page : HTML CSS


    Dylan Heslop•2,460
    Submitted 8 months ago

    0 comments
  • Responsive Social Profile


    Dylan Heslop•2,460
    Submitted 8 months ago

    0 comments
View more solutions

Latest comments

  • Angel•120
    @angel-serrato
    Submitted 2 months ago

    Recipe Page with HTML, CSS and BEM

    #bem
    1
    Dylan Heslop•2,460
    @dylan-dot-c
    Posted 2 months ago

    Great Solution! Looks clean and nice.

    Few things to improve:

    • add some padding on the body element so that it doesn't touch the borders on desktop and remove it on mobile.
    • also remove the border radius on mobile so that it will make the entire screen white background and it will cover up the beige/brown looking color

    Check out my solution and tell me what you think

  • Stryde2022•520
    @Stryde2022
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    n/a

    What challenges did you encounter, and how did you overcome them?

    n/a

    What specific areas of your project would you like help with?

    i wouldnt say specifically but you are welcome to take a lot, it was pretty easy

    notifications page

    #chart-js#pure-css#jss
    1
    Dylan Heslop•2,460
    @dylan-dot-c
    Posted 2 months ago

    Hey it looks good

    But I can't see the navbar on mobile tho

  • Emmanuel•80
    @emperor1239182
    Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    the mobile bar svg provided wasn't displaying.

    responsive pages using Sass css, built with react.js

    #react#sass/scss
    1
    Dylan Heslop•2,460
    @dylan-dot-c
    Posted 3 months ago

    Great Attempt Emmanuel, you put alot of effort into this.

    But to be honest, you need to hone your react/js/frontend skills some more before trying harder challenges like this one.

    Focus on these

    • responsive web design, with media queries or tailwindCSS
    • Form validation techniques
    • flexbox and grid
    • State Management

    And others, I did this challenge with react so you could take a look and tell me what you think!

  • Quyt•350
    @220100dungvan
    Submitted 3 months ago

    time tracking dashboard using scss, html,

    1
    Dylan Heslop•2,460
    @dylan-dot-c
    Posted 3 months ago

    Well done on this challenge!

    Main issue to fix is to make sure the last timeframe text shows the last timeframe like 'yesterday' for daily, 'last month' for monthly and not just last week for all.

    Also Maybe ur repo is private because I cant see it, it says not found

  • Stryde2022•520
    @Stryde2022
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    i did this in one sitting, took me over three hours tho lol , i am too freaking slow, and this is a very easy one

    What challenges did you encounter, and how did you overcome them?

    none

    What specific areas of your project would you like help with?

    my earlier project i was advised to make use of the BEM methodology in future projects, so i did some research on it and tried to to apply it here, turns out i dont fully understand it yet, so i abandoned it and ended up sticking with what i know. any help on that would be very much appreciated

    newsletter

    #anime-js#chart-js
    2
    Dylan Heslop•2,460
    @dylan-dot-c
    Posted 3 months ago

    Yo bro! This is a good solution but there are a few stuff you need to cover...

    1. Html forms, here you can wrap it in a form tag and that will give you some added functionality. Mainly how you added the validation, but the form still submits for an empty string. So first wrap the code in a form element. Add <button type="submit"/> add an eventlistener to the form tag .onSubmit. And check the email value, if its wrong, you can have a variable that outputs the error or use return which should stop the form from submitting.
    <input type="email" name="email" id="email" placeholder="email@company.com">
    <button class="suscribe-btn">
    Subscribe to monthly newsletter
    </button>
    

    Overall good solution, make sure to test the website thoroughly so you know everything works as expected. Also in some cases you can relay on HTML validation like required and pattern.

  • OffixialTrust•160
    @OffixialTrust
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    It’s my first time building a multi page project (don’t know what they call it SPA when it’s clearly MPA). I’m proud of myself, as I’m improving my ReactJS skills

    What challenges did you encounter, and how did you overcome them?

    The challenges are too many to mention. How I overcame? Well… let’s say it helps to have a quality support system and networks.

    What specific areas of your project would you like help with?

    Any advice will be helpful. And yes I didn’t use the best of the “best practices”.

    List Of countries with REST API

    #react#sass/scss
    1
    Dylan Heslop•2,460
    @dylan-dot-c
    Posted 3 months ago

    Hey well done with this challenge it looks excellent!

    I think there are a few things to improve

    • Firstly accessibility. I see why you have an handle navigate function to programmatically change the route on click, but one draw ack is accessibility, like a user limited to their keyboard won't be able focus on that country and cant click on it. One solution is to wrap it with an anchor tag so that will be presented as a focusable link.

    • I realized you had a json file with all the countries, and while that ain't a bad approach, it would be good approach to use ajax or just fetch to get from the real API, and use other API endpoints to get the specific country, instead of passing in the data down(still isn't a bad idea and you don't have to worry about the countries API failing).

    • I think you can look up tanstack query to see another way of fetching data from an API.

    Anyways, take a look at my solution did it awhile so forgive the react code, I need to update some things. But tell me what u think

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

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Month - 2nd Place

This badge is awarded to the 2nd placed community member on the monthly Wall of Fame.

Fun fact

The computer in this badge is loosely based on the Commodore PET which was one of the earliest home computers launched in 1977. It came with 4 KB of RAM...that's not a typo!

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