drood87 / capstone_project Goto Github PK

Nice work creating a web page that closely follows the project specification. Good job with the use of Flex Layout -- the page responds smoothly to changes in browser width.

Your HTML source is neat and well structured. The indentation levels clearly reflect the parent-child relationships between elements.

You can feel good about:

• Using semantic elements to give the document more formal structure:
  • <header>, <nav>, <section>, <footer>
• Including comments and whitespace
  • visually breaking up the code into readable chunks
• Using entity codes where needed: &, ', ©
• Remembering to define alt attributes for the images

Be careful not to overuse <div> elements.

Grade: Meets Expectations

Nice work creating a simple and functional page that follows the project specification.

I like the experimentation with :hover attributes and CSS transitions. You might consider applying those to the 6 course boxes too.

A tip: if you style the "clickable" elements (using the :hover selector), with cursor: pointer;, the mouse pointer will switch to the "pointing hand" when the user hovers over those elements. This is a well established visual clue that the user can click on that item.

Overall, some very clean code with good use of comments and whitespace for dividing the code up into readable paragraphs.

Some further reading:

• https://learn.shayhowe.com/html-css/writing-your-best-code/
• http://www.apaddedcell.com/div-itis-what-it-and-how-avoid-it

Keep up the good work!

Your CSS source is also clear and well laid out; good use of comments and whitespace here too.

I would recommend keeping to the convention of using all-lowercase-hyphen-delimited names for classes and IDs:

For example:

should look like this:

.banner-section {
  display: flex;
  align-items: center;
}

.banner-img-container {
  width: 60%;
  margin: 24px 32px;
}