Skip to content
OverviewSolutions
14
Comments
19
P
Arthur
@ArthurPog

All comments

  • Arthur•290
    @ArthurPogPosted 5 months ago

    Great job Lori! In your bio you say you love writing front-end code and it shows! I went through all of your work. It's good to see you back after a couple month hiatus tackling an even more challenging project.

    With regards to notes regarding this project of yours, the whole thing is not centred vertically, but I reckon you did that intentionally, like your QR code component. And I love the cleanliness of your html and your class names, just remember you don't really need them. With CSS you can use nth-child, first--of-type, last-of-type, etc. selectors to select elements within your code. It's neat especially when creating things like this or generating a gallery of pictures. You should experiment with it some time, it's fun.

    Fingers crossed for your future endeavours.

    Marked as helpful
    0
  • Shamuskado22•120
    @Shamuskado22Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Finish faster than the previous challenge

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

    No difficulties in general

    Blog Preview Card

    1
    Arthur•290
    @ArthurPogPosted 5 months ago

    Great job with this one! After checking out your NFT challenge I had to look around and see some more of your work and my gut feeling checked out. You're amazing at this. If you keep it up, you're gonna rock.

    Just a detail. I am sure you wouldn't miss that in a real world project but this one is missing the hover effect with the headline and shadow, but it's nothing major. Beautiful work!

    0
  • Shamuskado22•120
    @Shamuskado22Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Proud to do 90% just with what I learned

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

    Trying to place one image above another, but I overcame it by learning the position property

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

    Feedbacks are welcome

    NFT Preview Card Component

    1
    Arthur•290
    @ArthurPogPosted 5 months ago

    I love everything about this. The look, the cleanliness and readability of both the HTML and the CSS, the whole thing. You've got something special going on. Keep it up!

    0
  • Alejandro•220
    @Alejandro1709Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    The whole layout its good and i like it

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

    The card layout. overcame it with figma

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

    Responsiveness

    Blog Preview HTML Vanilla CSS

    1
    Arthur•290
    @ArthurPogPosted 5 months ago

    Hey Alejandro! Great solution, I love it. I really like that nifty little animation you added to the drop shadow effect.

    You've stated that you need help with responsiveness. What exactly do you need your little component there to do? To squeeze up, once the screen gets narrower?

    0
  • riverCodes•300
    @riverCodesSubmitted over 2 years ago

    Pretty happy with the time it took me to complete this challenge (3 hours of work), despite it being pretty simple.

    I feel like I understand how to tackle layouts like this pretty well now. I am finally figuring out a workflow to tackle these challenges. I am also learning that everything can't be pixel perfect and learning to let go of obsessing over making everything look perfect.

    I also found and used a bunch of tools in this challenge like Microsoft Power Toys for window layouts, color picker; Greenshot for measurements; a bunch of VSCode Extensions, and some new CSS Reset code snippets. I have been learning for over a month now, and I wonder if there is anything wrong with someone at my stage to use tools and extensions/ is it better to get vanilla practice?

    Any other feedback is welcome as well!

    Single Price Grid Component Using CSS Custom Variables and Grid

    1
    Arthur•290
    @ArthurPogPosted over 2 years ago

    It might not mean much, as I am a beginner myself but - two thumbs waaay up, brother!

    1
  • Arthur•290
    @ArthurPogPosted over 2 years ago

    Exactly what Ahmed said, put what he wrote in the body but also add a min-height: 100vh; for it to properly center it vertically, otherwise it won't.

    Good luck!

    Marked as helpful
    0
  • Chicaofmp•30
    @chicaofmpSubmitted over 2 years ago

    Hi,

    Here is my third Challenge. I need to practice my CSS skills, so dont by shy and criticize my work. one of the problems i had was to add background-image(url)... to overpass this i made img position absolut, but i didnt like so much the solution. Next time i need to improve this one.

    Lets all improve together!

    Thanks

    Francisco "Chicaofmp" Moura

    HTML CSS

    1
    Arthur•290
    @ArthurPogPosted over 2 years ago

    Hey Chacalfmp!

    Beginner here! :)

    Just wanted to give you my two cents:

    • Good job on this one. It looks good, for sure.
    • When I checked the site preview I realized it was only centred horizontally. Do you know how to centre it vertically?
    • Instead of justifying the content of music-div center, you could have done it space-between just like you did with the .icon-plan-price and you wouldn't need the extra margin-left with the .plan-price.
    • Setting a base font-size at the html level and then using rem or em to measure paddings, distances and other font sizes across the project is a better idea because if the user has a different default font size in his browser (due to disabilities or poor eye-sight) your content will not break.
    • Everything (fonts, card dimentions, margins and paddings) is much smaller than the design. If you need help with how to measure a project before you start working on it, lemme know. I came across a few nifty tools while working on my solutions.

    These are just small things. Keep up the good work!

    Marked as helpful
    0
  • Arthur•290
    @ArthurPogPosted over 2 years ago

    Proud and rightfully so! Good job! Good to see you working hard!

    An itsy bitsy detail - If you change the media query from @media screen and (max-width: 500px) to @media screen and (max-width: 800px) it will work better, in my opinion, because from 500-800px it overflows right and horizontal scrollbars are rarely a good thing.

    Fingers crossed for your next project, good luck!

    1
  • T-Bax•60
    @T-BaxSubmitted over 2 years ago

    Took me ages to get the part in the middle with the music icon and the 'Annual Plan' part. I started by trying to do it as a table. Had some trouble centering things vertically within the div.

    I'm not really sure I have the right approach with setting up the fonts and using the weights correctly. Also, what is the best way to get the correct dimensions of things - for instance, is there an easy way to tell how many pixels I should be making the main container.

    I noticed that if I zoom in on the live site, the scrolling functions doesn't work properly. It cuts the top off. Would you have advice on that?

    Frontend Mentor | Order summary card with SASS

    1
    Arthur•290
    @ArthurPogPosted over 2 years ago

    Hey T-Bax, those some good questions that I fought with when doing this challenge as well. I am a beginner, so let's just keep that in mind while we stroll along :D

    First of all, the view code button leads to your QR Code solution :) I manually changed the address to order-summary-component-main and got to your solution that way, so no biggie.

    Alright, so regarding the centering. The problem is with centering using absolute positioning. Absolute positioning sort of removes your element from its container (not entirely, though, just physically so the container it is in acts as though it's empty and it doesn't react, resize when coming into contact with other containers and it also ignores margins and paddings) and it centers it in the middle. This is OK in some cases, but here you want the container to be aware that there is something inside it so it can resize and change and interact with other elements along with the container. This would be a great usecase for flex or grid. Basically if you delete your position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); from .order_summary and put this in the body - display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;, everything should act as you need. Justify-content centers everything horizontally, align-items does so vertically, BUT it needs a precise height to calculate where the center is, that's why we write min-height:100vh because this tells the body to use all of the screen's (viewport's) available height. The margin:0; is to get rid of the annoying horizontal scrollbar that sometimes appears. You can also try the grid solution: display: grid; place-items: center; min-height: 100vh; margin: 0;. Arguably easier. The centering is done using one property.

    Off topic, here's a good rule of thumb when working with images. I recently learned that if it's not important content and just used for illustration purposes, try to load the image as a background-image instead of putting it in the HTML, OR if you load it into the HTML, leave the alt="" empty. This is important to assistive technologies like screen readers. Otherwise they will waste time reading that unimportant "Hero Image - Dancing Person" to the user. So you can spend some time learning how to put images in the background, I believe Kevin Powell has a nice video about that.

    I still don't know what the best practice is regarding fonts. If I should declare it in root or not. And I am not sure about measurements either. For now, I declare it just like you do in :root and then use rem as measurement for nearly everything. I found that if the font size is then changed, everything stays relatively nice and unbroken. But I might be wrong. Time will tell.

    Regarding grouping the music icon, product name and the change link. Sometimes the solution is as simple as grouping things together in divs.

    Example:

    • put the music icon into a div class="icon"
    • put the Annual Plan into a p
    • then put the $59.99/year into a separate p - this is so these are treated as block elements and they don't go inline, but go below each other
    • put both paragraphs into a div class="product-name"
    • put both the icon and the product names into a div class="icon-product-name" together
    • put the change into an a
    • put the whole thing into a div class="whatever"

    Then you can tell the icon and product name to behave as inline-blocks, so they stand next to each other. You can give icon a margin-right, if you want.

    • .icon, .product-name { display: inline-block;}

    Then you can give the paragraphs a margin of 0 so they get closer to each other,

    -.product-name p { margin: 0;}

    Then you can tell the icon-product-name div to flex.

    -.icon-product-name {display: flex;}

    Then finally you can tell the whole .whatever div to display everything as flex, center it vertically AND most importantly justified it horizontally with a space-between value.

    -`.whatever {display: flex;align-items: center;justify-content: space-between;}

    This will do exactly as you please. This can also be done using grid.

    And with regards to your question about finding out the exact sizes if you don't have access to the paid wireframes: There is a really cool open-source free program for Qindows called Greenshot (https://getgreenshot.org/). It basically is like a screenshot on steroids. When you install it don't forget to go to the Keyboard settings in Ease of Access and turn off the "Use the PrtScrn button to open Screen snipping". Then, every time you press your Print Screen button, it will bring up this precise screen snipping tool, which will let you measure EXACTLY how high and wide something is in pixels on your screen.

    If you have any other questions, ask!

    Happy coding, my guy!

    Marked as helpful
    0
  • Olaniran Oluwatobifunmi•40
    @TobifunmiSubmitted over 2 years ago
    • Making the svg eye come up at the centre was difficult for me, I don't think the way I executed it was correct, there's probably a cleaner code for that.
    • If there's a better and simpler way that I could have written any line of code, I'd like to know. Thanks!

    NFT Preview Card Component

    1
    Arthur•290
    @ArthurPogPosted over 2 years ago

    Hey Olaniran! Nice to see you took another challenge and completed it successfully :)

    Regarding the eye on hover, I have a solution for you but first I must say that I had no idea the <g> element even existed before I looked into your code. You blew my mind there, pal! Which is actually not saying much as I am a beginner myself so there's gonna be more of that in the future, I'm sure.

    Anyway, on to business! One of the many simple ways you can do it is with another div. Create a new div with a class="whatever" at the very top in your main and give it all the same parameters in terms of width and height as your div.imag (which I think is 300x300 pixels in your case, looking at your code) with the same border-radius:10px; and margin:25px;. Insert the eye eye-view.svg that came in your challenge files into your newly created div.whatever and classify it too, let's say class="eye-icon".

    Then your CSS should look like the following:

    Icon width so it's not huge - .eye-icon { width: 50px;}

    Now in order for the whatever container to be ABOVE everything else we need the main to have the following CSS property: main { position:relative;}

    Icon container and cyan background

    This is how the dimensions look like - .whatever { width: 300px; height: 300px; margin: 25px; border-radius: 10px;

    Now we make the container above everything else - position:aboslute;

    Add colour that is also at 50% transparency - background-color: hsla(178, 100%, 50%, 50%);

    Next, because you use z-index everywhere we are gonna want to bring it ABOVE everything else - z-index: 5;

    Set the eye in the middle with flex, you know how by now - display: flex; justify-content: center; align-items: center;

    Make it disappear - opacity: 0;

    If you want you can add a transition effect to it, this will give it a nice little animation when transitioning to a new state later. I recommend doing without this and then adding this and seeing the difference when you hover over it with your mouse. - transition: .3s ease-out;}

    So here's a recap:

    .whatever { width: 300px; height: 300px; margin: 25px; border-radius: 10px; position:aboslute; background-color: hsla(178, 100%, 50%, 50%); z-index: 5; display: flex; justify-content: center; align-items: center; opacity: 0; transition: .3s ease-out; }

    Next we need the hover effect

    Simple, we make the whole div appear when we hover over it - .whatever:hover { opacity: 1; }

    Now regarding suggestions regarding your code: I'm sure there are people on here more qualified then I to help you with this in more detail, so here goes my very basic advice: Try not select elements in general. You selected all images with the img in your CSS and made them 300px in width. Try not to do that, especially in a project where you have a plethora of img elements and instead give the image you need to resize a class and use that as your selector in CSS.

    Also, you can make your html more readable by trying to follow some simple nesting rules, like the ones here: https://scalablecss.com/bem-nesting-grandchild-elements/ You can also check Ahmed's code which is incredibly beautifully written just to see what I mean here - @Bayoumi-dev

    I think that's all. Good luck, my man!

    Marked as helpful
    1
  • Arthur•290
    @ArthurPogPosted over 2 years ago

    Masterful as always. Clean job, man! Well done.

    1
  • Arthur•290
    @ArthurPogPosted over 2 years ago

    Hey, my man! Good fix. I now see it on any screen. It's horizontally centered but not vertically. Do you have any idea how to center an element vertically?

    0