Personal and Professional Practice 3: 'Engage' Studio Brief - Codecademy (Make a Website)

Learning the Basics:
When it comes to making a website there can be a lot of confusing terminology that has to be used in order for everything to be in line or the actual writing to appear and we can use HTML code to be able write things onto a website.

We can use the 'h' element to create headings in the text and this is displayed like this:
<h>writing</h>

We can use the 'p' element to create paragraphs and this is used for large parts of writing, like this:
<p>writing</p>
We can also add in links by using the 'a' element. This needs a website url in order to work, like this:
<a href="web address">display writing</a>
We can add image with the 'img' tag, this can embed them into the webpage, like this:
<img src="webpage url>

We can add in a bullet pointed lists as well, this is described as a 'ul' element, and each item that is going to be added needs to be in a 'li' element, like this:
<ul>
<li>writing</li>
<li>writing</li>
</ul>

On a real web page all the information inside is stored in a 'body' element. This keeps everything neat and the Doc type at the start, tells the browser which version of the HTML element and ensures consistency through different internet browsers.

Task: Remaking the Airbnb Website
I started by adding in a navigation bar onto the top using the 'li' element so that they where separate lines of text. I added 5 in total and separated these into 2 sections using a 'div' element. The first one being the navigation bar that we call 'nav' and the second being a 'container' which wraps all the text together.

We then went about adding in a large header and subheader which we did with the 'p' element. We used the 'jumbotron' 'div' element so to ensure that the file new these where going to be large and again wrapped these in a 'container div'.

We then added a subheading using the 'h3' element, which creates semi large writing, and put a 'p' element description below it and a link with the 'a' element under that, before again, wrapping them together.

After this piece of what was going to be the supporting content for the website we added 2 more like this, using the same structure as before. This was then put into a 'container' and then another 'div' element which we called 'learn-more'.

CSS Code Basics
CSS is used to define the design and layout of the page, it's used to control the layout of the page and the appearance of the HTML element. We can use the elements 'h1', 'h3' and so on, names to be able to alter different aspects, like the colour for example.
h1 {
colour: yellow;
}

CSS uses rule to do this and style the HTML elements. It starts with a selector, which is your HTML element, for example 'h1', then inside the brackets you have the property that you are changing, which in this case is colour, and the value that you are changing it too, yellow. We can also use the 'div' headers to separate areas so that they can be styled differently .

We can use the RGB colour system to be able to alter colour and access many different ranges of colour instead. This would just be changed like this below:
.jumbotron h1 {
color: rgb(102,153,0);
}

We can use the hex numbers which also represent colour values:
.jumbotron h1 {
color: #9933cc;
}
We can also change the font at this time and there are many different font families that you can choose from and these are featured in the brackets along with colour for that section.
.jumbotron h1 {
color: red;
font-family: 'Open sans', sans serif;
}

We can also change the font size. Text size can be measures in pixels, ems or rems. This again fits into the brackets for the section.
.jumbotron h1 {
color: red;
font-family: 'Open sans', sans serif;
font-size: 60px
}

This is pretty much everything to change. We can also look at adding in more properties that also add to the page that go around the text.

We can edit the background colour for the whole thing or we can just edit the background colour of a certain section.
.jumbotron h1 {
background-color: #0099cc
}

We could alternatively add a background image to the whole thing or just the one section as well from the web.
.jumbotron h1 {
background-image: url('http://goo.gl/0Dpi3y');
}

We can also add in a border to again either the whole thing, one section or even just a small part of the header. By setting the border, we can change the width, style and colour.
.jumbotron h1 {
border: 3px solid #cc0000
}

We can also add padding to the border so that we can increase the space between the border and the text writing to increase readability. We can also just add padding onto the different sides of the box by using the property changes of padding-top or padding=bottom.
.jumbotron h1 {
padding: 23px
border: 3px solid #cc0000
}

 We can also increase the margin on the box, so that it isn't near the edge of the page. Again this works in pixels.
.jumbotron h1 {
margin: 14px
border: 3px solid #cc0000
} 

And again the top, bottom and sides can be controlled separately. we can either add a figure or we can auto align it so that it will give the text the maximum amount of space. This can be added on both sides to centre the text.

We then need to link the HTML file with the CSS one and it's style sheet. This is put into a 'head' element and uses a 'link' element to connect the two. The 'rel' file is the link to the CSS file and used to style the page and the 'href' attribute gives the link.
<head>
<link href="main.css" rel="style sheet"/>
</head>

Applying the CSS Styling to the Website
We then changed the text style in the main.css document. We started by changing all of the etxt style for the navigation section. We can put this into a group under the 'div' class '.nav a' in the style sheet as its under the div class navigation, 'nav', and the elements we are editing are under 'a'.

We then added a background image to the header section and made it a certain height. We then changed the header (h1), so that it was easier to see, by changing the size, weight and colour. We then changed the paragraph below in that section so that it too stood out. We then uploaded a new font into the HTML file so that we could use it in the style sheet and change the font. I changed the background colour in the 'learn-more' section. We then changed the headings in that section. We finished by changing the colour of the links in the final section.

Layout of the Page
CSS can also control the layout of the page. CSS treats HTML like boxes, they can be 'inline' or 'block'. Block elements display on a new line, inline elements display on the same line. We can also change the position of the HTML to move it to a certain position. This is changed by moving it all of changing the different sides. We can move the text and images to certain parts of the page by using the float element as well. This places things to either side or top or bottom.

Applying New Positional Qualities 
We started by changing the position of the navigation bar so they are all in line. I then edited the .jumbotron section so that the whole container of writing was slightly further down on the page.

Using Bootstrap
Bootstrap is a program that can be used to create features on a website like tabs and buttons that can be clicked on. This can be used for the creation of the website that I am looking at creating. We can use it to do other things as well like pulling all the texts to either side of the page. I used this program to be able to add columns into the grid like system for this website. This ensures that everything was in line, and I also went about adding in a new section to test out that I could do the grid system.

Bootstrap can also be used to add thumbnail images onto the website. I added in some more images on the different columns and the end result is really nice and you can see the images on the columns and how well they line up. I then did some editing in the style sheet to add some borders and also to change the font size and background colour to finish off this tutorial. 

Altogether I feel that I have learned a great deal of information from this in order to be able to create my own website using these basic layouts and trying to look at how they can be adapted in order to be for my own purpose, showing off different elements of the code in practice. It took about 3 hours to do all of this, and it was definitely worth the time as I learned some really nice tips that will help with other aspects of coding as well.