Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
123
Comments
68
P
Justin Green
@jgreen721

All comments

  • jad alromhein•100
    @jad58200
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    One of the things I am most proud of in creating my Blog Preview Card project is how I was able to combine clean, structured HTML with appealing CSS to design a visually engaging and functional webpage. The carefully styled layout, including the central container with soft shadow effects, rounded corners, and an eye-catching hover interaction on the "HTML & CSS Foundations" header, brings the page to life. The use of the Figtree font throughout adds a modern, professional feel, while small touches, like the avatar image and date section, enhance the blog’s overall look. If I were to do things differently next time, I would focus on adding more interactive features, such as a comment box, theme toggle, or animated transitions, to improve user engagement and give the project even more dynamic functionality. Overall, this project has been a great exercise in web design and a rewarding step forward in building sleek, interactive front-end components.

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

    One of the challenges I encountered while creating my Blog Preview Card was ensuring that the container's layout appeared balanced and centered across different screen sizes. Initially, the container looked off-center and uneven, especially when viewed on larger screens, due to improper margin settings and a lack of responsive design considerations. To overcome this, I adjusted the margins and padding values, implemented a flexible box model using display: flex, and fine-tuned the layout with relative units like percentages instead of fixed pixels. By doing this, I achieved a more centered, cohesive design that adapts smoothly to various screen sizes. This challenge taught me the importance of responsiveness in modern web design and how small tweaks can make a big difference in the overall user experience.

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

    One specific area of my project where I would appreciate some help is improving the user experience when the live URL is opened. Currently, when the page loads, it doesn't automatically center the view on the card container, which is the main focus of the design. Instead, it seems to open at a random section of the page, requiring manual scrolling to see the content properly.

    If anyone could explain how to adjust the settings so that, upon loading, the page zooms in and centers on the card container, I would be grateful. Whether it involves CSS tweaks, JavaScript, or viewport adjustments, I'd love to learn the best practice for making sure users immediately see the container front and center when they open the page.

    Simple blog preview card page solved using basic HTML & CSS elements.

    #bootstrap
    2
    P
    Justin Green•2,940
    @jgreen721
    Posted 3 months ago

    So, here's an easy 'hack' to get a centered element. if you do body{height:100vh,width:100vw,display:flex,align-items:"center",justify-content:"center"} will automatically center your child element. If there was more then 1 child you could use flex-direction:"column" to maintain a vertical line as flex will normally default into children elements appearing in a row but again for just a single child as is the case here with the .container, that will keep your element centered on all screen sizes. Careful with those hard coded margins as they will not respond to changing screen sizes and from my viewing do effect the the setup. Might want to add a little padding to the card as its a little squeezed with the footer at the bottom but not a big deal there, overall the card looks good!

    Marked as helpful
  • Andrine Camu•60
    @andzz-zz
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the similarity in the look of my solution and the challenge. Hopefully I can improve on the next one

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

    As you can see, I didn't create a code for the rest of the buttons because I'm not sure how to do it with javascript.

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

    I tried different codes for this but ended up putting only one because it kept on giving me errors. Question 1: Is it possible to achieve this project with vanilla javascript? If so, please let me know how. Also, if it's not possible, what frameworks/libraries should I learn to enhance my knowledge on this?

    Question 2: Am I in a good spot to learn about ReactJS & SASS ? Or should I keep on spending more time on CSS , HTML & JS ?

    Question 3: Just adding this but I didn't realize there was a solid color in the background, what is the best way to do this??

    I am also learning by using freecodecamp but any resource recommendations will be appreciated!

    Thank you much!

    FAQ Accordion solution

    2
    P
    Justin Green•2,940
    @jgreen721
    Posted about 1 year ago

    Nice work. The size and centering of everything looks good!

    So, there is a .querySelectorAll() that is good for when you want to grab more than one element. You targeted the ID which is obviously going to(should) be unique for each one but if you give them a shared classname or even .querySelectorAll("button") will work but that will grab all the buttons on the page so a shared classname is a pretty good approach. This in return though will give you an Array (like object) so you will then have to iterate through and attach your function to each one. Easier done than it sounds.

    Example:

       var btns = document.querySelectorAll('.yourBtnClassName`)
     // theres a few ways to iterate through but this is pretty clean
       btns.forEach((button,index)=>{
                button.onclick = showMore()
    })   
    
    

    Now from there, all the buttons will have the showMore() function assigned to it and should toggle that same top answer so there is still some work to do but that .querySelectorAll() should hopefully add a new tool in your JS-ing. You can obviously use it on your answer sections as well and then from there maybe tracking what number (which is what index is by the way -- when you loop through something you get A) the item and B) the number/order in the list of which it is -- starts at 0,1,2,3...) button was clicked with what answer section to change your display on (2nd btn click, change 2nd answer section,etc). lol. Sorry. I know that was kind of a lot but if any of it makes sense or is helpful then! lol.

    So far as the other tools, never hurts to explore but like with anything, the fundamentals will always be pretty helpful in the long run of understanding/ability. Sass/CSS may be a bit more forgivable but Id encourage some time with vanillaJS. Again, nice work and Happy <coding/> 🙂

    Marked as helpful
  • Marlon Melo•20
    @marlonszm
    Submitted over 1 year ago

    Recipe Page - My Solution

    2
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Nice work on this. I did notice you had a fixed width on your recipe card which doesn't always play well with screen responsiveness. Its generally not a bad idea to put a max-width: attribute on their though to prevent it from getting too big though, so max-width:650px would probably work. So far as one of your issues with a borderline on the nutrition portion, I would probably parent each <p> and <h3> up with its own li or div and give that element a little padding and and a borderBottom. You could probably border bottom the 2 elements long as there is no margin. Other ways certainly but just as a starting off suggestion. Hope some of it it helpful and again nice work!

  • nade12209•70
    @nade12209
    Submitted over 1 year ago

    day3

    2
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Hey nice work on this! One possible suggestion is I noticed pretty specific margin values on your .okvir element. I'm guessing this was to center it but the problem with specific values is they generally don't leave much room for responsiveness(size of users screen). Applying the display:flex, alignItems:center, justifyContent:center on the body (or parent container) should fix that and then eliminate any need for the margin values. Also maybe adding a :hover effect for your buttons. Again though, nice work. The design/card itself is 👍! 🙂

  • shawky sobhy•340
    @shawkysobhy
    Submitted over 1 year ago

    Job listing app as full stack app

    #react#tailwind-css#tanstack-query
    2
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    haha, yea I hesitated on even saying since again, your code very much implied this wasn't your first day with it, and I've certainly done it a few times myself thinking "not exactly a site high on the webs radar" but figured with it on FEMentor, may as well mention it! But yea, good stuff on swapping it out and again nice work overall! 😎

  • shawky sobhy•340
    @shawkysobhy
    Submitted over 1 year ago

    Job listing app as full stack app

    #react#tailwind-css#tanstack-query
    2
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    hey man, really nice work on this. The UI and code both, good stuff! I did notice the creds were in plaintext and well, I kind of had curious fun with that and added a job via that route. 🙂 It was just a playful experiment but you might want to tuck those into an .env file! Again though, 👍 on the code overall. Pleasure in checking out.

  • Terry•10
    @TerryHCollins
    Submitted over 1 year ago

    QR Challenge - Mobile Only

    1
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Nice work on finishing the challenge! Yea, looks great on mobile! You might want to put a max-width on either your card (I believe you have as <main>) or on your image. Ultimately, just may want to prevent the image from going a little too big on devices that aren't mobile. I think text-align:center in the main element styling might also help but just a suggestion. Again, nice work though! 🙂

    Marked as helpful
  • MonicaPoloni•60
    @MonicaPoloni
    Submitted over 1 year ago

    Social Links Perfil

    4
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Nice work, especially if just starting out. Everything is centered and positioned nicely! Only real obvious suggestion would be to add some hover styling for your buttons with something like cursor:pointer added to your button css and then button:hover{ whatever you like -- I believe turning the background to green is their suggestion}. Unless it was intentional to leave them more as just list items, in which you might just want to convert that part into an <ul><li>...</ul> section for the user readability, conventions yada yada. lol. Main design though is 👍 so again nice work!

    Marked as helpful
  • shivam kumar•670
    @578shivam
    Submitted over 1 year ago

    Frontend Mentor - Chat app CSS illustration

    1
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Nice job on this kinda tricky challenge. Looks good. I did notice a fair amount of specific width/heights on some of your elements in and general that can be a tricky path. It's generally better to try to style elements with padding/margin and allow the content to naturally fill an element. Putting on limits (ie: max-width min-width) can be alright ,or there is a pretty helpful function called clamp() that takes 3 size arguments and handles responsiveness pretty well. That one is probably best for larger size containers/cards and less for your message/text divs but its still worth mentioning just cause its usefulness. Anyways, just couple suggestions but I appreciate CSS is a many ways to skin a cat type medium so take it for what its worth and again nice work!

  • Patrick Odida•30
    @Patrickodida
    Submitted over 1 year ago

    Mobile First Design using HTML and CSS

    4
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Your approach of <h3> and <p> tags was a good one. I'm not going to pretend to be an expert but the span element is a special inline element and isn't so much related to text-size. Inline meaning it won't 'block' down to the next level. A simple manner I'd use in is with-in a text element where you'd like to style a portion of the text differently.

    <h3 class='red-text'>Here is some text to be red, <span class='fadein-animation'>this part can fade-in </span> but this and the beginning portion wont.</h3>

    lol, dumb example but hopefully it helps a little. Certainly no shortage of long winded explanations on all of the elements to learn more but yea, your approach here was good.

    Marked as helpful
  • Neel Mishra•240
    @Neel-07
    Submitted over 1 year ago

    Stats-Preview-Card-Component

    1
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Nice work completing the challenge. Looks good! You might want to add something to your container css that keeps it in the center of the screen. While your max-width is pretty wide, on a large enough monitor your container will eventually just be on the left side. I believe margin:0 auto would be a quick fix but there are other ways. Also, might want to add a @media query in your CSS and implement some responsiveness for mobile/smaller devices where you can set your card to flex-direction:column so it'll be more tailored for a vertical viewing experience (again, mobile like devices). Again, good work overall! 🙂

  • Subhi C•180
    @Subhi-c
    Submitted over 1 year ago

    React Notification page

    #react
    1
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    I believe you want your assets in the public folder as thats the one the browser 'can check'. You might need to append a ./ to your data img filepaths to also indicate its a file but I'm not sure and think?? that might be more for CSS and if you use background-image:url(). For sure, try the first step and if necessary, implement the 2nd but I think the first should get you images. Nice work on the rest though, the styling looks 👍

  • Nikola Petkovic•90
    @nikolapetkovicdev
    Submitted over 1 year ago

    Responsive landing Recipe page using HTLM and CSS

    2
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    Hey, nice work on this! Nailed the recipe-card stylings! I think?? with you giving a hard-value width setting to your body as 1440px then it prevents responsiveness so far as your recipe card staying centered when the screen width is smaller. A quick fix is 'max-width:1440px' and therefore the body will adjust to the view/screen width and should maintain the centering values you've applied to the recipe card. It may then allow you to nix the 80% adjustment as I think percents can be dicey to work in CSS in general but even without that debate, the earlier suggestion should have it so your screen just adjusts with the view-width and just cuts off once its larger than 1440px which I believe is the desired effect. Nice work though! 🙂

    Marked as helpful
  • P
    Justin Green•2,940
    @jgreen721
    Submitted over 1 year ago

    Responsive Reusable JS template string Solution

    2
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    I appreciate your eye/attention on this! Umm, I think I got confused on prep-item actually being prep-header (this is more a byproduct of the seat of my pants design as I go). Seeing as I didn't assign any animations/observer events to the other sections headers I'm not entirely sure why prep area is my exception, I suppose it was initial loading experience since it'll generally be in view but I'm rambling. I think its fixed and now the prep-section(header and items) is animating accordingly (once when in view and then done). Again, appreciate the look and feedback, and if it's still buggy on your experience... From my eye, it seemed your suggestion more targeted the img/img-container but maybe I read it wrong. It kind of became a templated mess down there so again I appreciate you parsing through it! 🙂

  • sanju321GH•270
    @sanju321GH
    Submitted over 1 year ago

    QR code

    1
    P
    Justin Green•2,940
    @jgreen721
    Posted over 1 year ago

    I don't think your image is being displayed but I believe its as easy as adding a . before the filepath to insinuate to the browser it's a local file rather than a library/etc. So ./image-qr-code.png should fix it.

  • Hafsa TATA•10
    @HafsaTATA
    Submitted almost 2 years ago

    QR-code-component ussing css and html

    2
    P
    Justin Green•2,940
    @jgreen721
    Posted almost 2 years ago

    Nice work, and congrats on finishing your first challenge! I see you used % as your width units which, you may want to be careful with since that will respond to the relativity of your devices screen width and so can shrink/grow to undesired sizes. There are a bunch of ways to change it but one way could be to just set a min-width:#px in there. rem and em units also available (and are generally preferred over pixels as again, they handle screen-resizing a bit better). All these things have plenty of information on them so not a big deal to digest all that, main suggestion would in just be setting the min-width. Again, nice work and congrats! 😎

    Marked as helpful
  • P
    Justin Green•2,940
    @jgreen721
    Submitted about 2 years ago

    QR Code solution via (janky) Blender scene/ThreeJS

    3
    P
    Justin Green•2,940
    @jgreen721
    Posted about 2 years ago

    Appreciate the comments! Yea this is basically THREE n Blender flexing their might cause I'm still not familiar enough with either to get too 'tweaky' on settings or optimization techniques. Definitely a new world of considerations/gotcha's but, impressive work (as usually the case,lol) by the engineers of it all!

  • Tobiloba•70
    @Tobiloba1234
    Submitted about 2 years ago

    QR Code

    2
    P
    Justin Green•2,940
    @jgreen721
    Posted about 2 years ago

    Yea it looks like you have the span background set to blue and so that is whats rendering. Since a tags(links) naturally default to blue text, that makes things a little hard to see but that can overwritten in css as well. a{color: foo} -- although this approach will apply the color to all a tags which may not be what you want, in which case just give the a tag a class and target it that way.

    Nice work though, I like the personalized/contact header idea and you nailed it on the card design! 🙂

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