-
Notifications
You must be signed in to change notification settings - Fork 0
/
howtostart.html
73 lines (63 loc) · 4.16 KB
/
howtostart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html lang="en">
<meta charset="UTF-8">
<title>Coding for Refugees Women</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link href='https://fonts.googleapis.com/css?family=Lato:300italic,300,700,400,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<nav class="navbar navbar-default">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse content-navbar" id="bs-example-navbar-collapse-1">
<a class="translation-button" href="indexarabic.html">عربي</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="howtostart.html">Learn to code now</a></li>
<li><a href="resources.html">Resources</a></li>
<li><a href="about.html">About</a></li>
<li><a href="joinus.html">Join us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron vertical-center">
<div class="container">
<h1 class="text-center main-title">Coding <span class="italic-header">for</span> Refugee Women</h1>
</div>
</div>
<div class="container-fluid" id="tutorial">
<p>
This is an introductory tutorial to show you some of the things you can do with coding.
<ol>
<li><span>Right click and click on "Inspect Element".
This shows the webpage inspector. On the left you see all elements this webpage consists of. On the right you see the styling of this webpage. </span></li>
<img class="img-tutorial" src="img/tutorial1.png">
<li><span>Click on the small arrow in front of < body >...< /body >.
This will show all elements of the webpage that belong to the body. If you hover over the lines you see which line corresponds to which area on the webpage. </span></li>
<img class="img-tutorial" src="img/tutorial2.png">
<li><span>Click on the class="jumbotron vertical-center".
We are going to change the background of this part of the webpage. </span></li>
<img class="img-tutorial" src="img/tutorial3.png">
<li><span>On the right side, scroll to the part that starts with .jumbotron { and click on the purple block next to background-color.
You should see a colour panel in which you can select a new colour. Go ahead, change the backbround colour to any colour you like! Make sure to scroll to the top of the page to see your changes. Now let's change something else!</span></li>
<img class="img-tutorial" src="img/tutorial4.png">
<li><span>Click on the arrow in front of class="container" and select the class="text-center"</span></li>
<img class="img-tutorial" src="img/tutorial5.png">
<li><span>On the right side, scroll to the part that starts with .jumbotron h1 { and has a part that says "color:inherit"
Change to word <b>inherit</b> to a colour name, for example blue. Scroll up again to see the change you made. </span></li>
<img class="img-tutorial" src="img/tutorial6.png">
<span>The last change we are going to make is changing the font. For this change we need to add a line of code.</span>
<li><span>Click next to the line that says "color:inherit". This should create a new line where you can type underneath.</span></li>
<img class="img-tutorial" src="img/tutorial7.png">
<li><span>Type the word "font-family", then press ENTER and type the word "times".
This changes the font to the font type "times". Just like with the colour, you can change the font to any font you want. </span></li>
<img class="img-tutorial" src="img/tutorial8.png">
</ol>
You have now finished the introduction tutorial, well done! If you enjoyed it, and would like to learn more about coding click <a href="resources.html">here</a>.
</p>
</div>
<footer class="text-center vertical-center">
<h4>This is a #empowerhack hackathon project, with lots of ❤ by @rklappleyard | @xoxomerel | @ninaregli </h4>
</footer>
</body>
</html>