These are my solutions to Joy Shaheb's exercises

Exercise 1

Exercise 1 image, showing a desktop and a mobile layout. Desktop layout has 3 rows and 3 columns, with boxes A-I. Mobile layout has 1 column and three rows, with boxes A-C.

The challenge for this exercise for me, lied in how I would recreate the design such that it matched the given image. It was tricky sizing the boxes, but the final product turned out satisfactory.

Exercise 2

Exercise 2 image, showing a desktop and a mobile layout. Desktop layout is a horizontal nav bar, with 4 buttons: home, about, services and contacts. Mobile layout is a vertical nav bar, with same buttons arranged in a column.

This exercise was pretty easy, I was really surprised at how quickly I completed it.

Exercise 3

Exercise 3 image, showing a desktop and a mobile layout. Desktop layout shows one vertical rectangle with the word "left", and a vertical rectangle that is 3 times the other rectangle, labeled "right". Mobile layout shows two rectangles with the same labels, but are now the same size, with "left" and then "right".

This one was also pretty easy, and after completing this one I decided to take a break so as not to overwork my brain.

Exercise 4

Exercise 4 image, showing a desktop and a mobile layout. Desktop layout has 3 rows and 1 column, row 1 has a rectangle labeled A taking up the full width. Row 2 shows a rectangle labeled B taking up 70% of the width, and a box labeled E that takes up 30% of the width. Row 3 shows a box labeled C taking up 35% of the width, and a rectangle labeled D taking up 65% of the width. The mobile layout has 1 column and 4 rows, rows 1-3 take up the full width, while row 4 has two boxes taking up 50% width each. Boxes are labeled as such: row 1: A, row 2: B, row 3: E, row 4: C and D.

This exercise was rightfully more challenging, with the main hurdles being: how should I tackle the html? and sizing. I chose to lay out my HTML alphabetically, and rearrange the boxes via CSS. This made more sense to me because the HTML should always be semantic, which to me not only speaks to using the proper tags, but also to laying out the content in the proper order. Having the boxes in the order "A, B, E, C, D" in the HTML does not read properly, but that might just be me. It was hinted at that I was overthinking this point, so jury's still out on that 🥴.

Exercise 5

Exercise 5 image, showing a desktop and a mobile layout. Desktop layout has 3 rows and 1 column. Row 1 has a rectangle taking up the full width labeled A. Row 2 has one vertical rectangle labeled B taking up 20% of the width, one horizontal rectangle taking up 60% of the page, and another vertical rectangle taking up 20% of the page. Row 3 has a lone rectangle labeled E taking up the full width. The mobile layout has 1 column and 4 rows. Row 1 has a rectangle labeled A taking up the full width. Row 2 has a rectangle labeled C taking up full width, and twice the height as the other rows. Row 3 has a rectangle labeled D, and row 4 has a rectangle labeled E.

The final task. This exercise, after having done the previous one, was pretty much smooth sailing. What gave me the most trouble was properly sizing row 2, because my boxes were acting funny due to the given padding, but the trusty Chrome dev tools came through in the end.