All solutions

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

I'm proud of fetching and using the data from the JSON file. I needed some help to figure it out, and I'm not sure I could do it again without looking at what I did, but I understand it a little better. I'm also proud of how my website was easily responsive to different screen sizes with this line of code on my container in CSS

grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

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

I was having issues with fetching and then using the data before it was fully fetched. I had to get help and learn where I could put my function within the .then function so that it wouldn't run until the data has been fetched.

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

Chat GPT gave me the suggestion to use this code:

fetch("./data.json")
  .then((res) => res.json())
  .then((data) => {
    timeData = data; // Assign fetched data to timeData
    fetchTimeDaily(timeData); // Call your function with timeData after it's fetched
  })
  .catch((error) => {
    console.error('Error fetching data:', error);
    // Handle errors here
  });

and it fixed all of my problems but I'm still not completely understanding why. Wouldn't the computer try to execute fetchTimeDaily(timeData) before timeData is set equal to data if this takes a little longer and they are both inside of the same .then statement?

Would it be better practice to do

.then((data) => {
    timeData = data; // Assign fetched data to timeData
}
.then (not sure what syntax goes here??)
    fetchTimeDaily(timeData); 
  })

 to make sure it waits until the first line has been fully executed?

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

I would use grid if I were to start over. Using absolute positioning made making it responsive really annoying. I think it might be easier with grid.

I also would not make the whole card overflow: hidden; because at some very small screen widths (like 270px), it does need to overflow. overflow:hidden was helpful to make sure that my image and overlay had the same border radius as the card.

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

Getting the image to have a purple overlay and make the whole thing responsive at the same time was very challenging. I'm not really sure of the best way to make that happen. I ended up using a lot of absolute positioning but then I had to change a lot of that for the desktop size.

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

Is there a better way to do this than using absolute positioning? Would grid work better? How can I make an overlay cover a picture and not overflow at all?

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

I'm proud of getting the white container to grow to fit the content. And getting everything centered on different screen sizes.

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

I had two different event listeners for each question, one for the question and one for the plus/minus icon. I didn't realize that I had put the icon inside of my question in the html which was causing everywhere around the question to trigger the event EXCEPT for the plus/minus icon. Since the whole question in my html already included the icon, I just took out the event listeners for the icon and that fixed it.

Another challenge was getting the accordion to center on top of two background images and to expand with the content. My solution was this

    height: fit-content;
    position: absolute;
    inset: 0;
    margin-top: clamp(3%, 8%, 10%);
    margin-bottom: clamp(5%, 10%, 15%);
    overflow: auto;
    margin-inline: auto;

and to be honest I'm not really sure which part of this specifically caused it to be center but it worked.

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

I will happily accept any feedback or advice on anything. Accessibility, ways to do things more efficiently, or anything else.

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

I am proud of the card being centered at all screen sizes. This has been a big struggle for me but I figured it out with this code.

.main {
    display: flex;
    margin: auto; 
    inset: 0;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

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

I couldn't get the icons to align vertically with the rest of the elements despite using align-items: center; for each list element.

The main challenge was getting everything in the right place and to be the right size to match the design. I had to keep comparing it side by side to the design to make sure I got it right.

Centering the card itself was a challenge, a bunch of the solutions I found online didn't work but I found one that did.

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

Any feedback is much appreciated! If you have any suggestions on how I could organize my CSS or write less of it, I'd love to hear it.

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

I am proud of figuring out how to use subgrid, it made the desktop layout super easy. But when I went to write a media query to have it change to 3 rows instead of 3 columns, it was confusing because I already had some rows for the content within each card for the subgrid so I wasn't sure how to handle that.

I have been learning a lot from youtube and taking lots of notes. I used a lot of what I learned in this project like minmax, subgrid, variables for colors, fixed positioning, and more.

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

The biggest challenge was figuring out how to make 3 main rows with sub-rows within them for sub grid. I was overthinking it for a long time, asked the question on discord, and then figured it out immediately. At first I had the solution of using grid-column-template: repeat(auto-fill, minmax(150px, 1fr); but that was causing one card to be alone on it's own row at certain sizes. I had to use media queries to make that not happen.

Another challenge was figuring out how to center the content for smaller devices. It's still not really centered for phones :(

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

I would love to know if it's possible or a good idea to use container queries for this. I tried to do so but I got confused with where to put the query and how to affect the container itself instead of the children.

I'll happily take any other feedback or ideas as well!

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

I'm proud of getting the four cards to all be positioned correctly with grid. I had to draw it out to figure out what each grid area would be, but that wasn't too hard with CSS grid. Something I would do differently next time is use CSS grid for each individual card layout as well. I used flexbox but I ran into problems placing the icon in the bottom right corner.

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

I couldn't figure out how to place the icon in the bottom right corner of each card. I tried using

.icon {
justify-self: flex-end;
align-self: flex-end;
}

but that didn't seem to work. I ended up having to create another div within the card div and using flex-grow to make sure that the div extended all the way to the bottom of the card.

.icon-flex {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-grow: 1;
}

I think I could have done this more easily with grid.

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

Is there a better way to get the icon to be in the bottom right corner without creating an entirely new div inside of the card div? I'd rather not use padding or translate because I'm not sure that would work well in a more responsive layout. I did try to use translate but it pushed down one icon more than the rest because that card had 3 lines of text and the others had 2 lines. Do you think it's more efficient to use grid or flexbox for the layout within each card?

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

I'm proud of quickly I was able to do this challenge compared to my other ones. It helped to go back and do this (one of the easier ones) before continuing the harder challenges I had started like the FAQ accordion.

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

I couldn't figure out a great way to center the card on the verical axis. I ended up using margin-top: 5%; but I imagine there's another way to do this with flexbox. I tried this:

body {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
} 

but the card was still sticking to the top for some reason.

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

I would love to know if there's a better way to have the card centered vertically than using margin-top.

I also would like feedback on accessibility ways to make my CSS more efficient. One thing I was wondering was what to write for alt text for the authors profile picture. Would people using screen readers like me to describe the person in the profile picture or would that just be a nuisance? Is there a way to provide more information, like a description of the author, where people using screen readers can access it if they choose to but it's not in the way?

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

This was my first responsive web page so I'm proud of getting it to look pretty close to the design. Next time, I want to more thoughtfully plan out the html to make sure my CSS code is efficient. For example, I think there were some places where using a class would have been more efficient than creating CSS for each element by their ID. Also some of my solutions were kind of hacky and I relied on using px as a unit so I'd like to learn how to use the other units of measurement in CSS to make the page more responsive.

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

I could not figure out how to get the picture and the information to be centered with no space in between with either CSS grid or flexbox whilst having them have the same width and height. I figured it out by setting each part to a specific number of pixels but I'm sure there's a more flexible way to do it.

Another challenge was when I made the screen mobile sized, the elements were not remaining centered. I used some media queries to fix that.

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

I am super beginner at this stuff. I would love suggestions on how to make this simpler and more efficient. I'm interested in the best way to get the picture and info box centered and remaining the same size in a responsive way, maybe not using pixels as units.

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

This was my first time using Git, Github and VS code to make something and deploy it. So I'm happy to have figured that out. And I learned remembered a few CSS attributes that I could use to style the website.

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

One challenge was that whenever I used margin-top in the CSS for the image to try to bring the image a bit lower within the div, it brought the whole div down with it for some reason. I got around this by adding a before the image within the div. I'm sure there are many ways to do this that I'll learn later but this worked for now. Another challenge was figuring out how to deploy the site, I had to get help with that.

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

Other ways to move the image down without moving the div with it. Or how to get the white rectangle in the background another way (maybe without a div?).

I wasn't too worried about making it work with different sized screens so I don't really need feedback on that.