Colmar Academy project

Projects Capstone Projects
1

At the end of the Build a Website with HTML, CSS and GitHub Pages skill path, one of the last pages said there would be instructions for getting feedback from the Colmar Academy project, except there were no instructions, so figured posting here might work.

I’d love to get some feedback on my project. Here’s the website: Colmar Academy
And here’s the repository: GitHub - sander2473/colmar

The code seems to work, but I’m certain there has to be a better way to streamline some of the coding, especially the CSS, so any suggestions would be welcome.

Finishing everything with this project was a bear – and still a lot of fun to figure out, especially trying to get the mobile coding right and working more with flexbox (I’m completely new to that concept). I have a little bit of a design background, so that part was fairly easy, but getting the positioning right was toughest.

Thanks so much for reading and for your consideration!

2

Hi! I also finished my Colmar Academy two days ago.

I looked at your project and here are some notes, what I would made different.

  • i respect number of rows used for main heading and for paragraphs within the page → as in spec document (
    tag would do it) - from my humble opinion, it just looks better
  • i don’t like white margin around whole page - because of this, page doesn’t fill entire screen (set “margin: 0;” for tag)
  • I really like that navigation bar moves with scrolling. What is disturbing for me, is that in mobile screen, icons are not centered and they are slightly moved to the left.
  • on mobile, i don’t see images in information-boxes section
  • your footer is so thin - make it higher

Anyway, gj (I know how I struggled to get it done)! I hope I wasn’t too negative. If you want, look at my Colmar Academy here: Colmar Academy
I also implemented some CSS Transitions, so don’t forget to hover over start button and single articles!
If you’ll also give me some feedback, I would be really thankful!

Adam

1 Like
3

Hi Adam,

Thanks so much for the feedback. MUCH appreciated. You weren’t too negative – very helpful to have someone looking at it with a critical eye.
I fixed the images in the information-boxes section on mobile (that was a late coding change when I finally realized they had provided images sized for mobile with the project), and you’re right about the mobile nav section. I had a weird padding issue I couldn’t get rid of until finally figuring out where it was coming from.
I was trying to get as close to spec as I could because this was my first coding project of any kind – there’s a couple of things on there that goes against every principle of design I’ve ever used.

Anyway, a couple of questions: When you mention tags (like setting the margin: 0; for tag, and when you talked about the number of rows for the main heading and paragraphs, I’m not sure what you mean.
On the footer, are you talking about adding more padding or spacing below the footer text, or something else? I could see how extra spacing below the text would be helpful. Didn’t realize til now, but the text does bump right up against the very bottom of the window.
I had some transitions coded in on my links, but they’re in theme with the black, gray and white of the site – and perhaps too subtle.

I checked yours out. Looks good! I stuck strictly with the spec on the shaded boxes for desktop, but if I did it over (and if it hadn’t been such a struggle the firs time), I’d have done it over the way you did with the shaded boxes on hover.

A couple of suggestions:
The font choice works really well for top-level display (the nav, and larger headers), but has a bit of a robotic feel for the smaller text. Might look better with a slightly different or closer to standard font for those spots, but that’s just one person’s opinion.

I’m interested in what led to you using the green for the hover color on the start button and course boxes, but not the information boxes. I think it’s just fine – just interested in the decision.

I like the text spacing out on the transition for the start here button in the main section at the top. I’d suggest either making that transition a bit slower or dropping the character/word spacing to, say, 0.2em instead of 0.3em. The transition itself is very cool. I think it’d look even better if the text wasn’t moving quite so far, so fast.

Only other thing: I like the way you set up the hover on the information boxes, especially when hovering over the middle box. When hovering over the top or the bottom box, I saw double lines between the two boxes that weren’t being selected, but didn’t see that when hovering/selecting the middle box. It’s a minor thing, certainly. Did you consider doing the same thing for those boxes on mobile? It looks very good the way it is. I’m just interested in how people make design and coding decisions, that’s all.

Hope that all made sense. Thanks again for helping me out!

Scott

4

Hey there,

i meant this:

<body>
    margin: 0;
</body>

this will remove white border around the whole page.

Also if you look at the spec document and focus at number of rows within each heading and paragraph, you will see certain amount of rows for each of them. I strictly followed this scheme. To make this, just do:

<br>

when you want to start new row.

I agree with that part about font. Maybe I will change it later, but now I am more focused to progressing through next path on codecademy :slight_smile: All my design decisions were make just on my feelings. Literally, I don’t have any experience in this way. And yeah, button has little bit much of word&letter spacing.

Thanks for the feedback!

5

Oh, OK. Thanks for answering my questions. That clears it up. Appreciate you looking at my project and the help!

1 Like