code | My reflective journal

This weeks learning activity is:

Take the basic website you have designed in your previous two Learning Activities in this module (Learning Activity – Put Thought Into Your Design and Learning Activity – Planning the Structure) and convert that into HTML and CSS code.

This will help you understand the importance between the design and the programming phase and how they work together.

Don’t stress if you can’t get everything right, just do as much as you can.

Well.. it sure did make me understand the importance between the design and the programming phase. Making the design in InDesign early on, adding lots of pictures and fancy fonts, and a little complicated layout, I didn’t think to much about how this would be to code. I now see that the more you learn about code and how the programming works, it has to be taken into consideration when designing.

I have tried to write the cod with order and systematic. Even I have a tiny site, I got a little lost at times, and I am good at making a mess, so I see now the importance of file planing and creating a neat and tidy code.

Screenshot 2019-05-12 at 14.37.19

The initial design of the site was simple and yet I had problems codeing it to look like the design I wanted:

The part I struggled most with was getting the pictures to float and position where I wanted them to. The spacing between paragraphs where also a bit of.

The index page

For some reason the index.htlm page did not display the right font.

Screenshot 2019-05-12 at 22.55.21 Screenshot 2019-05-12 at 22.57.13

The code for the header and navbar seems to be the same, but it wont display the right code. I have also tried an easier solution for picture and background since I was unable to create the one I had designed right away.

All the undersigths are the same, and have similar code. It’s only the pictures and their position that I couldn’t figure out.