Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
31
Comments
18
Graeme Byrne
@grmbyrn

All comments

  • Abdelrahman mohamed•230
    @Tayara97
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    tip calculator

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    Your code is functional, but several improvements can enhance readability, maintainability, and functionality. Consider using constants for repeated strings and separating logic into smaller, more manageable functions. Improve error handling by providing clear user feedback and ensure that functions focus on a single task. Optimize event listeners by using a single listener for similar elements. Additionally, simplify the reset function for better clarity. These changes will make your code more modular and easier to maintain.

  • Sounak Mukherjee•560
    @kanuos
    Submitted over 2 years ago

    Responsive time tracking dashboard using Svelte and Tailwind

    #svelte#tailwind-css#vite#typescript
    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    It looks good. Nothing in particular to say.

  • P
    yinnie•320
    @wcyin9
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I had to approach the html and css differently now that I'm including JS, and I see myself improving the logic and planning the more I practice.

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

    As I'm super new to JS, I found the logic of the language challenging. It was hard for me to decide where to start and what functions to run, especially since there's so many parts to it that I could miss. I had to look for help a lot of the times.

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

    If there's any area I could improve on or condense my code, please let me know!

    Newsletter Signup Form

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    Looks good, but check your breakpoints. When I make the screen wider, there's a point when it switches to desktop but the content overflows the sides of the pages as it doesn't have enough room. I'd recommend setting your media query to kick in at a wider screen width to avoid that happening.

  • Mussie Habtemichael•420
    @mussieh
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud to write some JavaScript again in a long time. This is not my best work but I will like to polish my solution with animations and transitions.

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

    I faced some issues toggling the share feature for mobile screens. In the end, I was able to get an acceptable solution.

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

    I would like feedback on my approach especially if I made a mistake somewhere.

    Responsive Article Preview Component (FlexBox)

    2
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    It looks good.

  • Isabel Vargas•30
    @isavarch
    Submitted over 1 year ago

    Meet Landing Page

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    The images in the header get cut off at certain page widths. I would recommend reviewing your media queries to make sure that transitioning from mobile to tablet to desktop is smoother for the user. Otherwise, the page looks good so keep it up!

  • EMMANUEL DAMILOLA•170
    @DAEM007
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?
    • I am glad I was able to still get my hands on vanilla css again.
    • Although, I implemented the solution in flexbox (cos I was a bit lazy). One thing I would like to do differently next time would be to implement it using css grids...and truly understand the intricate details of how grids work.
    What challenges did you encounter, and how did you overcome them?
    • Trying to speed up my dev time to practice for real task when I finally get a role...although, I feel I am getting better at that though.
    What specific areas of your project would you like help with?
    • None for now.

    testimonials-grid section

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    As you say, CSS grid would be the better choice for a layout like this and is also a good chance to practice using it, but you did a good job using flexbox to carry it out.

  • Donny•120
    @Donitron
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Learned about css grid! Really nice layout tool.

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

    Had no experience working with the css grid. I used the resources mentioned in the "Building flexible layouts" section.

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

    Is it possible to make the grid responsive without using media queries?

    Responsive four card feature section using HTML & CSS

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    A media query makes this design look a lot better for users on larger screens. It looks good on mobile, but there's a lot of empty space as the screen gets wider.

  • Ali Ajmal•90
    @AA1057
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

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

    ..

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

    .

    Product Preview Website

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    I think the page transitions better for this project with a higher media query, I put 1100px for my breakpoint, but that's personal opinion. Good job overall!

  • MrestebanNeva•60
    @MrestebanNeva
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Encontre algunos problemas usando algunas etiquetas nuevas, como before, pero pde al final usarla.

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

    NO logre alinear bien algunas partes del texto en especial en las listas por el uso del before.

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

    Alineacion de textos, dependiendo su tipo de contenido.

    Pagina de receta usando Flex

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago
    <ol class="instrutions-list">
          <li class="instrutions-item"><h3>Beat the eggs:</h3> In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.</li>
    </ol>
    

    Es mejor usar span en vez de h3 aquí y luego aumenta el font-weight en el CSS. Así, la lista actúa como debería.

    Marked as helpful
  • Federico Fioretti•50
    @fedefioretti
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Like other projects im proud of the result. And this is the first time that i used the terminal and git comands in the right way without mistakes. Also github

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

    still figuring out how to use properly CSS, so i've found in chat GPT not only solutions but also, and more importantly, explanations...

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

    i'd love to read you guys critics or whatever you want to share with me... I'm a rookie student, so still learning here

    Social Links using GRID and FLEXBOX

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    This looks good. In the Figma, it's a little wider on bigger screens. A media query would help accomplish that. But in general, good stuff!

  • Federico Fioretti•50
    @fedefioretti
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Im proud of the result being this one my second challenge.

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

    I could not insert the svg image properly, so i ask chat GPT for some help and done...

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

    i think i don't need to change anything... but im open to critics of course.

    Blog Preview using grid and flexbox

    2
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    Looks good.

  • Ankit Bal•250
    @bingecoder89
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I feel proud because I have comleted this challenge which developed my

    • willpower
    • discipline
    • interest
    What challenges did you encounter, and how did you overcome them?

    I did not face any big challenges. If there was any then I would say it was Git

    What specific areas of your project would you like help with?
    • responsive web design

    QR Card Component

    1
    Graeme Byrne•520
    @grmbyrn
    Posted about 1 year ago

    Looks good. Keep it up!

    Marked as helpful
  • Ahmed Hesham•150
    @Ahmed-Hesham123
    Submitted over 2 years ago

    Responsive grid Social proof section

    1
    Graeme Byrne•520
    @grmbyrn
    Posted over 2 years ago

    It looks good, although I would increase font-sizes on different devices. There's also some overlapping on the footer, which also seems to disappear on smaller devices but I can't see any proof in the CSS of this being intentional. Last thing, it would help to structure your code into folders, eg: putting all the images into an image folder. Aside from those things, all looks good and seems like you're on the right track!

    Marked as helpful
  • RobertoBaiochi•170
    @RobertoBaiochi
    Submitted almost 3 years ago

    Interactive rating using Javascript

    1
    Graeme Byrne•520
    @grmbyrn
    Posted almost 3 years ago

    It's looking really good! The code is well-structured, clearly labelled, and I could easily understand what you were doing.

    Just one thing, you might consider keeping the confirmed option orange after the user clicks on it. When I hovered off it, I thought for a second that my click hadn't registered. Maybe just me, as I think the different shade of grey can work as well. Keep the good work up!

  • GENERATION MLOWE•150
    @Mlowegene
    Submitted almost 3 years ago

    Faq Accordion Card

    1
    Graeme Byrne•520
    @grmbyrn
    Posted almost 3 years ago

    Looks really good at larger screen sizes, but why have you commented out your media query? This would really help your project at smaller screen sizes because at the moment there's side-scrolling on smaller screens. Also, the speed of the dropdown list is a little off. I'd recommend each item appearing and disappearing at the same speed when clicked on. They appear quite quickly, which is fine, but the delay when disappearing made me think for a second that there might be an error with it. Other than that, really good stuff and you should keep it going!3

    Marked as helpful
  • Rutuja•40
    @RutujaDhere
    Submitted almost 3 years ago

    Used HTML and CSS

    1
    Graeme Byrne•520
    @grmbyrn
    Posted almost 3 years ago

    At larger screen sizes this project looks good, but issues arise when making it smaller. First the text on the left moves a lot when resizing browser and the form eventually overlaps the text when the screen reaches a small enough size. Using flex instead of position would help a lot with this. Also, the background design isn't showing up, which can be added to the page in your css. Other than that, good job and keep working!

    Marked as helpful
  • Jordane Gengo•590
    @jgengo-alt
    Submitted over 3 years ago

    Simple Ping Page

    1
    Graeme Byrne•520
    @grmbyrn
    Posted over 3 years ago

    Really good job, especially if it only took 20 minutes!

    I noticed that at the smallest screen size 'We are launching soon' moves over to touch the left side. Also, when I don't enter an email address on mobile, the email address box moves to the left while Notify Me seems to grow longer. But great stuff overall! 👍

    Marked as helpful
  • Graeme Byrne•520
    @grmbyrn
    Submitted over 3 years ago

    Responsive card describing three cars using CSS and HTML

    2
    Graeme Byrne•520
    @grmbyrn
    Posted over 3 years ago

    Thanks for your feedback, Noemi! Using px feels easier in the moment but it's definitely worth the effort of converting them in order to make the design more responsive. Also, I agree that it's a good idea to get used to using :root selector as early as possible. Really appreciate your advice!

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

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