romanovichk / colmar Goto Github PK

Remember that id are designed to be used only once while classes are designed to be reused by by multiple elements. Instead of id='orange' a better alternative would be class='orange'. Often as webpages get larger it can become difficult to keep track of all the id and classes in a webpage so using a validator is a great way to catch these slip-ups.

Good work in adding comment to the projects HTML markup! This is a fundamental skill that is often forgotten and can help working on a webpage a much easier task. When commenting lean towards being descriptive. Rather than having multiple <!---Content # --> comments that are only differentiated by a number, describing what that section of the page is doing will be much more efficient and functional. (The <!--Header--> and <!--Footer-->> are great examples of functional comments)

Pre-HTML5 it was a common markup pattern to use <div> tags to section and break up markup. However, with the new HTML5 specification new elements that are "semantically" descriptive, have been introduced.

Some elements that you can add to break up this webpages mockup are <header>, <nav> and <footer> and <section>. This also ensures you are writing HTML5 markup that matches the latest specification, makes the markup more readable (which can save a lot of time with a webpage as large as this one) and in some cases may reduce the amount of CSS you have to write as well! Using these element tags also optimizes a webpage to be found by search engine algorithms.

Good work in organizing the stylesheet to match the mockups markup. In fact grouping styles by section is recommended by Googles HTML/CSS style guide. I noticed in the Universal Styles areas that styles were being repeated. A concept you will likely come across in development is Dont-Repeat-Yourself. With stylesheets, rather than repeating padding-bottom:32px

.content2 h1 {
  padding-top: 32px;
}

.content3 h1 {
  text-align: center;
  padding-bottom: 32px;
}

.content4 h1 {
  text-align: center;
  padding-top: 32px;
  width: 100%;
}

An alternative approach could be

.pb-32 {
     padding-bottom:32;
}

Now the pb-32 class can be used for h1 tags but also anywhere else in the markup. Also if you want to update the style later, rather than finding the style everywhere that it is repeated, it is a simple matter of updating that one style once and every element with that class will be updated. This is actually how CSS frameworks like Bootstrap are designed!

Awesome work on this mockups!! The HTML markup was very well organized, consistent with the indentation, and class and id attributes are well-named! You demonstrated proper use of media queries and flexbox. A few suggestions as a way to continue learning more and adding to your web development arsenal is to look into CSS Grids the which is a new player in the CSS3 specification and provides the developer more granular control when designing a responsive webpage. You may also want to consider implementing a CSS naming methodology to help avoid naming conflicts. I mentioned in a previous issue that as web pages become larger it can become harder to keep track of all the class and id attributes in a page and so in comes BEM to help you avoid naming conflicts!

A few more resources you might consider to deepen your understanding of Flexbox is this Flexbox Course. Codecademy also has a course on CSS Grids

Keep up the awesome work Roman!!