All solutions

Doing the FAQ component and the box is supposed to overflow on desktop but I can't seem to get it to overflow without affecting the background image as well.

The markup and CSS is in index.astro to be precise (don't need to know anything about astro to look through).

markup: https://github.com/thejackshelton/react-astro-radix-faq/blob/main/src/pages/index.astro

live site: https://react-astro-radix-ov5jpdqkb-thejackshelton.vercel.app/

Also got a problem with the phone version and the svg not showing fully. I think it has to do something with the margin-top I gave it on the svg. I've tried adding some padding as a hacky fix, but would love to hear a better solution.

I decided to set myself on a timer and do this one for fun.

Took me about 30-40 minutes, but I completely screwed up the spacing.

How did I do guys?

Hey everyone! This is my solution to the Equalizer landing page 📱

Project Details

I'm still not as comfortable as I'd like to be when it comes to using accessible units in different use cases. 🔍

I also believe that I used an unnecessary amount of nesting for the app buttons, but I'm not entirely sure. 🪺

I look forward to improving my CSS, and am actively playing a role in strengthening my foundation. 🎨

Have also noticed an odd scroll container on Safari only. 📜

I've taken some time to start picking up React & Styled Components. It's something I'm very excited to play around with in the future.

Feel free to leave comments on how I can improve my code.

Thanks! 😎

Hey everyone! This is my solution to the Interactive Card Details Form Challenge 💳

Project Details

🆕 This was a great project to practice JavaScript and using Regex. I was also able to use aria-describedby and aria-live in order to make the form inputs accessible without nesting them in a label tag.

⚠️ At the time of submitting, I haven't tested full accessibility, but I will be resubmitting this challenge soon here when I do.

📱I used input listeners in order to add a live preview to the form, add an opacity transition upon completion, and reset the form back to default values when the user is finished.

Feel free to leave comments on how I can improve my code.

Thanks! 😎

This challenge was a great learning experience! I would appreciate any constructive feedback for this challenge. I tried to spice it up where I could with the SVG and logo hover transitions.

Some things I'm unsure of:

• How do I get the dark overlay to look like the design when the mobile menu is toggled?

In the challenge, I changed the background color of the body on click when the menu is toggled.

• I notice that the main content of this challenge looks a bit funky, is there a better approach I should've taken there?

During this challenge, SVG's didn't appear on my screen even though I was using them with the <svg> tag. No matter where I placed them they wouldn't appear, but I got it to appear fine using the <img> tag. If anyone has an explanation for that I'm all ears haha.

I did this two months ago and completely forgot to submit it. Here it is xD

What could I have done to make this shorter?

I think 180 lines of CSS for this is probably a lot longer than it should be. Would love to see other solutions

Anyone have any suggestions on how I could've implemented this more efficiently? Always looking to improve!

I tried using a media query, and found changing the size of the QR code based on the screen size a little troublesome. Is there a better way to go at this? Maybe using ems and rems?

This is my first ever project, and I can tell that I made a decent amount of mistakes. How do I get the image to display the icon with the background changed at the same time?

I also had a lot of trouble getting some parts of the card inline with each other. Is there a better way to go at it then the way I implemented?

I started my web development journey a week and a half ago, and would love some feedback on how to avoid redundancy in my code, make it easier, and some alternative ways I could've gone at it.