Dasmoto's Arts & Crafts Project Attempt

Just completed the Dasmoto Arts & Crafts project. You can view my work here: https://github.com/Stephen-Kam/dasmoto-arts-and-crafts

Any feedback would be appreciated. I tried to use semantic tags where possible though may have missed a couple.

Generally no difficulties, just had to tinker around with the file paths. I’m sure I remember reading that you could omit the . at the start of a relative file path e.g. /resources/css/index.css but for some reason no images or the styling would appear until I included it so: ./resources/css/index.css

Code editor used: Visual Studio Code

1 Like

Hi,

Nice work! I like the general color concept as it feels “fresh”.

Some suggestions (I break these down into what I think are css fundamentals):

  • Color Matching colors is a tricky business. As a rule of thumb I try to consider whether my eyes have to strain to read (before checking with accessibility guides). Your labels have white text within a bright color surround by more white space. This is inherently challenging on the eyes even if it’s pretty (like snow combined with bright light). So I would consider trying to play around with ways to avoid this.

  • Layout The whole page tilts left. A little bit of asymmetry is often desirable, but I think in this case it might be too extreme. I personally use figma to layout my pages before applying them to css to get a cleaner idea of what I want particularly with layout. Before figma I used to just hand-draw the layout.

  • Typography Contrast in size, font-weight, and maybe even having a second font for the title can help the page open up. Consider fonts.google.com and look at some of the most popular fonts being used today. They’re popular for a reason. It may sound unoriginal, but you won’t look like everyone else’s pages because the fonts serve to decorate your color and layout in a way. They need to be versatile and functional.

Hope this helps!

Thanks for the feedback, if I attempt a personal project I’d definitely take this on board and apply it. Though for this particular project I’ve tried to match the design requirements as much as possible.