All solutions

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

i was able to make the html and CSS quite easily and felt like I did a good job with the responsiveness. Next time I will try to make the scroller infinite less buggy and more smooth.

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

The infinite scrolling was giving me trouble. I was able to use chat gpt to help me out but it is still buggy.

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

How can I write cleaner code. Any redundancies? any tips on the infinite scrolling? mine is buggy

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

I was able to do the responsiveness fairly quickly and felt like the sizing was easier to work with for elements. Write cleaner code and have less in my media query, making the rest of the page responsive and dynamic without the use of too much media query.

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

I was having trouble with the image sizing. I played around and looked up ways to deal with images.

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

any redundancies? can it be cleaner?

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

I'm proud of being able to work with more challenging designs and being able to make the javascript fairly easy. Next time I think I can definitely write cleaner code.

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

I was having some trouble trying to make this one responsive because of sizing and stuff. I looked up things to help me like clamp and calc() instead of hard coded sizes

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

How can I make this code cleaner? Especially with my media queries and javascript

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

I was able to do the validations and worked with dates in javascript which I haven't really ever done before. I was also able to add a little bit of extra stuff like a happy birthday text. Next time I would try to get the leap year accounted for, I just didn't attempt it.

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

The validations were hard at first because I had a lot of if else statements and there seemed to be too many cases to validate. I overcame this by starting over and doing it step by step, adding different functions so that it was cleaner code.

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

per usual, is my code clean, or are there better and more efficient ways to handle things? Any redundancies?

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

I was able to work through the javascript and use console.log for testing. I was also able to refactor some of my code and make helper functions to make my code a little bit cleaner. Next time I will try to make it even cleaner.

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

The javascript was still difficult. I had to look some little things up because I would forget how to do some things. It was also hard to make my javascript not too messy. I was able to refactor some things but I know that it can still be a lot cleaner and more effective. That will come with practice.

The responsiveness also gave me trouble. I figured out through testing that its because I had all of inputs wrapped in a form tag but I was applying my CSS grid to the calculator container so it was ignoring it. I will learn from that and not make that same mistake next time because it took me a while to figure out.

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

Regarding my javascript, are there ways to make it more efficient and cleaner/more readable? I want to practice making the cleanest code that I can.

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

Im proud of using vanilla javascript to make this website work

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

It was hard for me to remember how to work with json files and fetch the data and display it based on the specific time period. I had to use google to find out but I only used enough to remember how to do certain things. I'm sure with more practice I won't need to look up stuff like that.

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

Any redundancies? Was my way of doing it effective or is there a better, cleaner way to do it?

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

I was able to get the javascript and did testing by using concole.log. I was also able to get the responsive design done fairly easily. Next time I will try other ways of hiding and displaying components because I feel like mine isn't as fast (at least the dismiss button isn't)

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

Sometimes I found the spacing difficult because I couldn't get the design super close without the figma. Some padding feels off but when I would change the size it would make the word breaks different etc. I also found that validating was a little difficult. I played around with console.logs to figure that out.

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

Are there better ways to go about hiding and displaying components? I used style.display none and flex. Take a look at my dismiss button to take me back to the main newsletter sign-up. I feel like it is slow because it takes a second to switch back. Why is that?

Also are there any tips for sizing? Sometimes it feels like the size is smaller than the design so I make it bigger but then the wording inside is off (line breaks at different words and padding off etc.) It's too hard to make it pixel perfect.

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

I am proud of using vanilla javascript and working through my problems. Next time I will try to get it down faster without needing to look things up for help

I also think that my code was a lot cleaner this time.

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

I ran into some problems with the javascript not working as I intended. I figured out that setting the opacity of the active component to 0 wasn't working because then I couldn't press the share button on the nonactive component since the active one was still there in front of it, just not visible.

i also had problems with making it responsive. The image disappeared whenever I switched the flex-direction to row. I fixed this by using a grid instead. I don't know exactly why that worked, but it did. I will be trying to use grid more often.

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

Any redundancies with my code?

Any tips on best practices I might be not be doing?

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

I was able to make it responsive entirely using CSS grid, specifically grid-template-area. This is something I want to get more comfortable with and I think I learned a lot by playing around with it until I got it right. Next time I will be more carefully about how I structure things later. For example, doing mobile-first approach I knew it would work with flex so I did that first but later on I needed to change it to grid to make the hero section layout work. In the end it cost me time doing flex first. I need to think about the changes I will need to make later on and plan accordingly.

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

It was hard to figure out the grid layout for the hero. Specifially moving the text content between the two images. I figured it out by playing around with it, going step by step.

I also had troubles with the text and sizing. The text wraps weirdly so that it has on word in the middle. For example:

Group Chat For Everyone

instead of: Group Chat For Everyone

how do I fix that?

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

I couldn't figure out how to move two images on the hero to the end of the screen so that they were cut off by the edge of the screen like the design without making a huge hap between them on mobile screens. How did you guys do that?

As usual, are there any redundencies in my CSS that I would fix?

How do you guys deal with sizing efficiently?

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

I was able to learn how to utilize the CSS grid using the grid-template-areas which is different from what I normally do. Next time I will try to make sure my code is cleaner.

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

Originally it was hard to get the containers to fit where I wanted them. I looked up how to use grid-template-areas and it worked out better for me and was easier to use on media queries

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

Are there any redundancies in my code? how can I clean it up a little bit more? Specifically with each child, I feel like there might be a better way to handle each child and their differences.

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

I was able to make the designs quickly and surprised myself with how easily I was able to make it responsive this time. I also felt like I had way less redundancies this time. Next time I will try to get the grid system down without any outside resources.

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

I was having trouble with the grid layout, positioning the outer cards in the middle of the middle two cards. I used chat gpt to show me how grid-template-columns and grid-template-rows work. I asked it to elaborate so I could learn from it.

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

For this specific project I noticed that when working with grid-template, my divs would expand to unusual lengths when working with the grid-columns/rows. For example,

  .content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .content-grid div:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }

the 1st child would elongate and become bigger than the other children. It wasn't until I finished positioning the last child that they all snapped back into their original space. Why is that? what are your favorite resources to learn and practice grid and grid-template stuff?

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

Im proud of getting the layout pretty quickly especially for the mobile design. I also did mobile first which is something I am not comfortable with so I want to get better at it. Next time I will try to get the responsiveness done quicker

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

I was having some trouble getting it into desktop view after I was finished with the mobile view. I went to chat gpt and google to figure out what I was doing wrong.

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

any tips for the responsiveness would help. It seems like it takes me a long time to figure out the responsiveness. Also I always struggle with sizes. min and max width and heights screw me up and i have things that keep growing and things that stay a certain size which is frustrating. I have to toy around with the sizes which takes me a little long, i wish I could get that down in 1 try.

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

I was able to make this one responsive a lot more easily this time with minimal media query usage. Next time I will try to make sure I don't have as many repeating styles, instead I will try and consolidate them into variables whenever possible.

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

Once again I found it hard to match mine with the design especially without the figma. I just eyeballed it

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

How do you eyeball the design? I tried using the different weights for my fonts and they still always looked different from the design no matter which one I used. and what about the width and height of the card itself? without figma is there a way to get exact measurements or do I really need figma for that?

in my code do you see anything that can be removed or consolidated? maybe some patterns that I tend to repeat a lot that could be placed into one variable or something? Do you think my code is clean enough or would it be a problem in the field?

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

i was able to finish this quicker. I'm getting more used to patterns, noticing the stuff that I keep repeating in other challenges. I am getting better at using more standard practices and I think my code looks a little cleaner now. next time I hope to be able to work quicker and make my code even cleaner

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

This was the first time working without a figma or design file. It was a lot harder to eyeball this one especially with the text because I swear mine looked bigger then the design picture. I wouldn't say I overcame it, just tried my best.

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

is there anyway I can clean up my code further? I notice that I have a lot of code where I repeat a lot (see below). Is there a way to make that more efficient or is this the common way that people write css?

.profile-details {
  padding-block: 1rem;
}

.profile-details h1 {
  color: var(--clr-white);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
}

.profile-details p:nth-of-type(1) {
  color: var(--clr-primary);
  font-weight: var(--fw-normal);
  font-size: 0.9rem;
  padding-top: 0.5rem;
}

.profile-details p:nth-of-type(2) {
  color: var(--clr-white);
  font-weight: var(--fw-light);
  font-size: 0.875rem;
  padding-top: 1.5rem;
}

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

I want to be able to finish way faster than I did. I want to get better at doing the responsive design.

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

media query is hard. I don't know which to put in a div and what to keep outside of a div.

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

cleaner code, how to finish quicker

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

I don't know if my code is the cleanest version or if there are unnecessary things in there that I can take out

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

Flexbox is still hard at times. I also didn't know how to see the exact padding and spacing between items or font sizes and whatnot. I'm not too familiar with figma. I eyed it and guessed on the padding so it's definitely not perfect

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

How do you use figma to make it more pixel perfect (or at least close to)