All solutions

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

I had trouble getting the menu pop-out to work properly. I initially used 'position absolute', but I learned about 'inset' after looking at another user's solution. When I did 'position: absolute', the menu would remain in place when I changed the width of the screen (as expected I suppose). Using 'inset' was much more efficient and I could set the menu to only take up a percentage of the screen width.

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

Next time I'll do a bit more planning. I ran into some trouble between screen sizes and how the elements would move in relation to the screen width.

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

I especially had trouble with the inputs, specifically the blue text inside the input boxes.

It took me 3 iterations to nail.

First - I tried adding the text using the :after pseudo-class then using position: absolute. I try to stay way from using position absolute as much as possible, but this was the first thing that came to mind. I positioned the text so it fit inside the input box, but as soon as I changed the screen width the text would move. This clearly would not be suitable.

Second - I looked at some real world forms that have some sort of image or text inside the input. I came across Nike.com and saw that they had a wrap around the input and the text/image. This actually worked, for the most part. I had something like this:

    
            
                
    
              cm
            

```. I then added all of the CSS like hover and focus to the wrap. But one thing that I didn't really like was when I'd tab from one 'input-wrap' to the next input, it would require the user to press tab twice to get to the actually input field (once for the wrap then a second tab to get into the input). I figured I could get away with this, but it wasn't a great experience.

This led me to my final solution. Instead of wrapping the input and text in a separate div, I used the label to wrap the div. The only unfortunate part about this solution is that the label doesn't have any text inside it. However, this solved the tab issue. Now you can easily tab between inputs. 

I also struggled with the Limitation cards (Gender, Age, Race, etc). I knew I had to use grid, but I didn't set it up right initially. I had all of the cards wrapped in a div and the div wrapper had a grid. This worked for mobile and tablet, but not for desktop as the sub-header and text didn't play well with that design. All I had to do was remove the wrapper.

### What specific areas of your project would you like help with?
I'd like to have a JSON file with all the different "ideal" weights for each height. I started working on it,  but I didn't get it up and running. I created the JSON file with the data, but need to pull it into the webpage.

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

I had trouble figuring out the number of days and months. I had to find the calculation online.

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

My javascript. It looks like it can be refactored. I feel like it could be written more efficiently.

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

I had a difficult time getting the spacing right for the Desktop view. Getting the social icons to appear in the bottom right while having the intro context appear in the middle of the page gave me some trouble.

Also the mobile design image measures out to 750px wide, which is more of a tablet/desktop view. That kind of tripped me up. When I built out the CSS for 750px I realized it was way too big for a true mobile screen so I had to adjust some of the font-sizes, paddings, margins etc to adapt for a smaller screen size like 375px wide.

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

Javascript, SASS, code organization.

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

Forms always seem to give me trouble so this was good practice.

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

• Organization of my code.
• SCSS
• Javascript. I think my JS could be refactored as there's a lot of repeating coding.

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

I completed this fairly quickly.

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

I don't know if I got the margins and spacing right. Might have to upgrade to get the Figma files.

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

• I would plan for this one better. For some reason I struggled with the width of the site on Desktop. Next time I will section out each group of elements.
• I'm proud of that I made it responsive. It took some tinkering and adjustments with the breakpoints, but I think it's decent.

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

• I got tripped up with the email form even though I completed the Newsletter Signup a few weeks ago.
• I had a really hard time figuring out the margins and padding. I wasn't sure if I should design the page width as 1440px with padding or make it smaller with margins in Desktop view. I decided on the former.

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

• Naming the classes.
• Javascript
• Ways to organize my CSS
• Methods to systematically create margins and paddings. Something more uniform than what I'm currently doing.

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

Setting up my SCSS without having to look up any reference material.

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

Setting up the cards took a tiny bit of finessing. It wasn't hard, but not sure if my solution is best. I kept the cards in display: flex; flex-direction: row; and I just transformed the two middle cards up on the Y axis. I also kept the cards container tight so they would stay in the "diamond" shape.

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

I could really use some help with naming conventions. I'm not sure what to name the divs that would make the most sense. I don't want to think about it for too long so I end up going with something that may not be intuitive in the long run or for other devs.

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

Getting the Javascript to work properly was the most difficult part and I still don't like my solution.

Also, getting the little triangle below the pop-up in the desktop view doesn't seem the most elegant. I added a blank div and filled in the border of the div to look like a triangle, then positioned it appropriately.

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

If anyone has feedback on the pop-up or a better way to open and close it, please let me know!

I also wanted the share menu to rise up from the bottom of the parent div, but I couldn't figure out how to do that with transform/translate. I need to learn transitions better as well.

I'm decided to incorporate SCSS with this challenge (and future challenges going forward). I tried using mixins and an extension, just for practice. I really like the nesting capability.

I had some trouble with the background-image again. I wasn't quite sure on the framing of it all. I measured the height/width of the entire desktop image to bet 800x1440. All of the content measured out to be about 556x1100. I think I messed up and set the social-proof div to 800x1100 with padding, but in reality I should probably have set the social-proof div to 800x1100. If anyone has best practices on this or corrections for me, send them my way!

This challenge wasn't too difficult. It's helping me practice position relative/absolute with the background and profile avatar. I'm not sure about my placing of the circles in the background.

This was one of the easier challenges I think. Let me know what you think and how I can improve!

Between this challenge and the NFT preview card I'm getting better and creating overlays on images.

Not much to this one...if you seen anything that can be improved let me know! Is my CSS efficient? Could I refactor it to so it's less code?

I couldn't figure out the hover effect so I'm submitting now to see other people's solutions.

I was able to get the view-icon with the background-color to appear on hover, but the icon is too big and the opacity too strong.

I initially struggled with how to display the numbers. I went with <li>'s because it seems more like an ordered-list to me. I thought about using some sort of form function like radio buttons, but I didn't want to deal with styling those.

I think my padding and margins may be a little off. I look at the design images in Affinity Designer and try to get it exact to the pixel, but it wasn't working for me this time so my mobile card is slight bigger.

Let me know what you think!

I had been a little out of practice with Javascript so this took a bit of time. Creating custom error messages are always a bit challenging as there are tons of scenarios to account for...I only did the basics.

Always open for feedback!

If anyone has any feedback or tips on my CSS it'd be greatly appreciated!

I originally wrote this in PHP to pull in the data from the JSON file. I used PHP because that's what I'm familiar with and I like that you can write PHP in-line with the HTML. However, I had to change it to a static HTML file because I had trouble hosting it on one of the preferred sites. I did however host it on my own site here.

I noticed on Desktop that the blue part of the component kind of overlaps the Summary part. I used position: relative/absolute and z-index to make sure that there's no space between the two elements. Is that the best way to accomplish this?

I had some trouble with the spacing originally because the live version looked nothing like my local version. Then I realized I didn't include the meyer-reset file and that seemed to fix things.

Would love any feedback!

This one is pretty straight forward.

I had a lot of trouble with the spacing of the <li>'s. If someone wouldn't mind looking at how I styled them and provide feedback, that would be great! I styled the <ul> and <ol> differently. I use meyer-reset to start of with zero styling.

As usual, please let me know how I can make it more accessible as well. I don't know anything about aria standards so any input there is helpful.

I updated the links and removed the ul/li element and wrapped the links in a div. When is it appropriate to use a button?

I used flexbox to position everything. I didn't use any JS, were we supposed to? The challenge tag includes JS so not sure about that.

I could use some help in getting the margins right. I'd like to have it more structured and systematic so I'm not just adding margins to specific elements and sides till it looks "right".

I'm not great with accessibility. Please tell me what I need to add/change in this regard.

Let me know what you think. Always open to feedback!