Why Website ?
If you have all the documentations of your work and your projects, and you want to share it with everyone, you have 2 options; first you can copy your files on a flash disk and distribute it to everyone on the planet. Lame, right? Thanks to the internet you can share anything with anyone from your home. A website is a bunch of documents (text, images, sounds, etc) formatted in a special way to be "browse-able". Then you have to find a place where you can save your files and to be acessable for everyone, that's what we call "Hosting Service". Finally, you choose a name for your website, like google.com, and that's what we call "Domain Name".
HTML, CSS, JS, Abracadabra!
In web development, you have a varitey of tools and platforms to use when building your website. But let's take it from the beginning, HTML (Hyper Text Markup Language) is not a programming language, we use HTML to format your website so your browser can display it. CSS (Casscading Styling Sheets) is also not a programming language, we use CSS to define styles (colors, fonts, size, etc). JavaScript is a programming language (finally!), we use JavaScript to add functionalities to your websites like forms, buttons, motion, etc. So basically to create a website you can start with HTML to create the basic elements for your website like Titles and images, then you can create your own styles using CSS to add the artistic touch to your website, finally you can use JavaScript to add action!.
Getting the right tools.
To start with the actual development, you have to get your tools ready. First of all, you have to create a directory for your website that will contain all the files used in the website especially media files. If you use a free online template, you can start by editting the index file, or you can create your own index file. What's the index file? index.html is common terminology used to help the server recognize the first page to lanuch your website from.
When you got your working directory, you should start installing any software you will use. For me i like the old-shcool geeky way, and I use Sublime text editor to write everything.
Building the website
I started by creating my working directory and created a sub-folder for every class of documents.
Then I have created my index.html file and added the basic header, navigation menu, and a brief about me. I have used basic HTML elements that you can easily use.
Now, it's time for design. I have created the CSS files that cntains different styles for different elements. Each style has must be named after one or more of the elements that you use in HTML, then after adding font styles, colors, and artistic effects, save the file and don't forget to link the files with your HTML files (usually in the head section)
When you are satisfied with your styles, now it's time to add more pages. I used the same style, so I have just copied the index file, and changed it's name. I recommend you to use sublime as it allow you to open an entire folder and edit all the files in an easy way. Finally I have edited each page and edited some content.
Using git
If you got this far, then I believe that you became familiar of the development process and you can continue adding more pages and more content. But the question now how to publish what we have done? For this webiste, Fab Academy has it's own servers and (as a student) I have a small portion for my website. For you, you can search for free hosting services (but I don't recommend that), or use any paid hosting service like GoDaddy. The problem is that we're constantly editting our websites and I'd like to be able to get back to one of my previous version of the website if I need to. So we use something called "Version Control System", as you can infer from its name, this system can save different checkpoints of your work and you can get back to any of these checkpoints anytime. Git is one of these systems (and the best!), and you can use GitHub to host all of your checkpoints (versions).
Luckily, Fab Academy started using Git this year, and all I had to do is to sign in
Then you get to the directory where you have saved these files, and open the .pub file (public key) copy the whole file and get back to GitLab. From profile settings you can add new ssh key, paste the content of the file and type a title (usually generated automatically) then click "Add Key".
Now you have created an encrypted communication channel between your local machine and Git Server. You can use git via the command prompt or using any graphical software. For beginners, I recommend using SmartGit. When you run your software you'll find the following interface.
Then click "Clone" to get a version of the global on-cloud repository t your local machine. You can get the repo url from GitLab, you should use ssh to get read/write priviliges.
You should find all the doucments downloade in the local directory where you have cloned the repository. If everything okay, you can move your website to the local directory of the repo and start editting and playing around.
Everytime when you want to save a checkpoint, you have to "pull" the latest version of the files from the repo. Add all your files and edits by clicking "stage" and select all.Then click "commit" to save the current state of your files as a new version. Finally, click "push" to sync with the on-cloud repo. The whole process should take no more than 5 minutes.
Useful Links.
Here is a puch of websites that can help you developing your website.