You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Slack is an application that allows us to communicate with others through (video) chat. It's used in most tech companies and is really easy to use. In order for you to get familiar we're going to use it as well!
17
19
18
20
Please download the app for on your desktop:
@@ -26,7 +28,11 @@ And if you really can't go without your phone, you can also get it for mobile:
Technically speaking, you can write code for the web in any application that allows you to write and save plain text files (such as Notepad or TextEdit). However a code editor is a tool specifically designed for editing code.
43
51
44
-
Depending on to the the programming language, the code editor highlights special keywords, give suggestions for some extent, adds automatic indentation and sometimes has an integrated command line interface (more on that in the next section) as well.
52
+
Depending on the programming language, the code editor highlights special keywords, give suggestions for some extent, adds automatic indentation and sometimes has an integrated command line interface (more on that in the next section) as well.
45
53
46
-
While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as programmers easier. In the following video you'll learn about the most useful code editor extensions you can install in order to make development a much richer experience:
54
+
While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as developers easier. In the following video you'll learn about the most useful code editor extensions you can install in order to make development a much richer experience:
47
55
48
-
Currently, Visual Studio Code is one of the top code editors on the market. As such, we have chosen it has our default code editor to use. We highly recommend you to use it as well:
56
+
Currently, Visual Studio Code is one of the top code editors on the market. As such, we have chosen it has our default code editor to use. Click the following link to download it:
49
57
50
58
-[Visual Studio Code](https://code.visualstudio.com/)
51
59
60
+
#### Improving our code editor
61
+
52
62
We can always improve what we have, including our code editor! We can add `plugins` to make our programming life much easier. Please install the following plugins as well and see for yourself!
53
63
54
64
-[Live HTML Previewer](https://marketplace.visualstudio.com/items?itemName=hdg.live-html-previewer)
@@ -63,6 +73,9 @@ For more specific information on how to setup your editor:
63
73
64
74
### What's the way to submit my homework? Use planning tool Trello
Trello is a planning tool that allows you to make todo lists in order to organize and prioritize your projects. In HackYourFuture we'll use it to submit your homework for the first module.
67
80
68
81
-[Register](https://trello.com/signup) for an account
@@ -71,6 +84,8 @@ Trello is a planning tool that allows you to make todo lists in order to organiz
71
84
72
85
### How do I put my code online? On software development platform GitHub
GitHub is a place where you can put your code online. Why? To safely store your code in case something bad happens to your computer (computer crash, virus, faulty files). You'll always be able to access this code from GitHub, using any other computer.
75
90
76
91
-[Register](https://github.com/join) for an account
@@ -81,7 +96,8 @@ GitHub is a place where you can put your code online. Why? To safely store your
81
96
Let's make sure you have done everything necessary:
82
97
83
98
- Slack: downloaded, added profile and said hi
84
-
- Trello: registered and added a card with the CodePen URL in of your technical assignment
99
+
- Visual Studio Code: downloaded, added plugins
100
+
- Trello: registered and added a card, including the CodePen URL of your technical assignment
85
101
- Github: registered and put the URL of your account in the class channel
86
102
87
103
> If the answer to this is 'no', don't panic. First try and see if you can find some information about the above tools yourself (hint: ask Google first). If that doesn't work, don't be shy to ask your classmates or anyone from HackYourFuture on what to do next.
|`echo “something” > file`| Redirect the output of echo and create file|
39
+
|`echo “another thing” >> file`| Append the string to the file|
40
+
|`mkdir`| make a new directory|
41
+
|`cd ~`| home|
42
+
|`cd -`| previous directory|
43
+
|`cd ..`| parent directory|
44
+
|`ls -a`| List all files including hidden files|
45
+
|`cd /`| change to the root directory|
46
+
|`cat`| Concatenate the file line by line and display it on the terminal|
47
+
|`less`| Print the big file line by line|
48
+
|`vim <file>`| open the editor with <file> {`a:` to go to the insert mode, <ESC>`:wq` to write and quit } |
49
+
|`for var in {START..END}; do <COMMAND1>; <COMMAND2>;..; ; done`||
50
+
|`head <file>`| display the first 10 lines of file|
51
+
|`tail <file>`| display the last 10 lines of file|
52
+
|`head -n <file>`| display first n lines of file|
53
+
|`tail -n <file>`| display last n lines of file|
54
+
|`man <COMMAND>`| Display manual of the COMMAND|
55
55
56
56
### Excercise
57
+
57
58
- Open a command line (Git Bash on Windows)
58
59
- Create a project folder to contain all your HYF work (mkdir)
59
60
- Create a module folder (cd, mkdir)
60
61
- Create a text file: notes.txt (cd, touch)
61
62
- Open Visual Studio Code and add some notes (code .)
62
63
- Rename the file to lecture1.txt (mv)
63
64
64
-
65
65
_"I go on holiday and I take with me"_ with CLI commands:
66
66
67
67
- They have to repeat the commands said before them.
@@ -70,35 +70,44 @@ _"I go on holiday and I take with me"_ with CLI commands:
70
70
71
71
E.g., first student says _"ls : lists commands"_. Second student must say _"ls and cd: change directory"_. Then third student must say _"ls, cd and pwd : show print working directory"_ and so on.
Copy file name to clipboardExpand all lines: Week1/README.md
+13-9Lines changed: 13 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -17,26 +17,27 @@ These are the topics for week 1:
17
17
18
18
## 1. What is the command line interface (CLI)?
19
19
20
-
The Command Line interface (also known as CLI or shell) is a way to navigate through your computer's content (media, folders, applications, etc.) without a visual user interface. It allows you to type text commands to perform specific tasks. Since you can directly control the computer by typing, many tasks can be performed more quickly, and some tasks can be automated with special commands that loop through and perform the same action on many files.
20
+
The `Command Line interface` (also known as CLI or shell) is a way to navigate through your computer's content (media, folders, applications, etc.) without a visual user interface. It allows you to type text commands to perform specific tasks. Since you can directly control the computer by typing, many tasks can be performed more quickly, and some tasks can be automated with special commands that loop through and perform the same action on many files.
21
21
22
-
As a beginning programmer it's important to get familiar with it, as it will teach you how computers work: As a tool that you give instructions to. This is not any different from programming for web development; but instead of writing instructions to the computer directly, you write instructions for browsers to execute.
22
+
As a beginning developer it's important to get familiar with it, as it will teach you how computers work: as tools that you give instructions to. This is not any different from programming for web development; but instead of writing instructions to the computer directly, you write instructions for browsers to execute.
23
23
24
-
Please install [Git for Windows](https://gitforwindows.org) which comes with
25
-
an application called *Git BASH* which simulates frequently used CLI commands.
24
+
Please install [Git for Windows](https://gitforwindows.org) which comes with an application called _Git BASH_ which simulates frequently used CLI commands.
26
25
27
26
For more information, check the following resources and code along:
28
27
29
-
-[Command Line Crash Course](https://www.youtube.com/watch?v=yz7nYlnXLfE)
28
+
-[Understanding the Command Line for Beginners](https://learntocodewith.me/getting-started/topics/command-line/)
30
29
-[A Command Line Primer for Beginners](https://lifehacker.com/a-command-line-primer-for-beginners-5633909)
30
+
-[Command Line Crash Course](https://www.youtube.com/watch?v=yz7nYlnXLfE)
31
31
32
32
## 2. Introduction to HTML
33
33
34
34
### Crash course
35
35
36
36
HTML is the foundation of web development. It is an acronym for **HyperText Markup Language**. It is used to structure content on a webpage. What do we mean by content? Plain text, images, videos, links to other websites, etc. The structure gives content meaning by defining that content as, for example, headings, paragraphs, or images.
37
37
38
-
In order to learn HTML properly it's important to know what is is. Go through the following video to learn more about it:
38
+
In order to learn HTML properly it's important to know what is is. Go through the following resources to learn more about it:
39
39
40
+
-[HTML5 Basics - History of HTML](https://www.youtube.com/watch?v=NzzGt7EmXVw)
@@ -55,7 +56,10 @@ Semantic HTML are HTML tags that introduce meaning to the web page rather than j
55
56
56
57
This leads to the following insight about writing code: while code is written to produce working software, it should also be written so **other developers can easily read and understand it**. You'll learn more about that later.
57
58
58
-
Take a look at the following resource to learn more about semantic HTML: [Semantic HTML](https://internetingishard.com/html-and-css/semantic-html/)
59
+
Take a look at the following resources to learn more about semantic HTML:
-[HTML5 as Fast as Possible](https://www.youtube.com/watch?v=IsXEVQRaTX8)
59
63
60
64
## 3. Introduction to CSS
61
65
@@ -72,8 +76,8 @@ Go through the following video to get a firmer foundation:
72
76
There are 3 basic ways to write CSS:
73
77
74
78
- In an external stylesheet: a `.css` file, that is linked to a `.html` file.
75
-
- In the <head> of a `.html` file. This is done using the `<style>` tag.
76
-
- As part of the attribute `style` inside any HTML tag.
79
+
- In the <head> of a `.html` file. This is done using the `<style>` tag. This is called an `internal stylesheet`
80
+
- As part of the attribute `style` inside any HTML tag. This is called `inline styling`
77
81
78
82
In practice, you'll always write your CSS in separate `.css` files. This is because you want to make sure **every file has a single purpose**: an HTML file should only contain the content and structure of a page, while a stylesheet should only contain styling rules that apply to a page.
0 commit comments