W1 | Build A Personal Website





The assignment of the first week is to build a personal website.
Heard of words like html, html5, javascript before, but have not put my hand onto it. This is the first time I tried to build a website by myself and learned a lot(found a new world).

|| What is a website?

What is a website? How can engineers behind it present it to you in the way it is? Actually by a right click, then you can find the html code behind it.

A website is functioned by code above. And browser is the tool that opens the .html file and translates code into visual page you use everyday. To make your interaction with the website more interesting and vivid. People invented css for styling(make it more beautiful and comfortable for human to read), and javascript for interaction(like drop-down menu, animation, etc).

||What tool to edit a webpage?

What tool can be used to edit a webpage? There are bunch of choices. Fundamentally, you can use text editor to do that if you want.

There are powerful software also, like Dreamweaver. Dreamweaver is member of the Adobe family, so friendly with other Adobe softwares.

The editor I am using is Atom. Atom is an open sourced one and lite one. You can hack it if you like. Change the outlook, or add some functions.

||How should I start to make a webpage?

There are a lot to ways to get started. Books, online tutorials and friends who know much about this. For Internet related themes, I always think book is not a good choice. Everything changes so fast. You still believe in a paper book?
So I chose online tutorials and friend who knows much about this.
The website I used is W3school. It explains rules, like:

With the codes above, we have a webpage now. Save it as a .html file and open it with a browser, then here you go:

However, website like that is like a dictionary. It explains rules, but if you do not know what you want, and read it from the first page, it is meaningless...
Lucky to me, I have a friend who introduces me some popular libraries that I can find elements and use in my webpage:


1. Bootstrap
Well as it says on its frontpage. It is the most popular framework. You want a navigation bar and no idea how to generate that? Check the library, and ctrl+C the lines, and ctrl+V in your editor, then that is it!




2. Fontawesome
Fontawesome is prepared for icon fans. You can find a lot of icons here.
Again, ctrl+C, ctrl+V and done!


||Lego Style Website building

Millions thank to my friend, Alex, I found and really felt that building a website is like building a Lego project. I do not need a book or a complete tutorial to teach me everything about html. Instead, I can start from what I want and get support from Internet.
      Identify what I want
      (an navigation bar)

    --> searching
      (bootstrap)

    --> study and try
      (put it into editor and modify some parameters)

    --> get what I want
    
And of course, with a friend(community) that can give you suggestion, all things will be smoother.

|| Upload it to the server

I am using SourceTree to move my codes to the server. SourceTree is a free git & mercurial client. To use it, first you need to build a repository.

The first step, you are required to enter the login information of your Github account. when connected, you can find the new repository.


double click into it, then you can see the whole workspace.


Some functions of SourceTree are very important for daily maintenance.


PULL - get all data from your remote repository to your local folder. Every time, before you push something out, you need to pull first.


SUBMIT - activate all changes you have made after last update, and then click SUBMIT button to add comment to this version.


PUSH - after SUBMIT, push all content to your remote repository. when finished, you can find the latest content on your website.

OK, thanks for your reading and if you are interested in website building but 0 experience, why not try right now?


Right click and check the code of this page!