All solutions

Not really a fan of grid but I'm glad this project forced me to use it. I switched from grid-template-columns to grid-template-areas between media queries to get more practice with grid properties.

There isn't anything to specific I'd like to ask about but, as always, I appreciate any and all feedback/critiques!

Thanks for looking!

I feel like I am getting more comfortable with JS but at the same time not at all haha I am happy with the results I was able to get but I'm not sure if my script is efficient or not. I did notice that to get each answer to drop down for the first time, you have to double click, but a single click will open/close after the initial drop down. Would love some pointers there!

I also feel like some of the positioning choices I made are a little questionable. I would have really liked if I could have gotten the answers to drop down without shifting the entire list both up and down. Having the top question in a fixed position and all the answers shifting downward would have been choice. To mitigate on overflow, I used js to ensure only one answer could dropdown at a time, selecting a different question would close the currently opened answer. I was also trying to find a way to slow the display transition for the answer divs but was unable to figure out a way.

Any tips/tricks/pointers/critiques are welcome and greatly appreciated!

Thanks for looking!

I am always open to feedback and appreciate any and all critiques!

This was the first project I've done that has used JS - I've been wanting start incorporating JS into my projects but I wasn't sure if I was good enough with HTML/CSS yet to branch off to JS. I also don't have much experience with JS DOM manipulation.

Even though the JS part was really simple, I did have a few issues getting it to work properly - tried using document.getElementsByClassName but couldn't get it to work properly so I had to add a couple of id tags and use .getElementById. I also had an issue toggling the visibility of my share div. I tried using a ternary conditional statement and then just an if/else, both would only make the div visible but not back to hidden. (I left my ternary conditional in the index.js file as a comment if someone wants to look and see where I went wrong) I ended up making a separate class for visibility and used .toggle() to switch between the classes.

As before, any tips/tricks/critiques are welcome - your feedback really helps me improve!

Thanks for looking!

Work is definitely slowing my progress with these challenges..

I'm not sure why, but the image-computer.png isn't showing up off the left of the page like it did in the 1440p view in chrome dev tools.

I'm not sure I did the footer correctly - I used space-around but I think there is too much space between the logo and the links. I think I had the most trouble with the footer. I originally used the supplied social media icons in my anchor tags but couldn't figure out how to get the color to change on click - I tried using icon:active{ color: } and icon:active{fill: } - I ended up just going to fontawesome and using their icons instead.

I also see that I have an html issue because <section class="companies"> doesn't have a heading. How would I go about creating a heading for that section, but only for a screen reader? - I added an h2 with an sr-only class with visibilty:hidden, hopefully that fixes it.

Any feedback or tips would be greatly appreciated!

Could only work on this for 10-20 minutes a day because of work so it took me a few days to complete - ended up scrapping my original styling and redoing all of it the first day I had off.

I used the PixelPerfect extension to duplicate the layout but ended up getting frustrated by trying to get every perfect. That being said, the layout isn't perfect.

I really need to work on my CSS abstraction.

Any and all critiques are welcome! Thanks for looking!

For this I tried using only flexbox, but I couldn't get the diamond card layout to work. The left and right cards wouldn't move down correctly. I tried changing their position to relative and give them top: 25% to move them downward but they wouldn't budge. I ended up switching to grid for my last breakpoint with the same positioning strategy and it worked perfectly.

I'm finding it challenging to get the sizings to match the provided designs perfectly. I also not sure if I did the box shadows properly.

Is it common to use both flexbox and grid? Is it bad practice to change a section's display after a certain breakpoint?

Are my transitions too jarring?

Any tips or advice are greatly appreciated!

Thanks for looking!

Second attempt at mobile-first design, definitely getting easier.

Any tips/critiques/feedback are greatly appreciated!

Thanks for looking!

I probably took too long trying to get everything right (though I know it isn't perfect). First time trying mobile-first - not sure if I did it correctly. If anyone could give me feedback on my usage of flexbox that would be great. I also wasn't sure of how to use the provided top and bottom background images - any tips or direction on that would be greatly appreciated! Any other tips/critiques would also be awesome.

Thanks for looking!