Skip to content
OverviewSolutions
20
Comments
8

John Pugh

@JohnPugh688United Kingdom370 points

🌟 Aspiring Frontend Developer | Always Learning Building with HTML, Tailwind CSS, JavaScript, and React. I bring Figma designs to life with semantic, accessible code. I embrace challenges and believe with tools like ChatGPT, nothing is impossible. Let’s grow together! 💻✨

I’m currently learning...

Tailwind CSS, Vite, React

Latest solutions

  • Responsive Space Tourism Site with Remix and Tailwind CSS

    #react#remix#tailwind-css#typescript
    John Pugh•370
    Submitted 23 days ago

    I'd love feedback on my implementation of the image optimization components - particularly how I handled the responsive image loading strategy. Could this be more efficient? Also, I'm curious if my approach to error handling with the custom ErrorBoundary component is following best practices. Finally, I'd appreciate input on my state management for the tabbed interfaces (especially on the destination page) - is there a cleaner way to handle the transitions between content without the setTimeout approach I used? Any suggestions for improving performance further while maintaining the design would be really helpful!

    0 comments

  • Manage-Landing-Page using Tailwind Css and Javascript

    #tailwind-css
    John Pugh•370
    Submitted 10 months ago

    Let me know if there's a better way to get the slider to work, perhaps you can use tailwind for this?

    0 comments

  • Fylo Landing Page

    #tailwind-css
    John Pugh•370
    Submitted 10 months ago

    How to add a success message for email validation. I tried but couldn't get my head around it. Maybe as this was an afterthought and i didn't want to mess up my javascript

    0 comments

  • Intro section with dropdown navigation using Javascript & Tailwind Css

    #tailwind-css
    John Pugh•370
    Submitted about 1 year ago

    I don't honestly think anyone can help me when it comes to Javascript it just doesn't make sense to me yet. I find it hard to get things in the correct order and get confused and overwhelmed.

    0 comments

  • Faq accordion using tailwind css and Javascript

    #tailwind-css
    John Pugh•370
    Submitted about 1 year ago

    If someone knows how to add a transition to the drop down accordion using tailwind css please drop me a message. thanks in advance

    2 comments

  • Recipe page using Tailwind css html5

    #tailwind-css
    John Pugh•370
    Submitted about 1 year ago

    hard to get everything to match the original design with tailwind but i think i got it close?

    0 comments
View more solutions

Latest comments

  • John Pugh•370
    @JohnPugh688
    What are you most proud of, and what would you do differently next time?

    Finding the tag which allowed me to add the dropdown for tag without the need for any javascript.

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

    i couldn't figure out ow to transition the drop down accordion to make it look a little bit smoother using tailwind. I'm sure there is a way but i just couldn't seem to find a solution so if anyone knows how to get that to work please drop me a message please

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

    If someone knows how to add a transition to the drop down accordion using tailwind css please drop me a message. thanks in advance

    Faq accordion using tailwind css and Javascript

    #tailwind-css
    2
    John Pugh•370
    @JohnPugh688

    Hi Grego,

    Thanks for taking the time give me some feedback.

    Using the <details> tag creates the transition from closed to open. i was trying to find a way to get it to ease in and out. which i've managed to finally work it out without the need for Javascript. Tailwind is amazing! my solution as follows:

    <details class="py-4 max-h-20 open:max-h-72 overflow-hidden open:transition-all open:ease-in-out open:duration-500 md:py-6">

    I will defiantly take your advice when it comes to the alt attribute. I never really thought about being descriptive but it makes sense now you mention it.

    On another note how did you get the text to be bold in your comment?

    Every days a School day!

    Thanks again.

  • P
    mrcordova•1,360
    @mrcordova
    What are you most proud of, and what would you do differently next time?

    I am proud of figuring out how to use radio buttons, css and one line of javascript to get the preset tips stay active, it was surprising involved process.

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

    Working out the logic on when to enable reset and update the totals.

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

    How can I make the layouts and fonts more responsive. Any general feedback is welcomed.

    Tip Calculator app usin CSS grid and flexbox

    2
    John Pugh•370
    @JohnPugh688

    Hi MrCordova,

    Your finished App has turned out great! i,m sure you are super happy with it.

    Not sure how i could advice on improving this.

    I can however suggest trying out Tailwind css. I've found tailwind to be a much easier and faster way to style your project and i can't recommend it enough. Obviously takes a little getting used to but coming from a complete beginner when it comes to this sort of thing i personally struggle more with standard css.

    Hope this gives you something new to try out and if you do decide to give it i go i would love to hear your thoughts once you have had a few months of practise.

  • John Pugh•370
    @JohnPugh688

    Hi Ray,

    Your project look great! It's great to see all the different ways people have approached this one. One thing i would suggest to make things make things easier for you when scrolling throw your code is separating the different cards into sections. I find this a little bit easier as you can collapse each section as you'r not working on it. Although maybe thats not really necessary when you'r using css.

    Another thing i would suggest is not setting a maximum width for different media screen sizing but instead allow it to flex and be responsive as all phones and tablets ect will have different screen sizes and this just allows things to flow nicely.

    Always worth experimenting.

    Good luck with your next project and hope this helps in some way.

  • Dhanush Pani•110
    @dhanushpani
    What are you most proud of, and what would you do differently next time?

    instead of using frameworks, can be done with plain html,css and javascript,

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

    Using regex , the main challenge in this project and writing validation logic

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

    its kinda easy for the junior level i guess, need to be in newbie category

    use regex for the email validations

    1
    John Pugh•370
    @JohnPugh688

    Hi Dhanush,

    Your project looks good.

    One thing i noticed was you forgot to add a function to you dismiss button for returning to your main validation page. You would first need to add an id to your main card and your success card. something like id='Card' and id='successCard' or whatever you want to call them so you have a way of toggling between them. you could then try the following try the following:

    function dismiss() { successCard.style.display = "none"; card.style.display = ""; errorMessage.style.display = ""; emailInput.style.background = ""; emailInput.value = ""; emailInput.focus(); }

    You could also try and get the success card to display the email address the user entered but il let you have a think about how that might be done.

    hope this helps and let me know if you manage to get it to work or even if you think of a better way of doing it.

    Good luck

  • Diagne Makha•570
    @mbd89
    What are you most proud of, and what would you do differently next time?

    Probably find a different way to handle the active states on desktop.

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

    the picture on the left on desktop does not look too good., how do i make it look like the design. i set the height to 100% and no width, or else it does not take all the container. What is it that should be done here ? I have not researched it as i thought it didnt look too bad

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

    ,the picture on the left on desktop does not look too good., how do i make it look like the design. i set the height to 100% and no width, or else it does not take all the container. What is it that should be done here ? I have not researched it as i thought it didnt look too bad

    Article Preview Component with Js

    1
    John Pugh•370
    @JohnPugh688

    Hi Makha,

    Your project looks great!

    I managed to get the image to work look more like the design by adding object-fit:cover and then object-position: left on the medium screen size only. this allows the image to scale to the size of the parent while also making the left side of the image be the main focus point so you will always see that side as you change between screen sizes.

    hope this makes sense. I us Tailwind css so its slightly different for me but i think this should work for you. you may also need to set the width of the image to full (100%)

    Theres so many different ways of achieving the same goal so its always fun to experiment.

    Happy coding!

  • Martin Mwaka•400
    @Temceo
    What are you most proud of, and what would you do differently next time?

    Deploying the site in grid

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

    Using grid, having mainly designed in flexbox previously.

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

    Any improvements on the grid layout

    Testimonials grid

    2
    John Pugh•370
    @JohnPugh688

    Hi Martin,

    Your project looks great and to be honest i cant really fault it.

    To make your project look even closer to the original Ive found an extension you can use called pixel perfect pro which allows to to put the design over your page.

    feel free to click the link below or alternatively just google 'pixel perfect pro'

    https://chromewebstore.google.com/detail/pixel-perfect-pro/nnhifpoojdlddpnhjbhiagddgckpmpfb

    Hope this helps

    Marked as helpful
View more comments