All solutions

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

Tips for better layout of my SASS code. I was just sort of winging it with that.

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

In my opinion, I managed to make it quite a close match to the original design even though I only used the pictures and didn't even open the figma file (as a challenge to myself).

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

Figuring out how big to make the card element on the desktop version involved more guesswork than anything else but I somehow made it work.

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

N/A

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

Honestly, I'm super proud of how few alterations I had to make between the mobile and desktop viewports. Once the initial design was sorted, I only had to write 3 lines of css plus class selectors to get it working for the 1440px viewport.

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

A few of the buttons didn't want to be the same size when sized up even when they started out the same and were all being sized up using the same class. This required some max width shenanigans to work around.

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

Positioning. There were a few spots where flexbox didn't seem to want to work in displaying something centered like I'd like and I had to fall back on relative positioning but I don't understand why that was the case in most of these situations.

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

I am kind of proud of how quickly I finished this one. Not counting breaks for irl things, this only took a bit under a day to go from start to finish on. I would have liked to do a better job at precise positioning of certain elements and matching the visual style of some text elements however.

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

The main challenge was the fact that I couldn't remember how to do box shadows which I got past using the power of googling.

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

N/A

Overall, this did accomplish what I set out to do but there are three things worth mentioning.

First, the bottom of the page has some excessive whitespace so if you have any suggestions for dealing with that, I would appreciate it.

Second, as things stand, the color of the main page on mobile when the menu drawer is active does not match what is on the design.

Third, currently there is no animation for the menu drawer to fade in and out so it just snaps into and out of existence which is rather jarring. I may fix that eventually but it wasn't enough of an issue to delay posting this here, quite honestly.

No specific questions here but if you have any feedback about my design then share away!

No real questions here but just a comment that I found getting consistent styles and page element setups that don't change themselves for seemingly no reason to be much easier using firefox as my browser of choice rather than chrome.

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

That I used Grid correctly for once. I didn't have a lot of experience with grid at the time (and arguably still don't) so this was a nice experiment in the use of grid for me.

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

Figuring out how to use grid with some of the more creative shifts accompanying certain screen sizes.

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

I still feel like I don't really understand grid that well so maybe help with feeling less inept at "grid-ing".

I followed the design pretty well but it seems to be resizing between reloads on chrome sometimes. As in, I'll load up one time and it will be the size of the screen but the next time, it will be too big to fit even though I changed nothing. As an aside, I use the live server extension for vs code when this is happening. Maybe that's part of the issue? I really couldn't say.

I did mostly follow the design here but ran into two issues I could not solve. Firstly, no matter how much I tried to tweak the width, I could not get the "sign in" text at the top to go onto a single line. Second is the logo in the footer which did not want to become white regardless of what property I tried to use (fill, color and a few others were all tried but none worked).

If you want to have a look and see if you can fix this then be my guest.

This is my first experience building a multipage site of this level where I was doing all the things and not just the javascript so feedback is very much welcome for potential improvements. Thanks!

This one is mostly solved but it does have a visual issue I couldn't get around in that opening the questions adds an excessive amount of padding for the 1440px viewport and I was not successful at finding a solution for that particular issue.

I seem to have mostly gotten everything according to the design with the exception that I was not able to pull off the specific curved corners for the header that this one was asking for. Still, I think I did a pretty good job overall.

But let me know what you think. Particularly as it relates to code refactoring and places where I could rewrite things more efficiently for the same outcome.

As usual, my javascript is rather wonky. It accomplishes the goal but I'm no good at code refactoring. If anyone wants to go in and have a look if any of it can be rewritten then I'd appreciate it.

I did this project mainly to work on my CSS skills some more while adding some JavaScript interaction to that CSS in order to practice combining CSS classes and JavaScript code for a more efficient design process than merely changing the CSS with JavaScript. If you have any thoughts about refactoring or ways I could rewrite my code to accomplish the same thing with less lines, I would be most interested to hear them.

More working on my css skills but with some javascript thrown into the mix this time. Honestly, it seems like I did a decent job at getting my version to be relatively close to the provided design - although not 1 to 1 obviously.

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

The shifts from mobile to desktop and using different images per screen size was an interesting challenge since at the time, this was a new concept to me (I originally did this a good while back but had to go back and tweak parts of it more recently).

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

The blueish color of the image was a little tricky and I couldn't figure out a way to do that directly with my image so resorted to changing the background color of the text element that went on top of it and adding some extra padding to give it that color.

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

Anything you like.

I am not the best at css and design in general so this project is to help with that. I'll probably end up redoing it down the line to be generally better but this is how it is right now. Thoughts and suggestions are welcome!

When it comes to css I'm not the best and this project was done with the intention of improving my design skills. I plan to do more such projects along this trajectory so if you have any constructive criticism about what to change regarding this or ways to approach things differently in the vein of "get better at css and design in general", I would love to hear them. Thanks!

I found this one pretty fun. I don't have much experience building projects from APIs so this was some nice practice in that for me. The css was relatively simple which is good since I prefer to focus on functionality over looks myself. It was also a nice return to doing things in vanilla js as I've been doing mostly react projects lately.

I mostly got this working as intended but there are a few little css things that aren't quite the same. The fact that my lines between the various data bits in the cards aren't showing up for no discernable reason for one thing.