walrusprince16 / colmaracademy Goto Github PK

Nice work on the DRY method and applying css styles to the html elements once or few times, instead of having to write out font-family in your css document multiple times.
For example:
body {font-family: Helvetica;}

You can also stack your css selectors to group styles and apply them once 👍
For example:

h1, h2, a {font-weight: bold}

NOTE: Always conduct a peer-review with your peers in Slack, this will improve performance and ability to problem solve! 💯

Your project contains little to no errors Christian, I went ahead and reviewed your work for best practices and general areas of improvement 😃

Really nice work on using multiple images for separate layouts Christian, also really great use of fluid typography and responsive web design made possible with REM Implementing REM in CSS (or, How to Be a Shiny Happy Developer) - Words and Code

Great job implementing a naming convention it looks similar to the BEM/structural methodology. I like that you can get specific with it, from the html you can identify the css selector, and from the css selector you can identify the html component. I think you can improve it by reducing the characters to 20 or less 😄

Heres a quick read on structural naming https://www.webfx.com/blog/web-design/css-tip-2-structural-naming-convention-in-css/
and also
https://css-tricks.com/bem-101/

As your project grows larger and more complex consider using more Semantic Html elements, which help clearly define the role of the element or the intent behind it. What Semantic Html doesn’t do is provide a default style or behavior to your elements. You can think of them “as divs by another name” also here is a great article on Semantic Html
https://www.semrush.com/blog/semantic-html5-guide/

Semantic html can help reduce the creating/use of classnames and ids and visually provide relief from too many divs on the page 👀

You're layouts are looking top-notch Christian, really great work expanding the mobile layout to include tablet layouts and larger devices, I would suggest bringing it in closer to around 700px. This will implement a mobile layout that will work well for a tablet device with responsive design in mind, and stop the elements from collapsing at lesser viewport widths

Overall this project is a little more complex so take some time and work through each section one-at-a-time, as you work through your project. 👀

The navigation bar has these three rectangular bars, this is meant to visually indicate distance between the navigation links, you can remove or comment out these lines of code 😉

Great impression on your last submittable project Christian, I can see that your codebase is very short and concise, great use css stacking and non-repeating code 🙌. Your work clearly represents the required outcome for this assignment!

Overall Score

Criteria 1: HTML Structure
Score Level: 4 - HTML implementation enables proper use of media queries.
HTML structure reflects the grouping and flow of content in the web browser.

Criteria 2: Visual Layout for Both Desktop and Mobile Sizes
Score Level: 4 - Desktop and mobile layouts match the wireframe in all sections. 

Criteria 3: Responsive Design (Media Queries, Responsive Units, etc.)
Score Level: 4 - Media queries kick in at appropriate breakpoints. 
Responsive units are used throughout.

Criteria 4: Visual Design and Accessibility (Color Palette, Typography, Transitions, etc.)
Score Level: 4 - An accessible color palette was chosen. Typographic considerations were made. CSS transitions were used.

Overall Score: 16/16

As this is your last project, many students take this opportunity to add personal flair and really use their own design choices, like css transitions, hover actions, css gradients and a lot more!

Nice work on your typography Christian, the headings and textual elements are large and legible. I like the use of bold uppercase letters as the logo typeface. Also consider updating the Campus section which has default styles for the anchor tags.

One other suggestion would be to include more mouse interactions, I like to quickly add these to my projects with cursor: pointer and apply them to links and buttons in my CSS