Colmar Academy Project

Projects Capstone Projects
1

Hello,
Finished the colmar project, took me about 10 hours to make, don’t know how well structured my code is.
Feedback is appreciated.
Thanks

Github Pages: Colmar Academy
Github: GitHub - VKrieger/COLMAR

1 Like
2

Hi, there!

Great job on finishing Colmar Academy!

Your page almost tricked me because I like to resize the browser to check for responsiveness, but you’re using max-device-width :sweat_smile:

A few notes:

  1. I noticed that none of your images have alternative text. As a developer, you’ll need to decide if the used images bring context to the page’s messaging and supply them with alt text that helps those with screen readers understand that context. If the image is decorative or gives no extra context, be sure to include empty alt tags, i.e. alt=""

  2. The hovering animations are a nice touch, but I did notice that for the “Start Leaning” section, the courses will go above the header
    image
    This is easily fixed with z-index

  3. Also, for the hover animations, hoverability usually (not always) means clickability. This is why when you hover over a link, you get the pointer instead of the usual cursor. While Colmar Academy is just the landing page, getting into the habit of placing cursor: pointer; where needed could be a good idea! :slight_smile:

Keep up the great work!

Happy coding!~

1 Like
3

oh wow thank you for the detailed review. Oh right max-width would be the better choice for that.

But I’m more concerned about my code, besides that I don’t have any comments or alts. I think there is a lot of room for optimization or best practice terms? Or is that not so important as long the code works :wink:
I started with the desktop version first without thinking of the mobile version and later I had to do some fixes and workarounds, it all got a bit messy. Later I have read you should start with the mobile version first. :man_shrugging:

4

You will find it much easier to go from mobile design to desktop design. On your next project, give it a try!

As for your HTML and CSS, I can give you a couple of notes.

  1. The “Start Here” button may be better used as an anchor tag. When you use <button> versus <a>, they each have differing semantic uses. Buttons perform actions: open/close a window, change a slide, submit a form, etc. Anchor elements, on the other hand, are used for linking—navigating internally/externally through a site.

  2. “COURSES” should be capitalized through CSS. This is because some screen readers may individually read each letter rather than the word. Using text-transform: uppercase; ensures every user has the same experience.

  3. There are a lot of <div>s where, instead, <article> could have been used. It can be confusing to decide when to use <section>, <article>, or <div>, but when you look at the content, decide what its meaning is for the entirety of the webpage. Is the content grouped and related to each other? Does the content stand alone? Or is grouping being used purely for design purposes?

  4. There’s some CSS being used that isn’t actually doing anything; they’re intrinsic values or their application isn’t needed. For example, height: auto; is intrinsic; its initial value is auto. But the more projects you do, the more you’ll understand CSS and its different values and such. Nothing being used is breaking the design, so it’s not a big deal. Just a few keystrokes that could be saved. :wink:

5

thank you
that helps me a lot

1 Like