My Tea Cozy Project

Projects Skill Path Projects
1

My solution for the tea shop website project:
https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/projects/tea-cozy

The intention of the project was to create a website from scratch with some design specs to match. HTML and CSS with flexbox were the main focus. This was fun! I am open to criticism/praise.

The website can be viewed here:
https://student31cs.github.io/teacozy/

And if you want to view my code, my github is:

3 Likes
2

EDIT: I just looked at the site on my mobile. I need to make the features section a little better in responsiveness… maybe set max-width of the div to 100% and then with the flex make it back into a row with flex wrap? I will try it out after work today

2 Likes
3

I like it.

[meeting the 20 character post min]

2 Likes
4

@micro5795965298 welcome to the forums!!! And thank you for the compliment :relaxed:

5

Looks good! great job

1 Like
6

Hey everyone, went for a short run after work, but I’m back and I did some tweaking on the CSS and it has turned out looking much better on my mobile :slight_smile:

In the media query, I decided to go away with making the items in the flex container show up in a column and I changed the width: 100%; to max-width: 100%;. Since flex-wrap and justify-content were already in the ruleset, I didn’t need add them. I believe this allowed items in the div to position themselves appropriately according to screen size instead of taking up tons of space showing up in a single column in the middle of the screen.

Old code:

@media screen and (max-width: 1000px) {
    .gallery {
        align-content: center;
        width: 100%;
        flex-direction: column;
    }
}

New code:

@media screen and (max-width: 1000px) {
    .gallery {
        align-content: center;
        max-width: 100%;
    }
}
7

Thanks, and you’re welcome.

Are you doing a 30 day challenge?

8

I did one when I first started Codecademy about a year ago, but recently I’ve found myself to be more productive when I take a day off from coding every week, and do other things to relax my mind. The challenge was great though, it was cool to look back and see how much I had learned in just 30 days.

9

Ok, that’s cool.

[20 char min]

1 Like