Adam

@aemann2
Berkeley, CA
225Points

Librarian learning to code!

Latest Solutions

  • Desktop design screenshot for the 3-column preview card component coding challenge
    • CSS
    • HTML

    3 Column Card using Tailwind

    Adam225Submitted

    This is my first time using Tailwind and I'm still on the fence about it. While it's relatively simple to make things responsive, there are a lot of things that seem like they'd be simpler to just do in CSS.

    Anyway, I'm having a problem where, when you hover over my buttons, it pushes the cards down. Also, I couldn't figure out how to push all the buttons to the bottom of the cards...sometimes when you resize the cards, the buttons have different vertical-alignment. I feel like I could have gotten this perfect with regular CSS, but Tailwind gave me trouble. I've heard such good things about it...am I using it right? Is there something I'm missing?

    View Solution
  • Desktop design screenshot for the Profile card component coding challenge
    • HTML
    • CSS

    Card

    Adam225Submitted
    View Solution
  • Desktop design screenshot for the Single price grid component coding challenge
    • HTML
    • CSS

    Single Price Grid w/ SASS, BEM, and Grid

    Adam225Submitted

    Finally feeling comfortable using grid -- thanks Wes Bos!

    View Solution
  • Desktop design screenshot for the Four card feature section coding challenge
  • Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge
    • HTML
    • CSS
    • JS

    Testimonials Slider Using SASS and BEM

    Adam225Submitted

    I couldn't find a good way to set the BG image in the CSS with Javascript, so I had to set the BG image inline in the photo div and use JS to change that. My JS slider solution is kind of crude, so I'd like feedback if anyone knows a better way to do it. I over-styled this one a lot to make it responsive and it's still not perfect...I'd be interested to see if anyone has a more elegant solution.

    View Solution
  • Desktop design screenshot for the Article preview component coding challenge
    • HTML
    • CSS
    • JS

    Article preview component using SASS & BEM

    Adam225Submitted

    Fun project -- something that gave me trouble, though, was the photo. I had a hard time getting it to match the proportions of the design spec...seems like they're using some sort of Zoom property in the spec? If you have any suggestions on that I'd love to hear them.

    Also, I'd be interested in any critiques of my JS code.

    View Solution

Latest Comments

  • Adam has commented on Mehmet Can BOZ's "Article-preview-component" solution

    0

    Hey Mehmet,

    Nice solution! This one took me a long time, so it's good to see what others have done who have finished it. A few things:

    The <p> text is a little small. I think when I did this one I actually ignored the recommendation in the style guide because when I tried using it, I could barely see the text.

    I also tried setting the image with the <img> tag for this project. If I were to go back and do it again, however, I would have made the section of the card with the image a <div>, and set the image as a background image. The reason (I've recently found) is that background images are easier to control than <img> images.

    Also, if I were you, I would have done something different with the Javascript. It looks like you're using it to display certain styles according to the screen width. I think it would be much easier to use media queries for this, and use the Javascript to control what appears when you click on the share buttons. Check out my solution if you're interested.

    Hope this helps!

    -Adam

  • Adam has commented on Wonuola Alonge's "A social-proof page using html and css" solution

    1

    Hi Wonuola,

    Good job on the challenge. A couple suggestions:

    First, I'd suggest putting all your content (except maybe the .attribution stuff) in the <main> tag and setting a fixed width on it. The reason for this is that all your main sections are set with a width of 100%, which means they'll all expand to take up 100% of the screen width. Sometimes this is what you want, but here, if you're viewing the page on a larger screen, the images become bigger than they're supposed to be and become distorted.

    With .svg files, you don't have to worry about images being distorted because those are actually bits of code that can expand or shrink and remain fundamentally the same. But with .png and .jpeg image files (like the ones in this project), you're limited by how much you can allow the images to expand before they distort and don't look so good. Just something to keep in mind whenever you're working with image files that aren't SVG.

    Second, in your Github code, you should put your image files in their own folder. This helps make your code more organized, so when people go to view your code it's easier to find your HTML and stylesheet. I've also completed this challenge if you wanna take a look at another solution.

    Best,

    -Adam

  • Adam has commented on Barabazs's "Bootstrap 5 + Tippy + CSS + JS" solution

    0

    Looks pretty good. I just finished this one and I'm impressed with how much you were able to get done in the 60 lines of CSS before your media queries.

    One problem I noticed is that the card pops out of format between 770px and 575px width. I think it has to do with setting a min-width in one media query and a max-width in another...seems like some widths are getting skipped over.