All comments

• 

  Benja.min•740

  @BenjaDotMinSubmitted almost 3 years ago

  Hello all, I decided to try my hand at the bonus challenge listed in the project notes (no JS). The accordion is a pure css approach, with no use of JS to toggle the accordion. Please let me know if there is a better solution!

  At first this layout seemed obvious, but I ran into a few issues, such as how does the card behave if more than one accordion is open, and how it should wrap down for tablet views (no design provided). I made a few decisions myself, and I hope it works well.

  As always, I look forward to any advice.

  

  CSS only Accordion (no JS challenge)

  1

  21
  

  Ivan Mercedes•270

  @DraghonitePosted almost 3 years ago

  I see, what you mean...for tablet and below, you made it scale down infinitely, which is a great idea though a min-width would've been good.

  Also, there's currently a javascript error in the console, when loading the favicon.

  I missed the active state and the bonus part...I got stuck on getting the images positioned right and couldn't get the shadow under the orange box with my method, which you accomplished. So I will be digging into your code for some pointers, especially given your css-only approach.

  Overall, a solid attempt.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Brittany Shaw•10

  @bshaw928Submitted almost 3 years ago

  This is my first challenge, I know it's not 100% exact but I did my best. The table width wasn't working in my css file, I had to add it inline in my html file for some reason. Any feedback would be appreciated. Thanks for checking this out!

  

  Profile card component using HTML and CSS

  1

  10
  

  Ivan Mercedes•270

  @DraghonitePosted almost 3 years ago

  Brittany, this was a brave attempt for your first challenge; keep it up. I tackled this one 7th and still found it challenging due to the background images: it calls for placing 2 background images on the same element, which already isn't your everyday task, but then also requires careful placement of the backgrounds.

  I would highly recommend looking into CSS Flexbox and Grid to kick your layout skills up a notch and to ditch using tables for layout; this will be an important skill as you move up in the challenges.

  https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Jordan•180

  @GitNuttsSubmitted almost 3 years ago

  Can somebody explain how adding two box-shadows like I have creates that effect and how it's actually working? I understand the basics but I got the idea from somebody else.

  Also, is there a better/easier way to create the overlay or is my method good enough?

  Thanks

  

  NFT Preview Card

  2

  10
  

  Ivan Mercedes•270

  @DraghonitePosted almost 3 years ago

  Your solution is near pixel-picture, nice work; unlike mine, it's response on mobile.

  I find that there's a weird jitter effect in the overlay due to the transition; my preference would be to get rid of the transition on the overlay, but keep it on the "eye"-con.

  As to how the box-shadow properties work, that's quite the read: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  TiredQuan•245

  @TiredQuanSubmitted about 3 years ago

  I don't think it was in the requirements to make it respond to your windows\phone theme but it was a thing that I wanted to try out so I did

  Also tested out making a button specifically for accessibility reasons (don't know how useful it might be for a non-sight user to have a dedicated theme switcher, but accessibility was one of the things that I wanted to learn aswell)

  If there is any issues about wrapping <section> in the <a> element, I did that as a quick fix and didn't really think too much about it

  I had some difficulties with the toggle button because this was my first time making one of them, was really satisfied with the final result

  

  Responsive theme switcher using SCSS (Responds to user theme pref)

  2

  10
  

  Ivan Mercedes•270

  @DraghonitePosted about 3 years ago

  Hi TiredQuan. Great work on your implementation. Having just completed my version, I'm glad I didn't peek at yours first. I second Alex's feedback and would also add that the organization of the SCSS is pretty solid.

  For better maintainability and reuse of styles, I do prefer a hierarchical structure that Saas provides over using long class names, but this depends highly on your and your team's standards. As for accessibility, I'd point you to the Accessibility Issues on your submission -- only 2 at the time of this writing, which isn't bad.

  Again, nice work. As soon as the design loaded on the page with the sleek CSS animations, I knew it was going to be a good one!

  Marked as helpful

  1