Skip to content
OverviewSolutions
7
Comments
10
George Stawowczyk
@Jorgus1710

All comments

  • Makram M Ibrahim•130
    @pharaohmakSubmitted over 2 years ago

    Hello, I am fairly new to programming and would appreciate any tips and advice to help improve my code.

    NFT-Preview-Card

    2
    George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Hey! Good try on the challenge, it can be intimidating to start so honestly good for you for taking on the challenge. I'm not an expert by any means, but I have some suggestions which may help you.

    For starters, your index.html has some things which need to be looked at. Your general structure seems to be laid out in a logical manner, but when you look closer you will notice you are missing some closing tags on your divs, which can make everything misbehave once you get to working on styling in CSS.

    Line 27: <div class "details"> for example has no closing tag. Line 36: <div class "creator"> also has no closing tag.

    Generally speaking just go over you're structure again, its common to miss a closing tag when your re-arranging your code, as it can easily get confusing. Once everything is wrapped with an opening and closing tag the way you intended it to be, then your CSS should behave in a much predictable fashion.

    Hope this helps! Great try my friend! :)

    Marked as helpful
    0
  • George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Excellent work!

    The only nitpick I have here is that the card thins out ever so slightly when the screen size transitions beyond 992px width. That makes the card look a little too thin in desktop views. If you could remove that thinning that would make the card look perfect!

    Marked as helpful
    2
  • George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Hey Jose, nice work on the challenge! :)

    There are some minor adjustments that you could make which will make the design more true to the original source material;

    • Your headings for each card should use a different font than the main text underneath it. Have a look at the style guide and you will find it there.
    • The main text in the cards should be a bit smaller.
    • The design of the buttons you have displayed at the moment would be the desired result when you apply a ':hover' state to them. In the original design it is just a simple solid white background when not hovered on. As well you can try to reduce the padding on the top and bottom of the buttons to make them a bit thinner.

    At the moment it looks like the challenge is not mobile friendly or responsive, I would highly recommend to get in the habit of designing for mobile first. It will be super beneficial and it will make things much easier in the future. I know this tip alone has helped me tremendously.

    I hope this helps, you did an excellent job! Keep it up! 👏 👏

    0
  • Jack•490
    @Jack-WebDevSubmitted over 2 years ago

    I made some bug fixes. Anything else that can improve my Tailwind skills would be really appreciated :)

    3-Column-Card

    1
    George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Hey Jack, nice job on the challenge! 🙂

    I can't speak much about Tailwind, however I would like to suggest some simple alterations to your design, so that it stays true to the original reference material.

    • The heading to each card requires a different font than the text below it. The style guide will have the appropriate font which you can source from google fonts.
    • On desktop view: The buttons should be closer to the bottom of each card, and the text within them should have less font-weight.
    • On desktop view: Overall card thickness is a little too thick, try reducing the overall width of each card, as well you can play with each cards padding in effort to squeeze its inner content to better fit the original design.

    Overall great job and keep up the good work!! 👏 👏

    Marked as helpful
    1
  • George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    The picture comparison looks good but the solution is not mobile friendly unfortunetly :'(

    You might find this guide useful to help get you started on front end mentor. 🙂

    https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248

    Marked as helpful
    0
  • Kylee Bustamante•90
    @kyleebustamanteSubmitted over 2 years ago

    Could anyone help me with aligning the svgs to the the center in relation to the text to the right of them? As always if you see other areas of improvement feedback is welcome!

    NFT Product Card with CSS Flexbox

    4
    George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Apply the following code to your "flex-item" div into CSS and it should do the trick:

     display: flex;   
 align-items: center;

    By setting display to flex, it sets the items to row by default, and then the "align-items: center" is what's going to line those items up the way you want them to.

    Marked as helpful
    1
  • mycrochip•460
    @mycrochipSubmitted over 2 years ago

    I was so proud to be using a grid layout within a flex layout. Though, I could have gone with just grid; I don't want to pick sides yet in the never-ending grid/flex war.

    Order Summary Component

    1
    George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Hey, very nice card! I noticed however that the mobile view isn't optimized. Perhaps a mobile first approach will be a good habit when doing projects, it certainly has been helping me.

    I think it's great you used the grid approach to lay out the items in the middle of the card. I just did the challenge myself and decided to use flexbox for that section. If your curious how to get the same result using flexbox, I did it as follows to your "grid-columns":

    display: flex;
align-items: center;
justify-content: space-between;

    Setting the display to flex aligns the items into rows by default. After that, to move the items within the container as per design image I simply played with "margin-left" values of the items in the container to offset them however I wanted. I'll be referencing your approach to grid when the time comes for me to begin using it, thanks and keep up the good work!

    Marked as helpful
    0
  • Artem Makhaydinov•30
    @ArtemMakhaydinovSubmitted over 2 years ago

    Third challenge and first time I was realizing what exactly I'm doing and why. Didn't google much this time, didn't copy another's code, but the task is fairly simple. Feel free to comment guys, will be grateful for any response.

    HTML CSS

    1
    George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Hey Artem, the card looks fantastic!

    I noticed however that mobile views aren't optimized. You can achieve this in CSS by using media queries. Have a look on YouTube using "CSS media queries" as your search and you will find many guides that show how to go about adjusting the layout to work with all device sizes. I'm sure you wont find it confusing. Once you have that I'd recommend always building out your designs from a "mobile first" workflow. You will find it much easier this way and it will be a good habit to get into right from the get go.

    Keep up the great work!!! :)

    Marked as helpful
    1
  • Jill Spencer•30
    @jill-spencerSubmitted over 2 years ago

    Here is my completed NFT Preview Card Project. I did have a hard time getting the hover state set for the main image, and I struggled lining up the icons with the wording to the right. Any suggestions on improving my code are welcome. Thank you!

    Mobile First preview card using CSS Flexbox

    2
    George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    This is excellent!

    I'm trying to do this challenge myself, and can't quite understand how the before & after pseudo elements come into play here to make the hover state work on the main image. If you have a source, would you mind recommending me a YouTube video which describes what's at play here? I've been digging for 2 days now and although I feel like I'm on the cusp of understanding how exactly its working, I just cant quite put it together in my mind yet. Its driving me nuts!

    0
  • Ukan•20
    @ukanleiSubmitted over 2 years ago

    My first Frontend Mentor challenge! Since the max-width of the QR code container is less than the mobile width stated in the style guide and it also seems to display just fine on the desktop, I decided to skip using media query just as an experiment.

    Simple Responsive QR code component solution

    4
    George Stawowczyk•210
    @Jorgus1710Posted over 2 years ago

    Card looks great!

    I wonder if its just me, but the mobile view for me shows no margin on your card (.box), so basically making the edges of the card occupy the whole screen horizontally. I wonder if adding a margin to .box would help with that? Im on Samsung Galaxy S9.

    Keep up the good work!

    0