adjrieng/colmar

cc Colmar Academy Project

colmar academy

*Read ---> README_FIRST.txt

thanks for your participaction ;-)

colmar's Issues

Responsive

Really nice work on using multiple images for separate layouts Adijrien, 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

Consider only using the viewport width units for headings and subheadings as they are much easier to recognize as the viewport changes sizes!

Your transition between different layouts can be smoother, as you make use of the entire pages length and width. 👍

Layouts

You're layouts need a lot more work Ajidrien, nice work starting the mobile layout sooner, at 480px, consider bringing it closer to 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. 👀

Semantic html

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 👀

Great effort

Great effort on your last submittable project Adijrien, I can see that your codebase is well formatted with indentation and commenting, I can navigate your project quickly 🙌. Your work clearly represents the required outcome for this assignment!

I can see that you need more time to complete this project, it is challenging for many students and requires a lot of updating, especially after feedback 🤔
I see that you are up to the challenge though, thanks for sharing your readme, its really great to see your passion and planning for web design projects!

Personality

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 Ajidrien, I like the use of uppercase letters as the logo typeface, the headings and textual elements are large and legible as well 👍

NOTES

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

Your project contains many errors or is incomplete Adijrien, I went ahead and reviewed your work for best practices and general areas of improvement 😃

Again your codebase shows off a great work ethic, im sure with time you can improve this without too many issues!

Overall Score

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: 3 - Desktop and mobile layouts match the wireframe in all sections. 

Criteria 3: Responsive Design (Media Queries, Responsive Units, etc.)
Score Level: 3 - 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: 3 - An accessible color palette was chosen. Typographic considerations were made. CSS transitions were used.

Overall Score: 13/16

Don't Repeat Yourself or the DRY method

Consider using more DRY methods to apply 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}