Learning Webdesign
Wednesday 3rd September:
Today we went onto Code Academy to learn basic coding. Each task we complete on Code Academy with reward us with a badge!
The task was to add text in between the <strong> and </strong> code. <strong>Feel free to include text here</strong>
I put: <strong> Subscribe to my YouTube channel </strong> and got the badge!
After, I proceeded onto the next ask which consists of learning the meanings of HTML. The 'HT' part stands for HyperText which basically means hyperlink, e.g. When you click on a piece of text, it links you to the next page. The 'ML' part stands for Markup Language which is a form of programming that makes a website do more than just sit on a page. E.g. It can turn text into charts, images, lists etc.
This then goes on to explaining the meat of a website. What makes it look amazing. Using something called CSS (Cascading Style Sheets) you can make the website look all pretty!
The task explained to me that <!DOCTYPE html> means that it's telling the document that we are using HTML code to make it. This means on the first line of the document, it has to start with <!DOCTYPE html> in order to proceed with the code.
On the line underneath it, we have to put <html>. This means that we are now going to start typing the code on the line underneath it. Once we are done with the code, we then end it with </html>, this lets the code know that we are done.
From using what I have just learnt from the tutorial, I now have to type it up.
After, I learned how to include a title in code. like every document, we start the code off with <!DOCTYPE html> and then underneath that we put <html>. Thats what we previously learned. Now to include a title, on a new line we now have to put <head> which means its the top of the page. Now on another new line, we have to let the code know what we want at the top of the page, in our case we want a title. To start our title we have to put <title> and then make a new line typing our title. After, make another new line and type </title>, this tells the code that our title has ended. Since that is all I want at the top of my page at the moment, we end the head with </head>.
To let the script know that you are typing a paragraph, on a new line put <body> and then underneath that put <p>. This starts your paragraph. After putting <p>, type your paragraph, then when your done, end it with </p>.
Then you get this!
Skipping a head a bit. Inserting a link to somewhere requires you to put:
<a href= "https://www.youtube.com"> (insert description here)
</a>
DONE!
To add an image put <img src="http://i.ytimg.com/vi/qEPtc_IkP8I/maxresdefault.jpg" />
Paper Templates
I was put into a group and we all designed paper templates of a website so we can physically see it and show the mechanics of which page goes where and where images are going to be placed.
Putting together my website
This layout in my opinion is my favourite layout design because it's very simplistic and doesn't look too complex to make (Even though it really was) to I design to go with this design.
The first time making my website template from scratch was nearly impossible for me. I could understand any of it. Essentially all I did was copy and paste the code for the basic template and then stare at the code to see if I could work it out.
After playing around with the code, I slowly and gradually started to understand it. Fails started turning into successes. Also, this was near the end of the lesson so I had to take that little bit of skill I learnt home with me and get on with it there.
The picture that you can see above is the template I got whilst I was in college. I knew what type of template I wanted to achieve at the end of it and decided to look at the code again just to refresh my memory. I also went back to code academy to game some more knowledge but that didn't go so well as it kept messing up on my computer (because luck) so I resulted into playing around with it again.
My first objective was to put Twitter, Facebook and YouTube icons in and onto my website. To do this, I went onto Google Images and inspected the element of the code by right clicking onto the image and then clicking "Inspect Element".
This then brought up the code that I needed to paste into my code. I done this for all three images and the changed the height and width of them all to how big I'd like them all to be. After I then bumped into a little problem, I wanted all three images underneath each other rather then next to each other. After a good hour of figuring this out on my own (literally not looking for help what so ever) I tried inserting <div> and </div> everywhere. I put each image code underneath each other and then started/ended them all with <div> and </div>. This then put them all underneath each other. They were all a bit to big after this so I went back to the height and width of each image and changed them all to "50". Because I'm really smart, this all took me about 4 hours to figure out. Even if it I did just explain it in a really simple fashion.
As you can see in the image about, there is a MASSIVE paragraph that isn't even in English (because confusion) and I didn't want it there. In fact, I wanted an image there advertising Poetry Slam rather than a big chunk of text. This was dead simple, just find a massive paragraph in the code that wasn't written in English and delete it. Then all I did was find an image on Google that said, "[insert image here]" and inspected the element of that image and copied the code. I then started another <div> code and pasted the code of the image underneath (this was all above the social networking images code I put earlier) and then on a new line right underneath the image code, I ended it with a </div> code.
Here is a picture of the coding I'd done. Underneath is a picture of the website.
Evaluating the process of creating a webpage
Thursday 2nd October 2014
In class today, Mike viewed our websites on the interactive board infront of the class and got other peoples opinions on them. I was really glad about this because when it came to my website, I got a good view on what I should improve on such as images, description of what the website is about and tweak the overal design layout of the website to make it look more professional.
My progression with the web design
