amin135/teacozy

teacozy's Issues

SUMMARY

GRADE: Needs Improvement

SUMMARY: While the site itself does look good, there are many improvements to be made behind the scenes. It does seem like a good amount of work / effort has been put into the site and that should be commended. There are just a few crucial general ideas that you should keep in mind as you explore future projects.

The main important idea here is clean, concise code. At all times you should be trying to keep from repeating yourself and trying to keep your code readable. This plays out in many ways. In your css, look for ways to avoid writing the same properties and values over and over again; if many elements look the same then they should be styled just once in the css.

In your html, the same idea applies. Look for relationships between elements and make your code work for you by structuring your code around those relationships instead of wrenching each element individually into its place.

In both your html and css, it is crucial to keep your actual code neat and readable as well. All of this is crucial and only becomes more so as your projects grow in size and complexity. So now is a great time to get these skills pinned down.

Again, it does seem like you are off to a good start with being able to replicate the spec, so just put a little more work in behind the scenes and everything will be great!

IMPORTANT - alignment / purposeful styling

https://github.com/amin135/teacozy/blob/master/index.html#L11-L13
https://github.com/amin135/teacozy/blob/master/resources/css/style.css#L139-L150

in the same vein as the previous issue, always try to be using the most concise code that you can. note the elements above; each item in this nav section is separately aligned so that all three end up on the right side of the header. a more straight-forward approach would be to use a nav element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) to group them together and then pull the whole nav to the right.

when you are starting to build your pages, try to start by looking at the big picture and how the page is structured and how elements relate to each other.

IMPORTANT - html / css organization

try to keep your indentation as consistent as possible throughout the html. a line being indented should indicate that it is nested inside something else. everything that is nested to the same level should be indented the same amount. more info about html styling in general can be found here - https://www.w3schools.com/html/html5_syntax.asp

the same goes for your css; spacing and indentation should be consistent throughout. also, consider making use of some comments throughout the css to help organize your styling by which part of the page it belongs. this will really help if you need to change, add, or remove any code later on.

SIMPLIFY - DRY code

https://github.com/amin135/teacozy/blob/master/resources/css/style.css#L108-L113

in general you should take more care to avoid repeating yourself in the html and the css. take the above chunk of css as an example. inside of it you set the opacity to .9, there are many other elements on the page that also receive this property and value. is there any way to set it for everything at once?

also, blitz text 1, 2, and 3 are all styled exactly the same. ids are meant to target specific and unique elements. a more general class that can be used for all three of these elements would be more useful here.

another small point about the code above - blitz text might not be the most appropriate name for these elements. one of the images is berry blitz tea, but the others are not.

these concepts can be generalized and applied to the rest of the page, so look for other opportunities to make your code more concise.

IMPORTANT - local images

https://github.com/amin135/teacozy/blob/master/index.html#L10
https://github.com/amin135/teacozy/blob/master/resources/css/style.css#L3
https://github.com/amin135/teacozy/blob/master/resources/css/style.css#L15
etc...

the images on your page look great. in order to keep them looking great / prevent the links from becoming broken, make sure to save your images to your project folder. include them in an 'images' folder inside of resources so that you always know exactly where they are.
links to outside sources do work but could easily become broken if that external source decides to change where they are stored or takes them down altogether.