a few weeks ago I started learning Flexbox and to practice my skills I did the following exercise:
Piet Mondrian was a 20th century Dutch painter whose paintings emphasized simple geometric elements.
Inside a file called mondrian.html, create this Piet Mondrian painting (https://artmiamimagazine.com/wp-content/uploads/2019/02/Piet-Mondrian-d35kfou.jpg) using HTML and flexbox.
If you're having trouble creating the whole thing, pick a "chunk" of the painting and work on just that. Then pick another "chunk" and do that, etc. How can you combine your chunks into a single image? (think: HTML tree structure). Some students have found printing the image and numbering each rectangle helpful.
I would like to receive a review of the code. Is the use of the semantic tags correct? Is the code style right? What bad practices do I apply in the code? Have I overcomplicated myself? Is there a simpler and better way to solve the problem?
Code:
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
border: 16px solid #292827;
height: 100vh;
}
.box_A,
.box_B {
flex: 1 0 auto;
}
.box_A {
border-right: 8px solid #292827;
}
.box_A > div,
.box_B > div {
height: 10%;
}
.row0,
.row1,
.row2,
.row3,
.row4,
.row5,
.row6,
.row7,
.row8,
.row9 {
display: flex;
}
.a1 {
flex: 1 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.a2 {
flex: 3 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.a3 {
flex: 2 0 auto;
background-color: #f9e217;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.b1 {
flex: 1 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.b1-bottom {
flex: 1 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.b2 {
flex: 4 0 auto;
background-color: red;
box-shadow: -8px 0 0 0 #292827 inset;
}
.b3 {
flex: 2.5 0 auto;
background-color: #f9e217;
}
.b3-bottom {
flex: 2.5 0 auto;
background-color: #f9e217;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.c1 {
flex: 1 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.c2 {
flex: 4 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
background-color: red;
}
.c2-bottom {
flex: 4 0 auto;
background-color: red;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.c3 {
flex: 1.25 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.c3-bottom {
flex: 1.25 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.c4 {
flex: 1.25 0 auto;
}
.c4-bottom {
flex: 1.25 0 auto;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.d1 {
flex: 1 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.d2 {
flex: 2 0 auto;
background-color: black;
box-shadow: -8px 0 0 0 #292827 inset;
}
.d3 {
flex: 2 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.d4 {
flex: 2.5 0 auto;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.e1 {
flex: 1 0 auto;
background-color: #f9e217;
box-shadow: -8px 0 0 0 #292827 inset;
}
.e2 {
flex: 2 0 auto;
background-color: black;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.e3 {
flex: 2 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.e4 {
flex: 2.5 0 auto;
background-color: #0c7bbc;
}
.f1 {
flex: 1 0 auto;
background-color: #f9e217;
box-shadow: -8px 0 0 0 #292827 inset;
}
.f2 {
flex: 2 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.f3 {
flex: 2 0 auto;
background-color: black;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.f4 {
flex: 2.5 0 auto;
background-color: #0c7bbc;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.g1 {
flex: 1 0 auto;
background-color: #f9e217;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.g2 {
flex: 2 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.g3 {
flex: 1 0 auto;
background-color: #f9e217;
box-shadow: -8px 0 0 0 #292827 inset;
}
.g4 {
flex: 1 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.g5 {
flex: 2.5 0 auto;
background-color: red;
}
.h1 {
flex: 3 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.h2 {
flex: 1 0 auto;
background-color: #f9e217;
box-shadow: -8px 0 0 0 #292827 inset;
}
.h3 {
flex: 1 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.h4 {
flex: 2.5 0 auto;
background-color: red;
}
.i1 {
flex: 2 0 auto;
background-color: #0c7bbc;
box-shadow: -8px 0 0 0 #292827 inset;
}
.i2 {
flex: 0.5 0 auto;
background-color: #f9e217;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.i3 {
flex: 0.5 0 auto;
background-color: black;
box-shadow: -8px 0 0 0 #292827 inset;
}
.i4 {
flex: 3 0 auto;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.j1 {
flex: 2 0 auto;
background-color: #0c7bbc;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.j2 {
flex: 1 0 auto;
background-color: #f9e217;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.j3 {
flex: 2 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.j4 {
flex: 1 0 auto;
background-color: #f9e217;
}
.k1 {
flex: 2 0 auto;
background-color: red;
box-shadow: -8px 0 0 0 #292827 inset;
}
.k2 {
flex: 1 0 auto;
background-color: black;
box-shadow: -8px 0 0 0 #292827 inset;
}
.k3 {
flex: 2 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.k4 {
flex: 1 0 auto;
background-color: #f9e217;
}
.l1 {
flex: 2 0 auto;
background-color: red;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.l2 {
flex: 1 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.l3 {
flex: 2 0 auto;
background-color: black;
box-shadow: -8px 0 0 0 #292827 inset;
}
.l4 {
flex: 1 0 auto;
background-color: #f9e217;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.m1 {
flex: 2 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.m2 {
flex: 1 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.m3 {
flex: 2 0 auto;
background-color: black;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.m4 {
flex: 1 0 auto;
}
.n1 {
flex: 1 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.n2 {
flex: 1 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.n3 {
flex: 3 0 auto;
background-color: #0c7bbc;
box-shadow: -8px 0 0 0 #292827 inset;
}
.n4 {
flex: 1 0 auto;
}
.o1 {
flex: 1 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.o2 {
flex: 1 0 auto;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.o3 {
flex: 3 0 auto;
background-color: #0c7bbc;
box-shadow: -8px 0 0 0 #292827 inset;
}
.o4 {
flex: 1 0 auto;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.p1 {
flex: 2 0 auto;
background-color: #f9e217;
box-shadow: -8px 0 0 0 #292827 inset;
}
.p2 {
flex: 3 0 auto;
background-color: #0c7bbc;
box-shadow: -8px 0 0 0 #292827 inset;
}
.p3 {
flex: 1 0 auto;
}
.q1 {
flex: 2 0 auto;
background-color: #f9e217;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.q2 {
flex: 3 0 auto;
background-color: #0c7bbc;
box-shadow: -8px -8px 0 0 #292827 inset;
}
.q3 {
flex: 1 0 auto;
box-shadow: 0 -8px 0 0 #292827 inset;
}
.r1 {
flex: 1 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.r2 {
flex: 1 0 auto;
background-color: black;
box-shadow: -8px 0 0 0 #292827 inset;
}
.r3 {
flex: 2.5 0 auto;
box-shadow: -8px 0 0 0 #292827 inset;
}
.r4 {
flex: 1.5 0 auto;
}
<div class="container">
<div class="box_A">
<div class="row0">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="row1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
<div class="row2">
<div class="b1-bottom"></div>
<div class="b2"></div>
<div class="b3-bottom"></div>
</div>
<div class="row3">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
<div class="row4">
<div class="c1"></div>
<div class="c2-bottom"></div>
<div class="c3-bottom"></div>
<div class="c4-bottom"></div>
</div>
<div class="row5">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</div>
<div class="row6">
<div class="e1"></div>
<div class="e2"></div>
<div class="e3"></div>
<div class="e4"></div>
</div>
<div class="row7">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
<div class="f4"></div>
</div>
<div class="row8">
<div class="g1"></div>
<div class="g2"></div>
<div class="g3"></div>
<div class="g4"></div>
<div class="g5"></div>
</div>
<div class="row9">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
<div class="h4"></div>
</div>
</div>
<div class="box_B">
<div class="row0">
<div class="i1"></div>
<div class="i2"></div>
<div class="i3"></div>
<div class="i4"></div>
</div>
<div class="row1">
<div class="j1"></div>
<div class="j2"></div>
<div class="j3"></div>
<div class="j4"></div>
</div>
<div class="row2">
<div class="k1"></div>
<div class="k2"></div>
<div class="k3"></div>
<div class="k4"></div>
</div>
<div class="row3">
<div class="l1"></div>
<div class="l2"></div>
<div class="l3"></div>
<div class="l4"></div>
</div>
<div class="row4">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
<div class="m4"></div>
</div>
<div class="row5">
<div class="n1"></div>
<div class="n2"></div>
<div class="n3"></div>
<div class="n4"></div>
</div>
<div class="row6">
<div class="o1"></div>
<div class="o2"></div>
<div class="o3"></div>
<div class="o4"></div>
</div>
<div class="row7">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
</div>
<div class="row8">
<div class="q1"></div>
<div class="q2"></div>
<div class="q3"></div>
</div>
<div class="row9">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
<div class="r4"></div>
</div>
</div>
</div>
Thank you in advance for your comments.
.css
file, you could addstyle=
elements to the<div>
tags. If you’re only using a given “style” in one place, and its real purpose is to draw part of a picture, it feels a bit simpler to me to put it where it’s being used. This is not a stylesheet you would ever use with another document, so there’s little reason to make it a separate file, rather than part of the<head>
. But you might or might not consider that an improvement. \$\endgroup\$