Coding Basics – week 26

Brief:

«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.«

My work:

I started off learning the CSS basics from this tutorial.

Before Christmas, I made a basic wireframe for my dummy site using Notepad++. I took this wireframe into Codepen and edited it furter. From watching the tutorial, I learned a few trics about organising my code, and I tried to impliment that with comments. I used Wikihow to add codes to the navigation.

Here is my quick sketch from week 25:

I will use some images from the internet in order to make a dummy page.

Here are the images I will use for the dummy, more or less:

• 

• 

• 

• 

• 

• 

Here is the linkt to Codeguide, which is useful for coding.

Colours Neil Orange Peel is useful for keywords for colours.

This colour control is great for finding the right codes for colour used on the web.

Here are some fonts used for the web.

Some work in progress:

• 

• 

• 

The first is before Css, the second is after som css, and the third is the same coding as the second, just smaller screen.

• 

• 

Here is the code

I have used web safe fonts, but I will make the «Opplev Gol» into a logo/png-file, and probably the tag line too. So this is still work in progress.

Please note that the navigation will link to the corresponding pages when finished.