-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1363 lines (833 loc) · 70.8 KB
/
index.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Liliana Kastilio</title>
<meta name="author" content="Liliana Kastilio">
<meta name="description" content="Git: Rewriting History Aug 26th, 2018 7:24 pm Git internals When you run git init in a new or existing directory, Git creates the .git directory, …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://lili2311.github.io/">
<link href="/images/favicon.png" rel="icon">
<link href="/stylesheets/styles.css" media="screen, projection" rel="stylesheet" type="text/css">
<link href="/atom.xml" rel="alternate" title="Liliana Kastilio" type="application/atom+xml">
<!-- <script src="/javascripts/octopress.js" type="text/javascript"></script>
-->
</head>
<body >
<header role="banner" class="header"><div class="header__wrapper">
<a href="/">
<div class="header__title-wrapper">
<h1 class="header__title">Liliana</h1>
</div>
<div class="header__title-wrapper">
<h1 class="header__title">Kastilio</h1>
</div>
</a>
<h2 class="header__subtitle">Coding Tutorials & Blog</h2>
<nav role="navigation" class="navigation">
<ul class="navigation__list">
<li class="navigation__item">
<a class="navigation__link" href="/">Blog</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="/blog/archives">Archives</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="/blog/about">About</a>
</li>
<li class="navigation__item navigation__rss" data-subscription="rss">
<a class="navigation__link" href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="main" class="container">
<div id="content">
<div class="blog-index">
<article>
<header>
<h1 class="article__title"><a href="/blog/2018/08/26/git-rewriting-history/" class="h1">Git: Rewriting History</a></h1>
<p class="meta">
<time class='entry-date' datetime='2018-08-26T19:24:12+01:00'><span class='date'><span class='date-month'>Aug</span> <span class='date-day'>26</span><span class='date-suffix'>th</span>, <span class='date-year'>2018</span></span> <span class='time'>7:24 pm</span></time>
</p>
</header>
<div class="article__content"><h1>Git internals</h1>
<p>When you run <code>git init</code> in a new or existing directory, Git creates the <code>.git</code> directory, which is where most of the things that Git stores and manipulates are located. This is what you will see in the folder by default:</p>
<ul>
<li><code>HEAD</code></li>
<li><code>config*</code></li>
<li><code>description</code></li>
<li><code>hooks/</code></li>
<li><code>info/</code></li>
<li><code>objects/</code></li>
<li><code>refs/</code></li>
</ul>
<p>Git uses a simple key-value data store. Git stores all the content as Tree or Blob objects.
Trees can be thought of as directories and blobs are bits of content. The following object types exist in Git:</p>
<ol>
<li><code>commit</code></li>
<li><code>tree</code></li>
<li><code>blob</code></li>
<li><code>annotated tag</code></li>
</ol>
<p>In order to understand undoing things in Git let’s take a deeper look into <code>refs</code> and <code>HEAD</code>.</p>
<h1>Refs</h1>
<p>A ref is an indirect way of referencing to a commit. You can think of it as a user-friendly alias for a commit hash. This is Git’s internal mechanism of representing branches and tags. You can also refer to the commits directly using their SHA-1 hash, you can view this information by running git log</p>
<h1>HEAD</h1>
<p>When you create a new branch, git uses the last commit of the current branch as reference for the new branch and all new commits will be applied on top. But how does git know what the latest commit is? Git uses the HEAD file to store this information. The HEAD file is a symbolic reference to the branch you’re currently on. By symbolic reference, we mean that unlike a normal reference, it doesn’t generally contain a SHA-1 value but rather a pointer to another reference.
When committing new changes, git creates a commit object and sets that parent of this commit to be the SHA-1 value of whatever the reference points to in the HEAD file.</p>
<h1>Turning back time</h1>
<h2>git reset</h2>
<h3>“Crap, I forgot to branch!”</h3>
<p>When you have accidentally committed changes to master instead of a branch you can use:</p>
<ul>
<li><code>git reset --soft HEAD^</code></li>
</ul>
<p>All your changes will be unstaged but still there, you can now make a new branch and commit your changes there instead.</p>
<h3>Crap, I want to undo the last 3 commits?</h3>
<ul>
<li><code>git reset HEAD^3</code></li>
</ul>
<p>All your changes will be unstaged but still there, you can now make a new branch and commit your changes there instead.</p>
<h2>“Crap, I deleted or changed a file accidentally?”</h2>
<ul>
<li><code>git reset path/to/filename</code></li>
</ul>
<h2>git checkout</h2>
<h3>“I want to undo the changes to a file”</h3>
<p>Git will restore the file to latest version on HEAD, this is the exact opposite of git add. This will get the difference in hunks of file and reset them all. The changes in the file will still be preserved tho, but not marked for a commit.</p>
<ul>
<li><code>git checkout path/to/filename</code></li>
</ul>
<p>This will drop your changes completely and restore the file to the latest version.</p>
<h1>Rewriting History</h1>
<h2>git amend (rewriting history)</h2>
<h3>“Oops, didn’t mean to commit just yet!”</h3>
<ul>
<li><code>git commit --amend</code></li>
</ul>
<p>Premature commits happen, sometimes you forgot to add a file to a commit or made a typo in the commit message. Git allows you to amend your previous commit:
If you want to just amend the commit message running command below will let you edit the last commit message.</p>
<ul>
<li><code>git commit --amend</code></li>
</ul>
<p>If you want to just add a new file that you forgot to include:</p>
<ol>
<li><code>git add filename</code></li>
<li><code>git commit --amend --no-edit</code></li>
</ol>
<p>This will add the missing file to the last commit. If you want to amend the commit message at the same time simply don’t provide the <code>--no-edit</code> option.</p>
<h2>git revert</h2>
<h3>“Ah ha! Found what introduced this bug, now to undo this change.”</h3>
<ul>
<li><code>git revert commit-hash</code></li>
</ul>
<p>Git revert can help you undo a specific commit that may be no longer needed, it doesn’t actually remove the commit from history but instead figures out how to undo the commit by creating a new commit. This is useful for tracking down and fixing bugs by undoing the commit where the bug was introduced. But also because it doesn’t amend history this is a ‘safe’ way to undo things once the changes are published to a shared repo.</p>
<p>If you get the hang of these few commands you are virtually invincible in Git. There is nothing to worry about with mistakes as most things are fixable. However when re-writing history be careful and make sure this is what you want to do.</p>
<p>🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on <a href="https://twitter.com/lilianakastilio">Twitter</a> and checking out my code school for some <a href="http://cubcats.teachable.com/courses/">hands on guided coding practice.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2018/08/26/npm-install-distater-waiting-to-happen/" class="h1">Security: Using Open Source Packages</a></h1>
<p class="meta">
<time class='entry-date' datetime='2018-08-26T18:51:22+01:00'><span class='date'><span class='date-month'>Aug</span> <span class='date-day'>26</span><span class='date-suffix'>th</span>, <span class='date-year'>2018</span></span> <span class='time'>6:51 pm</span></time>
</p>
</header>
<div class="article__content"><h1>pip install distater-waiting-to-happen</h1>
<p>Open source packages make our life as developers easier, but with every new dependency you may be getting more than you bargained for. With large data breaches becoming regular occurrences it is time we start taking application security seriously and making part of our day to day lives.</p>
<p>With recent increase of data breaches, it is now more important than ever to really start paying attention to application security. As we introduce more and more open source dependencies into our code bases, performance is no longer the only concern. With every new dependency we are potentially bringing in new vulnerabilities that attackers are waiting to exploit. Even smart, well-intentioned and experienced developers can introduce vulnerable packages. How do you know that the open source package you just added in is not going to cause your customers data ending up for sale on the dark market?</p>
<p>Let’s take a look at some of the recent vulnerabilities in the popular Django packages, understand what they are and how they could be exploited.</p>
<p><img src="https://pbs.twimg.com/media/DhbiI1NXUAA7MJM.jpg"></img></p>
<h2>The talk & slides are up on Skillsmatter website</h2>
<p><a href="https://skillsmatter.com/skillscasts/12225-pip-install-disaster-waiting-to-happen">Watch the talk now.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2018/08/26/the-secret-to-learning-to-code/" class="h1">The Secret to Learning to Code</a></h1>
<p class="meta">
<time class='entry-date' datetime='2018-08-26T18:45:32+01:00'><span class='date'><span class='date-month'>Aug</span> <span class='date-day'>26</span><span class='date-suffix'>th</span>, <span class='date-year'>2018</span></span> <span class='time'>6:45 pm</span></time>
</p>
</header>
<div class="article__content"><p>Learning from articles, courses and examples is a great way to start getting the skills you need to get a job as an engineer. Learning is hard. I used to often find myself super motivated and excited after a attending a workshop or a meetup but then can’t remember a single thing I learned only a week later. The same thing happens to me if I read an article on a train on how to do a super exciting thing with CSS or something new and interesting about JavaScript but the excitement is gone once I realise I don’t know where to start or how to apply what I have just learned. It can be demotivating. But we can make it less so with some simple tips and of course a secret ingredient to learning to code.</p>
<h2>What is the secret ingredient?</h2>
<p>If you wish to get the most out of your learning, there is one essential requirement, it’s more important than any other technique or suggestion. Unless you ensure to fulfil this requirement no suggestions or millions of tips will be successful in helping you to get value out of any course/workshop/article. What is this requirement, you say? A deep desire to learn, then improve and ultimately master the basics of web development. It must be a burning desire that fuels you, that keeps you going when you are having a lazy day or simply feel like giving up. But how do I get such a desire you might wonder? Constantly remind yourself self why you learning to code in the first place. Are you after a better paying job to increase your income and quality of life? Is web development a secret passion that was on hold and now you hope to take a full dive in and see how far you can take this? Think of different ways how having this new skill will improve your life, use this to fuel your determination and make the most of the course/workshop/article available to you.</p>
<h2>Don’t skip the exercises</h2>
<p>Many skills are learned by doing and in many course/articles there are exercises. Let’s talk about deliberate practice: just practicing for the sake of practicing is simply not enough, in order to truly understand what you are trying to achieve and how you will go about it you must deliberately think about every step you are taking in the exercises. Even if you have done this exercise before, do it again! The second time make sure you understand every step and every decision. The end goal is not to complete the exercise but to gain wisdom.</p>
<h2>Question everything</h2>
<p>Are you unfamiliar with a term you just read in some article? Look it up! Are you following a tutorial and find that you did not understand one of the steps you just did? Go back to it and re-read it again and again until you gain more clarity. It is only once you gain true understanding of all the steps you took to do something that you can rest assured you got lot’s of value from reading the article/tutorial/course.</p>
<h2>Take notes</h2>
<p>If you see something that makes you go “oh that would be good to read more about”, “that would be handy for the other things I am doing”. Ask yourself as you read, where else could I apply this?</p>
<h2>Re-read</h2>
<p>Re-read the articles again and again. Skimming the material will not give you any lasting benefit. The speed with which humans forget things is astonishing. To truly cement the ideas, techniques and advice in any article - re-read it. Remember that the only way to get good at something is to develop good habits and understanding in that area.</p>
<p>Remember that learning is a process. You cannot simply become a web developer by rushing through a course or reading a bunch of articles. Take every opportunity available to you to use the skills you have learned. This process will take time, it is a living thing that will grow and get better. But this is only possible if you actively participate in the process.</p>
<p>Stay curious, don’t give up and be patient.</p>
<p>🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on <a href="https://twitter.com/lilianakastilio">Twitter</a> and checking out my code school for some <a href="http://cubcats.teachable.com/courses/">hands on guided coding practice.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2017/01/25/frontend-vs-backend/" class="h1">Frontend vs Backend</a></h1>
<p class="meta">
<time class='entry-date' datetime='2017-01-25T12:05:04+00:00'><span class='date'><span class='date-month'>Jan</span> <span class='date-day'>25</span><span class='date-suffix'>th</span>, <span class='date-year'>2017</span></span> <span class='time'>12:05 pm</span></time>
</p>
</header>
<div class="article__content"><p>When starting to learn about Web Development, I remember struggling to understand the difference between Frontend and Backend, in order to try and understand this lets first define what is a website?
A simple website is typically a collection of HTML documents with CSS styling applied, linked using Hyperlinks (JavaScript may also be present for user interactions and animations). Both HTML and CSS are natively understood and interpreted by the browsers and so is JavaScript. Meaning that the 3 technologies together are the building blocks of any website. These 3 technologies are the typical makeup of the websites front-end. A front end is what the user sees when visiting a website. It is the visual part you can interact with.</p>
<h2>Backend vs Frontend</h2>
<p>Any website can also have a backend - aka some service that lives on a server capable of communicating with the front end of the website to send it data. For example the front end may be requesting user data from a database to populate a user profile page. Front end only websites do not have a backend and do not usually have a database so are considered static. A static website means that the pages are always the same and the pages do not display differently depending on who you are, for example different users see different data in their profile page that is relevant to them. Backends are usually created for larger websites that need to handle user signups, user profiles, user messaging, payments and other useful actions. Static websites are more of a business card and simply provide information Every website has a front-end and some also have a backend.</p>
<p>Some reading materials to learn more about websites and the basics of the web technologies like <a href="HTTP:">HTTP:</a></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works?__s=gpt5uamtugwbh776shzn">How the Web works</a></li>
<li><a href="https://dev.opera.com/articles/http-basic-introduction/?__s=gpt5uamtugwbh776shzn">HTTP Basic Introduction</a></li>
<li><a href="http://blog.teamtreehouse.com/i-dont-speak-your-language-frontend-vs-backend?__s=gpt5uamtugwbh776shzn">Frontend vs Backend</a></li>
<li><a href="http://blog.digitaltutors.com/whats-difference-front-end-back-end/?__s=gpt5uamtugwbh776shzn">Whats the difference between frontend and backend?</a></li>
</ul>
<p>🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on <a href="https://twitter.com/lilianakastilio">Twitter</a> and checking out my code school for some <a href="http://cubcats.teachable.com/courses/">hands on guided coding practice.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2016/10/30/stop-wasting-time-logging-into-github-on-command-line-every-time-you-push-just-set-up-ssh-keys/" class="h1">Stop Wasting Time Logging Into GitHub on Command Line Every Time You Push: Just Set Up SSH Keys</a></h1>
<p class="meta">
<time class='entry-date' datetime='2016-10-30T23:54:37+00:00'><span class='date'><span class='date-month'>Oct</span> <span class='date-day'>30</span><span class='date-suffix'>th</span>, <span class='date-year'>2016</span></span> <span class='time'>11:54 pm</span></time>
</p>
</header>
<div class="article__content"><h2>1. Does GitHub always ask you for your password? There is a fix, read on :)</h2>
<p>If you recently started using Git & Github in your workflow it is likely you are sick and tired of constantly having to type in your username and password every single time you want to push some chnages! Well that ends today as in this blog post I will show you how to tell Github to trust your laptop and just let you get on with coding without any fuss of logging in all the time.</p>
<p>In order for this to work we will use something called SSH keys.</p>
<h2>2. What are SSH keys?</h2>
<p>SSH keys are a means of identifyng yourself to a server without having to type in your username and password every time. It can be though of as a passwordless login. Instead of a user name and password the a pair of keys is used that is exchanged between your laptop and the server. They keys live on your laptop and on the other side, this way every time you talk to that server it will realise that you are already knowkn to it and who you are.</p>
<h2>3. Do you already have SSH keys?</h2>
<p>Before we make a new key, lets check if you have lying around already.</p>
<h3>Windows</h3>
<p>In command promt type in:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">cd</span> %userprofile%/.ssh
</span></code></pre></td></tr></table></div></figure>
<p>Now lets see if there is a key in there:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>dir id_*
</span></code></pre></td></tr></table></div></figure>
<p>If you see and error something like “No such file or directory” then you don’t have a key and need to make one. Next section describes hwo to do this.</p>
<h3>Mac & Linux</h3>
<p>Open your preffered terminal and run the command below:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>ls -al ~/.ssh
</span></code></pre></td></tr></table></div></figure>
<p>This will list all the files currently present in the <code>~/.ssh</code> directory, which is a special directory where all keys are stored by default. The filenames to look out for are:</p>
<ol>
<li>id_rsa.pub</li>
<li>id_rsa</li>
<li>id_dsa.pub</li>
<li>id_ecdsa.pub</li>
<li>id_ed25519.pub</li>
</ol>
<p>Check the content of the file that looks similar to the example above by using the <code>cat</code> command:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>cat ~/.ssh/id_rsa.pub
</span></code></pre></td></tr></table></div></figure>
<p>There will be a whole lot ot stuff in that file including your email.</p>
<p>If you did not find anything in there, not to worry we will make a new SHH key!</p>
<h2>4. Generate a new SSH key.</h2>
<p>So if you found no keys form steps before then we should make one. Lets go back to the terminal and run the command that will generate us a new key:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>ssh-keygen -t rsa -C <span class="s2">"your-email@example.com"</span>
</span></code></pre></td></tr></table></div></figure>
<ol>
<li>Just press Enter when prompted for a filename</li>
<li>Create and enter a passphrase as requested.</li>
<li>Tada you now have a shiny new key ready to be used.</li>
</ol>
<p>Note that the ssh-keygen command is only available if you have already installed Git (for Windows that would be Git with Git Bash).</p>
<h2>5. Adding a new SSH key to your GitHub account.</h2>
<p>We now need to share the new key with Github in order to enjoy passwordless login when pushing code:</p>
<ol>
<li>Log in to your <a href="https://github.com/">GitHub account</a></li>
<li>Click on your profile photo (in the top right corner) → “Settings”</li>
<li>In the sidebar click on “SSH and GPG keys” → “New SSH Key”</li>
<li>Give it a title/name (perhaps this is the key for you work laptop)</li>
<li>You now need to copy and paste the entirety of the key into here. So all the text your saw with your email that was generated during the previous step all of that is a key. If you had a key already, simply open the file and copy paste the entire contents into here.</li>
<li>Save!</li>
</ol>
<h2>5. Try it out!</h2>
<p>You can now go back to your project and try pushing some code, you should no longer be prompted for the password and username every time.</p>
<p>🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on <a href="https://twitter.com/lilianakastilio">Twitter</a> and checking out my code school for some <a href="http://cubcats.teachable.com/courses/">hands on guided coding practice.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2016/03/05/frontend-automation-with-grunt/" class="h1">Frontend Automation With Grunt</a></h1>
<p class="meta">
<time class='entry-date' datetime='2016-03-05T00:00:00+00:00'><span class='date'><span class='date-month'>Mar</span> <span class='date-day'>5</span><span class='date-suffix'>th</span>, <span class='date-year'>2016</span></span> <span class='time'>12:00 am</span></time>
</p>
</header>
<div class="article__content"><h4>1. What is Grunt?</h4>
<p><a href="http:/gruntjs.com/">Grunt</a> is a JavaScript task runner. Grunt lets you automate tasks like HTML minification, copying files, compiling CSS, deploying to AWS etc.</p>
<h4>2. Download Node.js</h4>
<p>Grunt and Grunt plugins are installed and managed via <a href="https://npmjs.org/">npm</a> the <a href="https://nodejs.org/en/">Node.js package manager</a>.
First of all if you will need to download <a href="https://nodejs.org/en/download/">Node.js</a> (npm will be installed with it).</p>
<h4>3. Basic Command Line Commands</h4>
<p>If you have not used command line terminal before you here are some basic commands:</p>
<p><code>ls</code></p>
<p><strong>Description</strong>: Lists the names of the files in the working directory.
For more complete information use <code>ls –alF</code></p>
<p><code>cd directoryname</code></p>
<p><strong>Description</strong>: Changes the working directory to the one you named.</p>
<p><code>cd ..</code></p>
<p><strong>Description</strong>: Brings you up one directory level.</p>
<p><code>cd</code></p>
<p><strong>Description</strong>: Returns you to your home directory.</p>
<p><code>pwd</code></p>
<p><strong>Description</strong>: Displays the pathname of the current directory.</p>
<p><code>mkdir newdirectoryname</code></p>
<p><strong>Description</strong>: Makes a new directory</p>
<h4>4. Install Grunt</h4>
<ol>
<li>Open your preferred terminal or install <a href="https://www.iterm2.com/">iTerm</a>.</li>
<li>Install Grunt <strong>globally</strong>: instructions below will install grunt client globally on your machine, if you already have Grunt installed skip this step. For a more detailed explanation see the official <a href="http://gruntjs.com/getting-started">documentation</a>.</li>
<li>Install Grunt <strong>locally</strong>: Now we will install Grunt locally specifically for this project. Go to your project folder. Replace the path after <code>cd</code> with the path to your folder:</li>
</ol>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nb">cd </span>Documents/workshop/
</span></code></pre></td></tr></table></div></figure>
<p>In the terminal type out the below command to get to the project folder (if you have saved the workshop folder elsewhere adjust the path):<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>npm install grunt –save-dev
</span></code></pre></td></tr></table></div></figure></p>
<h4>5. Configure</h4>
<p>To configure the project, within your project folder type <code>npm init</code> in the terminal and follow the instructions:
<img src="http://www.lilianakastilio.co.uk/images/automation-with-grunt/npminit.png" alt="" /></p>
<h4>6. Grunt AWS Plugin</h4>
<p>We will now install Grunt AWS Plugin. Grunt uses different plugins to perform certain tasks, in order to deploy to Amazon S3 we will use the <a href="https://github.com/MathieuLoutre/grunt-aws-s3">grunt-aws-s3 plugin</a>.</p>
<p>In your project folder we can install this using the command below: <figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>npm install grunt-aws-s3 –save-dev
</span></code></pre></td></tr></table></div></figure></p>
<p>We now have the plugin installed and we can configure grunt to use this task to deploy our project without having to manually upload the files every time.</p>
<p>In order for us to use this plugin and deploy to S3 in the command line we need to create a file called <code>s3settings.json</code>, here we will keep all the login details and bucket information. <strong>This file MUST be kept secret, do not commit it to github or any other version control system. It should be excluded in <code>.gitignore</code>file if you are using git. It is important to take care as if these details are made public your account may be accessed and used by someone else, leaving you with a bill to pay</strong>:</p>
<p><img src="http://www.lilianakastilio.co.uk/images/automation-with-grunt/s3json.png" alt="" /></p>
<p>The <code>key</code> and <code>secret</code> are available in the user credentials file you downloaded when <a href="http://blog.lilianakastilio.co.uk/blog/2016/03/05/create-new-iam-users-and-permissions-in-aws/">creating an IAM user</a>. Bucket must be exactly what you called the bucket on Amazon S3 and the same for region.</p>
<p>The second file we need to create is <code>Gruntfile.js</code> this is a default file Grunt will look for locally within the project folder. Here is where we configure the tasks.</p>
<p>Using your text editor or command line, create a new file within the workshop folder called <code>Gruntfile.js</code>, the content of it should be the following:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">grunt</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'><span class="nx">grunt</span><span class="p">.</span><span class="nx">loadNpmTasks</span><span class="p">(</span><span class="s1">'grunt-aws-s3'</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
</span><span class='line'> <span class="nx">pkg</span><span class="o">:</span> <span class="nx">grunt</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">readJSON</span><span class="p">(</span><span class="s1">'package.json'</span><span class="p">),</span>
</span><span class='line'> <span class="nx">s3settings</span><span class="o">:</span> <span class="nx">grunt</span><span class="p">.</span><span class="nx">file</span><span class="p">.</span><span class="nx">readJSON</span><span class="p">(</span><span class="s1">'s3settings.json'</span><span class="p">),</span>
</span><span class='line'> <span class="nx">aws_s3</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">accessKeyId</span><span class="o">:</span> <span class="s1">'<%= s3settings.key %>'</span><span class="p">,</span>
</span><span class='line'> <span class="nx">secretAccessKey</span><span class="o">:</span> <span class="s1">'<%= s3settings.secret %>'</span><span class="p">,</span>
</span><span class='line'> <span class="nx">region</span><span class="o">:</span> <span class="s1">'<%= s3settings.region %>'</span><span class="p">,</span>
</span><span class='line'> <span class="nx">uploadConcurrency</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span>
</span><span class='line'> <span class="nx">downloadConcurrency</span><span class="o">:</span> <span class="mi">5</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="nx">live</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">bucket</span><span class="o">:</span> <span class="s1">'<%= s3settings.bucket %>'</span><span class="p">,</span>
</span><span class='line'> <span class="nx">differential</span><span class="o">:</span> <span class="kc">true</span> <span class="c1">//Only uploads the files that have changed</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="nx">files</span><span class="o">:</span> <span class="p">[</span>
</span><span class='line'> <span class="p">{</span><span class="nx">expand</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">cwd</span><span class="o">:</span> <span class="s1">'deploy/'</span><span class="p">,</span> <span class="nx">src</span><span class="o">:</span> <span class="p">[</span><span class="s1">'**'</span><span class="p">],</span> <span class="nx">dest</span><span class="o">:</span> <span class="s1">''</span><span class="p">},</span>
</span><span class='line'> <span class="p">]</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="p">});</span>
</span><span class='line'> <span class="nx">grunt</span><span class="p">.</span><span class="nx">registerTask</span><span class="p">(</span><span class="s1">'deploy'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'aws_s3:live'</span><span class="p">]);</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>
<p><a href="http://pastebin.com/m3cK4EcC">Full code to copy is here.</a></p>
<p>Here we have configured the plugin to upload to Amazon S3 all files in the folder deploy, so we would now have to create this folder within the project and copy any files we want uploaded.</p>
<p>We have also created a task called <code>deploy</code> which can be run in command line within the project folder to upload all files within deploy folder to Amazon S3, to the bucket specified in the <code>s3settings.json</code> file.</p>
<h4>7. Use Grunt to deploy to S3</h4>
<p>Go to the project folder in the terminal. You can now run the deploy command by typing: <figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>grunt deploy
</span></code></pre></td></tr></table></div></figure></p>
<p>And we are done!</p>
<p>🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on <a href="https://twitter.com/lilianakastilio">Twitter</a> and checking out my code school for some <a href="http://cubcats.teachable.com/courses/">hands on guided coding practice.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2016/03/05/create-new-iam-users-and-permissions-in-aws/" class="h1">Part 4: Create New IAM Users and Permissions in AWS</a></h1>
<p class="meta">
<time class='entry-date' datetime='2016-03-05T00:00:00+00:00'><span class='date'><span class='date-month'>Mar</span> <span class='date-day'>5</span><span class='date-suffix'>th</span>, <span class='date-year'>2016</span></span> <span class='time'>12:00 am</span></time>
</p>
</header>
<div class="article__content"><p>This is <strong>Part 4</strong> of a tutorial post <a href="http://blog.lilianakastilio.co.uk/blog/2015/12/03/create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/">Create a Simple Website in CSS/HTML and deploy to Amazon S3</a>.</p>
<p><strong>Note:</strong> Here you can look over <a href="http://blog.lilianakastilio.co.uk/blog/2015/12/03/create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/">Part 1: HTML</a>, <a href="http://blog.lilianakastilio.co.uk/blog/2015/12/30/create-a-simple-website-in-css-and-html-2/">Part 2: CSS</a> and <a href="http://blog.lilianakastilio.co.uk/blog/2016/01/01/Create-a-bucket-and-deploy-a-website-to-amazon-s3/">Part 3: Deploy to AWS</a> of this tutorial.</p>
<h4>1. Create a new User</h4>
<ol>
<li>Sign in to the <a href="https://console.aws.amazon.com/console/home?nc2=h_m_mc">AWS Amazon console</a></li>
<li>Click on <strong>Identity & Access Management</strong>
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/iam.png" alt="" /></li>
<li>Click on <strong>User</strong> on the left hand-side menu<br/>
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/user.png" alt="" /></li>
<li>Click <strong>Create New User</strong>
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/create-new-user.png" alt="" /></li>
<li>Enter username <code>testuser</code>
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/new-user-name.png" alt="" /></li>
<li>Click <strong>Create</strong></li>
<li>Download the credentials. These will include User Name, Access Key Id, Secret Access Key. Keep these secret as they are tied to your account and can be used for malicious purposes if not kept safely. Remember that your account is tied to your credit card.</li>
</ol>
<h4>2. Set user permissions</h4>
<ol>
<li>You should now see your user created in the user dashboard.</li>
<li>Click your newly created user <code>testuser</code></li>
<li>Click on <strong>Permissions → Attach Policy</strong></li>
</ol>
<p><img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/attach-policy.png" alt="" /></p>
<ol>
<li>Select <strong>AmazonS3FullAccess → Attach Policy</strong>:
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/amazons3fullaccess.png" alt="" /></li>
<li>Done!
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/user-complete.png" alt="" /></li>
</ol>
<p>🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on <a href="https://twitter.com/lilianakastilio">Twitter</a> and checking out my code school for some <a href="http://cubcats.teachable.com/courses/">hands on guided coding practice.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2016/01/01/Create-a-bucket-and-deploy-a-website-to-amazon-s3/" class="h1">Part 3: Create a Bucket and Deploy a Website to Amazon S3</a></h1>
<p class="meta">
<time class='entry-date' datetime='2016-01-01T00:00:00+00:00'><span class='date'><span class='date-month'>Jan</span> <span class='date-day'>1</span><span class='date-suffix'>st</span>, <span class='date-year'>2016</span></span> <span class='time'>12:00 am</span></time>
</p>
</header>
<div class="article__content"><p>This is Part 3 of a tutorial post <a href="http://blog.lilianakastilio.co.uk/blog/2015/12/03/create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3">Create a Simple Website in CSS/HTML and deploy to Amazon S3</a>, it is aimed at a completele beginner.</p>
<p><strong>Note:</strong> Here you can look over <a href="http://blog.lilianakastilio.co.uk/blog/2015/12/03/create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/">Part 1: HTML</a> and <a href="http://blog.lilianakastilio.co.uk/blog/2015/12/30/create-a-simple-website-in-css-and-html-2/">Part 2: CSS</a> of this tutorial.</p>
<p>In this tutorial we will cover:</p>
<ol>
<li>Create a free account on Amazon S3</li>
<li>Creating a bucket on Amazon S3</li>
<li>Uploading your website to Amazon S3</li>
</ol>
<h4>1. Create a free account on Amazon S3</h4>
<p>Amazon has a free tier which will be enough for most small websites.</p>
<p><strong>1.</strong> Go to <a href="https://aws.amazon.com/s3/">Amazon S3</a></p>
<p><strong>2.</strong> Click on “Try Amazon S3 for Free”:</p>
<p><img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/amazonsignup1.png" alt="" /></p>
<p><strong>3.</strong> Enter your email address or phone number. Then select “I am New User” and click “Sign in using our secure server”:</p>
<p><img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/amazonsignup2.png" alt="" /></p>
<p><strong>4.</strong> Fill out required info:</p>
<p><img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/amazonsignup3.png" alt="" /></p>
<p><strong>5.</strong> Fill out credit card info</p>
<p><strong>6.</strong> Confirm your identity via a call:</p>
<p><img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/amazonsignup4.png" alt="" /></p>
<h4>2. Creating a bucket on Amazon S3</h4>
<p><strong>1.</strong> Sign in to the <a href="https://aws.amazon.com/s3/">Amazon console</a></p>
<p><img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/amazonconsole-s3.png" alt="" /></p>
<p><strong>2.</strong> Click on <strong>S3</strong>
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/s3-signed-in.png" alt="" /></p>
<p><strong>3.</strong> Click “Create a new bucket”
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/create-new-bucket.png" alt="" /></p>
<p><strong>4.</strong> Click “Create a new bucket”
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/create-new-bucket.png" alt="" /></p>
<p><strong>3.</strong> Fill out the bucket name (example yourname.com)</p>
<h4>3. Uploading your website to Amazon S3</h4>
<p><strong>1.</strong> Click into the bucket name you have just created</p>
<p><strong>2.</strong> Select “Actions” → “Upload”
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/upload.png" alt="" /></p>
<p><strong>3.</strong> Click “Set Details” → “Set permissions”</p>
<p><strong>4.</strong> Tick “Make everything public”
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/makepublic.png" alt="" /></p>
<p><strong>5.</strong> Click “Start Upload”</p>
<p><strong>6.</strong> Select the file index.html and click “Properties”</p>
<p><strong>7.</strong> Click on the link
<img src="http://www.lilianakastilio.co.uk/images/2015-12-03-create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/index.png" alt="" /></p>
<p><strong>8.</strong> Thats it! Your website is now live and accessible online via this link at any time.</p>
<p>If you would like to learn how to automate this deploy and make it easier for continuous development watch out for the next blog post where I will talk about using <a href="http://gruntjs.com/">Grunt</a>.</p>
<p>🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on <a href="https://twitter.com/lilianakastilio">Twitter</a> and checking out my code school for some <a href="http://cubcats.teachable.com/courses/">hands on guided coding practice.</a></p>
</div>
</article>
<article>
<header>
<h1 class="article__title"><a href="/blog/2015/12/30/create-a-simple-website-in-css-and-html-2/" class="h1">Part 2: Create a Simple Website in CSS/HTML and Deploy to Amazon S3</a></h1>
<p class="meta">
<time class='entry-date' datetime='2015-12-30T00:00:00+00:00'><span class='date'><span class='date-month'>Dec</span> <span class='date-day'>30</span><span class='date-suffix'>th</span>, <span class='date-year'>2015</span></span> <span class='time'>12:00 am</span></time>
</p>
</header>
<div class="article__content"><p>This is Part 2 of a tutorial post <a href="http://blog.lilianakastilio.co.uk/blog/2015/12/03/create-a-simple-website-in-css-and-html-and-deploy-to-amazon-s3/">Create a Simple Website in CSS/HTML and deploy to Amazon S3</a>, it is aimed at a completele beginner.</p>
<p>In this tutorial we will briefly cover:</p>
<ol>
<li>What is CSS?</li>
<li>CSS Basics</li>
<li>Create a Stylesheet</li>
<li>Link HTML and CSS</li>
<li>Basic CSS Properties</li>
<li>CSS Exercises</li>
</ol>
<h4>1. What is CSS?</h4>
<p><strong>Cascading Style Sheets (CSS)</strong> is a style sheet language used for describing what the html elements should “look like”. It is used to describe whether an html element should be of certain height, width, if the text should be bold, text colour etc. We will try this shortly.</p>
<!-- CSS allows us to separate the document structure from document appearance, it also allows certain styles to be re-used. For example if all buttons should look the same, it allows us to style them once and not repeat ourselves
-->
<h4>2. CSS Basics</h4>
<p>This is a <strong>rule</strong>:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">h1</span> <span class="p">{</span>
</span><span class='line'> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<ul>
<li>This rule starts with <code>h1</code>, which is a <em>selector</em>.</li>
<li>The part inside the curly braces is the <em>declaration</em>.</li>
<li><code>color</code> is a <em>property</em>.</li>
<li><code>red</code> is a <em>value</em>.</li>
<li><code>color: red;</code> is a <em>property-value pair</em>.</li>
<li>The <code>;</code> after the <em>property-value pair</em> separates it from other <em>property-value pairs</em> in the same <em>rule</em>, for example:</li>
</ul>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">h1</span> <span class="p">{</span>
</span><span class='line'> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
</span><span class='line'> <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>We will refer to those definitions throughout this class.</p>
<h4>3. CSS Basics</h4>
<p>When the browser reads the CSS file, it finds each <em>selector</em> and works out if it applies to any elements in the HTML.
If it does, it uses the <em>properties</em> within the matching rule.</p>
<p>A <strong>style sheet</strong> consists of a list of <strong>rules</strong>.
Each <strong>rule</strong> or <strong>rule-set</strong> consists of one or more selectors.
<strong>Selectors</strong> allow you to SELECT all elements that match:</p>
<ul>
<li>a certain tag name e.g. <code><h1></code></li>
<li>a certain element inside another element e.g. all <code><li></code> within a <code><ul></code></li>
</ul>
<!-- in addition to tag names, you can use attribute values in selectors and for example select all items that are `h1` but have a class `.red` (More info on classes later)
-->
<h4>4. Create a Stylesheet</h4>
<ol>
<li><a href="http://www.sublimetext.com/">Install Sublime</a> or use your preferred text editor</li>
<li>Create a new file in the same folder as the <code>index.html</code> and name it <code>style.css</code></li>
<li>Type out the code below and save in in your <code>style.css</code> file:</li>
</ol>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">h1</span> <span class="p">{</span>
</span><span class='line'> <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
</span><span class='line'> <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>Here you created a rule that says:
<em>All <code>h1</code> elements have the following properties: text alignment is <code>center</code> & the text colour is <code>red</code>.</em></p>
<p><strong>Exercise:</strong> Now use the example above to do the same for <code><p></code>. Clue: create a new rule and replace <code>h1</code> with <code>p</code>.</p>
<h4>5. Link HTML and CSS</h4>
<p>Now that we have our first stylesheet, we can tell the html document <code>index.html</code> to use the stylesheet <code>style.css</code> so that the browser knows what the page should look like.</p>
<ol>
<li>Add the following line in your <code>index.html</code> file underneath the <code><title></code> tag:<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span><span class="nt">></span>
</span></code></pre></td></tr></table></div></figure></li>
<li>Reload the file in the browser or open it again: Open your web browser, then press <code>Ctrl + O</code> (Windows) or <code>Cmd + O</code> (Mac) to open the file we have just updated. You should see “Hello World” and the text you added in the paragraph with the added style.</li>
</ol>
<h4>6. Basic CSS Properties</h4>
<p><code>color</code></p>
<ul>
<li><strong>Description</strong>: this is the text colour, this is used to style elements that have text e.g. <code>h1</code>, <code>p</code>, <code>h2</code>.</li>
<li><strong>Example</strong>: <code>color: white;</code></li>
<li><strong>More Info</strong>: <a href="https://developer.mozilla.org/en/docs/Web/CSS/color">MDN: color</a></li>
</ul>
<p><code>background-color</code></p>
<ul>
<li><strong>Description</strong>: this is used to define the background color of a particular element.</li>
<li><strong>Example</strong>: <code>background-color: blue;</code></li>
<li><strong>More Info</strong>: <a href="https://developer.mozilla.org/en/docs/Web/CSS/background-color">MDN: background-color</a></li>
</ul>
<p><code>font-size</code></p>