All solutions

What are you most proud of, and what would you do differently next time?

I'm proud of how quickly I was able to write the JavaScript without outside resources

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

As always, mobile responsiveness was a challenge for me but I think I'm getting better.

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

Any tips on how to modify my code to be more clear and organized and tips for media queries. I think my use of classes and IDs are a little all over the place but I'm eager to refactor over time.

What are you most proud of, and what would you do differently next time?

I'm proud of how quickly I could write the JavaScript. When I update this I will make my code cleaner (it is repetitive right now) and change it so it works on keypress as well. I think I did pretty good with mobile-first workflow.

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

It was tricky with the different buttons but with different classes/IDs I could figure it out, even if it isn't the most succinct way.

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

Maybe combining the code for click and keypress, if possible. I could get it to work on keypress but it seemed like a lot of duplicate code. As always, tips on media queries are welcome because I seem to struggle a lot and am trying to get used to flexbox again.

What are you most proud of, and what would you do differently next time?

Pretty proud of this one although I know my media queries are all over the place. Styling the submit button gave me some trouble but I learned a lot! The JavaScript was actually one of the easiest parts for me so it showed me how much I've learned so far.

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

I notice when I resize the window to be smaller the Base Apparel logo overlaps the other text. Any suggestions would be welcome. I'm sure there are errors in my code, especially with the media queries and maybe even the way I organized the items in my HTML.

I'm trying to get better at mobile-first workflow and media queries. I work on a pretty large screen and use chrome inspector to test other screen sizes, but does anyone have any tips? I find that once it looks great at smartphone sizes and 1440px+ I have a lot of trouble figuring out the smaller sizes like tablet and smaller laptops.

What are you most proud of, and what would you do differently next time?

This was a quick challenge to brush up on my HTML/CSS and using flexbox. I'm proud of how quickly I was able to replicate the design after taking multiple months off of coding. Next time I'll put more research into different ways to accomplish things like spacing and organizing my code.

Next time I'll also use a CSS reset. I kind of rushed through this and didn't think about it until the end.

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

The nutrition table almost got me at first but I was able to figure it out using flex box.

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

My code is kind of all over the place but I'd love suggestions on my media queries and my use of padding (I feel like there's a better way to do my spacing). It's been a while since I've worked on a responsive page and I was never 100% confident with how my pages turned out. I'm still getting used to flex box again and I'm thinking of delving into CSS grid more next. All constructive criticism is very welcome!!

Took a tiny bit of creative liberty with the exclamation point and spacing 🤫

Another try at mobile-first design. I'm confused about the background image on this one. It looks okay at some sizes but when resizing the window the background image cuts off even with background-size: cover. I might have missed something. I also got in the habit of hiding the footer attributions on mobile view because with position: absolute and bottom: 0 it still floats up to the middle of the page at certain screen sizes.

Just a quick HTML/CSS project. Working on more concise code--I feel that there are better ways to organize styles but I end up confusing myself. Also, is there a better way to do the border-radius properties without using top-left, top-right, etc.? I feel like I did it before with something like overflow: hidden but I'm struggling to find the solution.

Just a quick HTML/CSS challenge. The background was tricky for me but we'll see if it's close enough when I submit this I guess lol. I'm sure I missed something

Another quick try at mobile-first workflow. Is my responsiveness okay?

Trying to get better at mobile-first. I can't figure out how to stop the image from cropping when resizing the window from desktop view. I think I need to clean up my code but this was a quick try!

--updating this after seeing my solution screenshot. My height, width, padding seems to be all off. I'll probably be revisiting this but at least I learned about background and mix-blend-mode lol

My first attempt at mobile-first workflow--any tips appreciated!

Trying to get better at organizing and writing clean CSS and HTML. Are my media queries okay? I can't ever seem to get the height to look right in mobile view. I also feel like I use a lot of padding and margins when there might be an easier way to organize elements. I haven't learned Grid yet so maybe that will help?

Still not too confident in my responsiveness 🙃 I couldn't get the elements to space out nicely in mobile view--everything seems smushed together.

Still not too confident in my responsiveness and Javascript yet

I did this mainly as a HTML/CSS refresher and to practice pushing to Github. I realized I forgot a lot about flexbox and responsiveness.