jessodri / teacozy Goto Github PK

One tip for this project: Instead of setting the width on each element, you could try and set the 1200px with to a 'wrapper' element and put all of the other elements inside that one. A benefit of this is that if you decide that 1200px is too small/big, you can change the size in 1 place and the rest of the elements should work themselves out nicely. Your approach is not wrong however. Just wanted to point out another way of achieving the same result.

Best practice tip: when you are making a class that represents two words, separate them with a hyphen:
class="main-container". Easy to read, easy to understand, harder to make typos, and sort of an established practice by many devs.
https://github.com/jessodri/prj-rev-bwfs-tea-cozy/blob/b5ef4ae0dd71e1e881b51bdab4a3d46631b0e74a/TeaCozy/index.html#L23

Great job on the project! You follow the spec and your code is clean and neat (good job on adding comments!). Implement the few things in the previous issues to polish it up and make it even more professional.

To further play around with the project, you can try adding a Google Map at the bottom of the locations section. Here's a challenge:

• when you hover over each item, it should animate in some way (some cool hover effect examples with code samples);
• make the cursor change to a pointer on the hover (Hint: convert the words here into the relevant CSS);
• on click, add a pin to the Google Map to show the location (make up some locations, they don't have to be real); (instructions for Google Maps);
  If the JS for Google Maps is confusing, don't worry about it, you can skip that. But do try to add the animation effects as this will show you a lot about CSS and HTML.

Another, simpler, task would be to implement smooth scrolling in your page. I see your navigation links point to each section (great job on this, very very few people actually remember to do it). So it would look nice if you make the page scroll smoothly when the user clicks on the link.

Great job on the project and keep up the good work!

Your HTML is pretty good! To make it even better, you can implement semantic HTML. Here's some links that explain why you use it and some of the elements available:
https://www.w3schools.com/html/html5_semantic_elements.asp
http://www.hongkiat.com/blog/html-5-semantics/
https://www.thoughtco.com/why-use-semantic-html-3468271
https://stackoverflow.com/questions/17272019/why-to-use-html5-semantic-tag-instead-of-div

https://github.com/jessodri/prj-rev-bwfs-tea-cozy/blob/b5ef4ae0dd71e1e881b51bdab4a3d46631b0e74a/TeaCozy/index.html#L12

I see you make use of flexbox a lot in your page to good effect. It's good to get some practice and get to grips with it, but I feel that it is important to understand when to use flexbox, and when you want to avoid it. If you haven't encountered these in your research, they're worth a read:

http://brolik.com/blog/when-to-use-flexbox/
https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/