Tea Cozy Project

Projects
82

yes align text : center

83

Well, text-align: center

Was this not working to center the text?

84

Thank you @kirativewd, I had the same issue with my code :+1:

1 Like
87

OK, it is finally done!! Took me so long to do this. Let me know what you think and please tell me what I could’ve done better.

Here is the web-page: Tea Cozy
Here is the code: GitHub

Notes:

  1. The Tea Cozy logo did not render for me so I found a similar google font (Dancing Script) and used that.
  2. The font-weight of Helvetica would not get to the bolder/900 setting so I found a similar google font so I could achieve proper weight.

Tips

  1. Be aware of the photos and how they render by default. It does not match the specs. When looking at previous projects for reference, no one paid attention to this. It took me a lot more time to adjust the photos to match, particularly the locations background photo.
  2. As you go through the project, adjust the size of your browser to see how the elements adjust to the changes. This is another important item that most people overlooked. It is easy to slap everything to together on my full browser size, but making it responsive (using only CSS and html) took considerably more time for me to figure out. This is where a true software engineer shines. They figure out the nitty gritty details. It makes a huge difference.
  3. Besides the flex box elements, settings like width: 100%, max-width, min-width, etc. will change the dynamic of the web-page. Pay attention to how this happens as you go, especially during the resizing of the window.
  4. Some settings won’t take affect without others in place. I believe width: 100% and display: flex are two examples. They need to be present for other settings to work.

Cheers!

2 Likes
88

Hello!

Just finished the Tea Cozy project. This one definitely took me longer, and I took more passes at it than previous projects. I look forward to having cleaner/more efficient CSS in the future as I learn more. Flexbox and grids are still hard for me to keep straight, so my code is a bit all over the place I’m sure. Any feedback welcome. Thanks!

Project: Tea Cozy
Repository: GitHub - jnysms/cafe-website: Cafe Website

89

Thank you for sharing! I was able to figure out a few little pieces I needed to fix thank to your code - much appreciated!

1 Like
90

Hi Everybody! Here is my version:

.- Tea Cozy - Live
.- Tea Cozy - Repository

As they say the opacity was optional, I’ve played around with it a little. Hope you like it!

See ya!