Skip to content
OverviewSolutions
19
Comments
8
John Pugh
@JohnPugh688

All comments

  • John Pugh•340
    @JohnPugh688Submitted 6 months ago
    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

    2
    John Pugh•340
    @JohnPugh688Posted 6 months ago

    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.

    0
  • mrcordova•1,260
    @mrcordovaSubmitted 6 months ago
    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•340
    @JohnPugh688Posted 6 months ago

    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.

    0
  • John Pugh•340
    @JohnPugh688Posted 6 months ago

    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.

    0
  • Dhanush Pani•30
    @dhanushpaniSubmitted 7 months ago
    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•340
    @JohnPugh688Posted 7 months ago

    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

    0
  • Makha•570
    @mbd89Submitted 7 months ago
    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•340
    @JohnPugh688Posted 7 months ago

    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!

    0
  • Martin Mwaka•390
    @TemceoSubmitted 7 months ago
    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•340
    @JohnPugh688Posted 7 months ago

    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
    1
  • Jordan Davenport•930
    @jjdavenportSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    The desktop grid and building a mobile first layout.

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

    Difficulty with the layout of the cards, I prefer to use flexbox so they are not identical to the original.

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

    Overflow and using clamp with the width and height of the cards, and how to setup the layout of the cards as flexbox is not good enough to match the orignal, so the cards may have to use margin instead.

    Four card feature section with Grid desktop and flex box mobile

    1
    John Pugh•340
    @JohnPugh688Posted 7 months ago

    Hi Jordan,

    You solution looks great! i have a few suggestions that might help.

    using flex in your cards and justifying space between has caused your spaced things to far apart. instead of using flex to pace things out try adding padding or use Gap. this gives you control of your spacing.

    Also its worth setting max width to your main section to avoid things over stretching on bigger screen sizes. giving a max width of 1440px will prevent this from happening. I also like to add margin x of auto to keep things in the centre off the screen although Im not sure this is absolutely necessary so if anyone more experienced can confirm this that would be great.

    Also adding a box shadow to the cards makes them pop out and look even better.

    Hope this helps

    Marked as helpful
    1
  • John Pugh•340
    @JohnPugh688Posted 7 months ago

    Hi Prem,

    Your finished project looks great. I noticed you have used flex (which is fine apart from the justify between) for you mobile design and to create spacing between you content.

    Id suggest using gap: as this gives you control of the spacing size between.

    try this instead and see what happens:

    .wrapper .dets{ height: 60%; padding: 30px; display: flex; flex-direction: column; gap: 0.75rem/* 12px */; (You can change the sizing to suit) }

    Hopefully this helps.

    0