Skip to content
OverviewSolutions
14
Comments
7
chucksterv
@chucksterv

All comments

  • Zain•150
    @zainy2401Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Next time I'm probably going to try to utilize CSS grid instead of Flexbox for the annual plan section.

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

    I'll admit I probably didn't spend enough time on it but the background image isn't accurate and if I fiddled around with it I could figure it out so if anybody could tell me what the obvious solution to this is then it would be much appreciated.

    Order Summary Component

    1
    chucksterv•220
    @chuckstervPosted about 2 months ago

    Hey there. Congratulations on your submission.

    Using background-size: contain; instead of background-size: cover; will help you align more with the design.

    Cheers.

    Marked as helpful
    1
  • Arthur Schossler Dutra•60
    @NotdutraSubmitted about 2 months ago
    What challenges did you encounter, and how did you overcome them?

    some stuff with positioning, just kinda put flexbox in everything

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

    i have a hard time with knowing font size, paddings or margins, sizing of elements, if i have thoese things writen somewhere then i have no issue actually coding, but creating from a photo or even worse, creating something from top of my head then i have no idea on how to make it look good

    QR code component

    1
    chucksterv•220
    @chuckstervPosted about 2 months ago

    Hey mate, congratulations on your first submission. Deciding what sizes and spacing to use when starting out can be rather daunting. Personally I've tried to stick to the standard sizing majority of the designs use and try to change things from there. Here's an article I found that might be of help.

    LearnUI font sizing

    Marked as helpful
    1
  • Dibril Nzangmene•70
    @G87gitSubmitted almost 2 years ago

    1.The difficulty is faced when at a level where the qr-code-image wasn't loading in the live site...Damn

    2.I am really sure if the qr-code-image will load! Don't know why

    3.Nope! Thanks ✌️

    qrcode card with HTML and TailwindCSS

    2
    chucksterv•220
    @chuckstervPosted almost 2 years ago

    Hey mate change your image src from

    src="/qr-code-component-main/images/image-qr-code.png"

    to

    src="./images/image-qr-code.png"

    Your src points to the root of your file structure. While it works on your machine, netlify probably isn't considering that to be the root of your build. That's just a guess though, you'd be better off doing your own research about the reasoning.

    In general it's always a better practice to point to things relative to the current file in most cases. You can read more about file paths here https://www.w3schools.com/html/html_filepaths.asp

    0
  • Esteban Salazar•30
    @IExFireSubmitted almost 2 years ago

    Unfortunately I was not able to position the item next to "Add to cart" (in button part) I tried with position: absolute but once I change screen size... everything smashes xD

    half layout

    1
    chucksterv•220
    @chuckstervPosted almost 2 years ago

    Hey mate, good job on completing the challenge. Have a look at CSS pseudo elements. ::before and ::after specifically. This lets you add content before or after a specified element which is really handy for a problem like this. In my case, I added this using a ::before element on the button I believe.

    Happy coding!

    Marked as helpful
    0
  • chucksterv•220
    @chuckstervPosted almost 2 years ago

    Hey mate, your code looks good. Congratulations on completing the challenge.

    A couple of things I would do differently.

    • As far as I know, floats are mostly not in use unless absolutely necessary. I did a quick search and it seems the only use case for it is when you need text to wrap around something which isn't a requirement here. For the image I would give it a margin-left: auto to align it to the right.

    • I would consider using a grid instead of flex for positioning. While there is absolutely nothing wrong with using flex for this use case, I feel Grid would be a better way to approach it specially when it comes to responsive design.

    Hope that helps! Happy Coding!

    0
  • Open World Project•80
    @OpenWorldProjectOWPSubmitted almost 2 years ago

    I found that the hardest part of this challenge was deciding what the most efficient way to write my code was. This is the first "challenge" I've done and that made it intimidating and I found myself stressing over making sure my code could be understood (which is a good thing). I have a lot of uncertainties with my code i.e. what is the better way of formatting my CSS? I used flex to do the formatting, but did that maybe make my code messy? What about my HTML? Is nesting that many divs even necessary for what I was trying to accomplish? I'm self-taught so finer details of coding are lost in the teachings and I'd appreciate any and all feedback anyone takes the time to give me about this first try. Please go over the README.md in the repo for more info on my process.

    Updated Challenge Solution

    2
    chucksterv•220
    @chuckstervPosted almost 2 years ago

    Hey mate! your solution looks good and congrats on completing it. Building on @abdullah43577's response. Semantic elements are the better practice when writing HTML over divs. It makes the code easier to read and it provides context to browsers and search engines. Here are some resources that might help.

    https://developer.mozilla.org/en-US/docs/Glossary/Semantics# https://www.w3schools.com/html/html5_semantic_elements.asp

    Happy Coding!

    Marked as helpful
    2
  • chucksterv•220
    @chuckstervPosted almost 2 years ago

    Hey mate. Good job on completing the challenge. I just finished it today myself. My approach was a little different.

    • Instead of trying to manipulate the image, I created a section to contain the eye image.
    • I styled that according to the specifications, used a position absolute on there and a position relative on the parent element.
    • Then it was just manipulating the opacity on a hover.

    Hopefully that helps! There might be a solution to get it working with the changing the image content itself like you've tried but this might be a good alternate solution if not.

    Happy Coding!

    1