1. work through a git tutorial
2. build a personal site in the class archive describing you and your final project
To build my personal website, here's what I need to do:
1. install Atom, Sublime Text, and GIT on my computer
2. start learning to operate my computer through its command-line interface
3. start learning GIT, and HTML
Here are some lecture notes from this week, written using Neil's lecture outline and recording.
I installed the following softwares on my computer:
1. text editor: Atom; Sublime Text
2. version control system: GIT
I started learning to operate my computer through its command-line interface. Here are the commands I used (and learnt) so far:
1. cd: to change directory (or folder)
2. ls: to list files in a directory; ls -la: to list ALL (including hidden) files in a directory
3. rm: to remove (delete) a file or files
4. mkdir: to make (create) a new directory
learning underway ...
I started learning GIT in a haphazard manner and, lo and bohold, it got very confusing very quickly. I looked up the suggested GIT tutorial with the intention to follow it from start to finish, but the initial bit of the tutorial was confusing me. Finally, I decided to listen to Fiore's first recitation, and do things exactly the way he did during the lecture. This was quite helpful. I could follow him easily for the first 20-25 minutes, but after that it got confusing for me. Anyway, so far, I learnt the following GIT commands:
1. $ git
2. $ git config --global user.name "Sawhney,Ashish"
3. $ git config --global user.email "ashishsawhney9211982@gmail.com"
4. $ git init
5. $ cd .git
6. $ vi TextFile.txt
7. $ git status
8. $ git add; $ git add --all
9. $ git commit -m "commit message"
10. $ vi .gitignore with creditcard.txt
11. $ git add .gitignore
12. $ git commit -m 'added ignore list'
13. $ git diff
14. $ git checkout --TextFile.txt
15. $ git rm
16. $ git mv
17. $ git log
18. $ git push
19. $ git pull
I am still not clear about the following: $ git commit --amend; $ git clone
learning underway ...
Here are the HTML tags and attributes I learnt so far:
tags:
1. !DOCTYPE html: always begin every page with this declaration; it tells the browser that the page is written in HTML5
2. html: this is the root tag in any HTML page; it defines the whole document
3. head: this tag goes between html and body opening tags; it contains metadata (a set of data that describes and gives information about other data) about the HTML document; metadata is never displayed; the title tag is an example of such metadata
4. title: this is a meta information tag nested within the head tag; it specifies a title for the page - one that will be displayed in a web browser's tab
5. body: this tag contains the page's contents, that are visible
6. h1 - h6: these tags specify headings and sub-headings in HTML documents
7. p: this tag defines a paragraph
8. a: this tag specifies HTML links (to other pages of your website; to other websites; to other documents); the link's destination is specified in the href attribute
9. img: this tag is used to add images to webpages; source of the image, alternative text (in case the image is not found at its source), width, and height are specified as src, alt, width, and height attributes respectively
10. hr: adds a horizontal rule
11. br: is an empty HTML tag, and specifies a line break
12. b: makes enclosed text bold
13. i: italicizes enclosed text
14. u: underlines enclosed text
attributes:
attributes have the following format: name="value"
15. href: helps to link webpages not in the same folder, pages in the same folder, documents in the same folder
16. style: helps to embellish an element, and has the following format: style="property:value;"; e.g. background-color; (text) color; text-align; font-family; font-size; image width^; image height^
17. title: nested inside a heading, or a paragraph tag, it acts as an attribute, and its value shows up as a tooltip when the cursor hovers over the information with which it is used, otherwise, its value is hidden
18. src: used to specify source of an image
19. alt: used within an image tag, it is used to specify alternative text, in case, the image is not found at its source
20. width: used to specify width of an image^
21. height: used to specify height of an image^
^There are 2 ways in which image width and image height can be specified, (a) as properties within the style attribute, and (b) as attributes themselves.
learning underway ...
After a lot of trial-and-error with commands of the command-line interface, GIT commands, and HTML tags, my website is finally up. I wrote it bottom-up, and there's a lot of room for improvement, and so, it's a work in progress ...