Skip to content

Commit 9f30b04

Browse files
dangerwormdangerworm
committed
Fixed layout of cards (all same height now) and added icons for activities
1 parent 64de877 commit 9f30b04

11 files changed

+224
-191
lines changed

‎_site/activities-learning.html‎

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ <h2>
55
Learning
66
</h2>
77
</div>
8-
<div class="col-lg-4 col-md-6">
8+
</div>
9+
<div class="row">
10+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
911
<div class="row">
1012
<div class="card">
1113
<h4>
14+
<span class="fab fa-connectdevelop"></span>
1215
<a href="https://www.codecademy.com/" target="_blank">Codecademy</a>
1316
</h4>
1417
<p>
@@ -20,118 +23,111 @@ <h4>
2023
</div>
2124
</div>
2225

23-
<div class="col-lg-4 col-md-6">
26+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
2427
<div class="row">
2528
<div class="card">
2629
<h4>
30+
<span class="fas fa-fist-raised"></span>
2731
<a href="https://codecombat.com/play" target="_blank">Code Combat</a>
2832
</h4>
2933
<p>
3034
Code Combat was designed for use in schools but is a great place to start if you're looking
31-
to
32-
jump
33-
straight in. There are
34-
about 10 lessons where you get used to the basics but before long you're designing and
35-
implementing
36-
the AI for a game
37-
character.
35+
to jump straight in. There are about 10 lessons where you get used to the basics but before long
36+
you're designing and implementing the AI for a game character.
3837
</p>
3938
</div>
4039
</div>
4140
</div>
4241

43-
<div class="col-lg-4 col-md-6">
42+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
4443
<div class="row">
4544
<div class="card">
4645
<h4>
46+
<span class="fas fa-utensils"></span>
4747
<a href="https://flukeout.github.io/" target="_blank">CSS Diner</a>
4848
</h4>
4949
<p>
5050
This is a simple game that introduces you to different CSS selectors in an interactive and
51-
fun way,
52-
currently it has 30 stages
53-
which cover most of the main and recent CSS selectors you should be aware of as a beginner.
51+
fun way, currently it has 30 stages which cover most of the main and recent CSS selectors you should
52+
be aware of as a beginner.
5453
</p>
5554
</div>
5655
</div>
5756
</div>
5857

59-
<div class="col-lg-4 col-md-6">
58+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
6059
<div class="row">
6160
<div class="card">
6261
<h4>
62+
<span class="fab fa-css3-alt"></span>
6363
<a href="https://css-tricks.com" target="_blank">CSS Tricks</a>
6464
</h4>
6565
<p>
6666
CSS Tricks is an excellent website with a large amount of information on CSS, including
67-
code
68-
snippets, guides and even job
69-
postings!
67+
code snippets, guides, and even job postings!
7068
</p>
7169
</div>
7270
</div>
7371
</div>
7472

75-
<div class="col-lg-4 col-md-6">
73+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
7674
<div class="row">
7775
<div class="card">
7876
<h4>
77+
<span class="fab fa-free-code-camp"></span>
7978
<a href="https://freecodecamp.org" target="_blank">FreeCodeCamp</a>
8079
</h4>
8180
<p>
8281
FreeCodeCamp is a popular online learning tool for beginners to get to grips with
83-
new langauges and
84-
concepts. It offers training
85-
in different aspects of software and has challenges of varying difficulty.
82+
new langauges and concepts. It offers training in different aspects of software and has challenges
83+
of varying difficulty.
8684
</p>
8785
</div>
8886
</div>
8987
</div>
9088

91-
<div class="col-lg-4 col-md-6">
89+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
9290
<div class="row">
9391
<div class="card">
9492
<h4>
93+
<span class="fab fa-git-alt"></span>
9594
<a href="http://rogerdudler.github.io/git-guide/" target="_blank">git - the
9695
simple guide</a>
9796
</h4>
9897
<p>
9998
Just a simple guide for getting started with git, no deep or confusing stuff.
100-
Good as an
101-
introduction to the terminology
102-
before starting to read other guides which go into more detail.
99+
Good as an introduction to the terminology before starting to read other guides which go into more
100+
detail.
103101
</p>
104102
</div>
105103
</div>
106104
</div>
107105

108-
<div class="col-lg-4 col-md-6">
106+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
109107
<div class="row">
110108
<div class="card">
111109
<h4>
110+
<span class="fab fa-js-square"></span>
112111
<a href="https://javascript.info" target="_blank">The Modern JS Tutorial</a>
113112
</h4>
114113
<p>
115114
Javascript.info has its own built in search function, using which you can
116-
search every aspect of
117-
javascript for helpful guides
118-
and examples.
115+
search every aspect of javascript for helpful guides and examples.
119116
</p>
120117
</div>
121118
</div>
122119
</div>
123120

124-
<div class="col-lg-4 col-md-6">
121+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
125122
<div class="row">
126123
<div class="card">
127124
<h4>
125+
<span class="fas fa-user-graduate"></span>
128126
<a href="https://www.udemy.com" target="_blank">Udemy</a>
129127
</h4>
130128
<p>
131-
Udemy is an online platform offering video tutorial courses led by
132-
real-world professionals. There
133-
is a wide range of courses,
134-
some free, some paid, covering all sorts of things (not just
129+
Udemy is an online platform offering video tutorial courses led by real-world professionals. There
130+
is a wide range of courses, some free, some paid, covering all sorts of things (not just
135131
development).
136132
</p>
137133
</div>

‎_site/activities-practice.html‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ <h2>
55
Practice
66
</h2>
77
</div>
8-
<div class="col-lg-4 col-md-6">
8+
</div>
9+
<div class="row">
10+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
911
<div class="row">
1012
<div class="card">
1113
<h4>
14+
<span class="fas fa-calendar-day"></span>
1215
<a href="http://100daysofcode.com/" target="_blank">#100DaysOfCode</a>
1316
</h4>
1417
<p>
@@ -21,10 +24,11 @@ <h4>
2124
</div>
2225
</div>
2326

24-
<div class="col-lg-4 col-md-6">
27+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
2528
<div class="row">
2629
<div class="card">
2730
<h4>
31+
<span class="fas fa-candy-cane"></span>
2832
<a href="http://adventofcode.com/" target="_blank">Advent of Code</a>
2933
</h4>
3034
<p>
@@ -41,10 +45,11 @@ <h4>
4145
</div>
4246
</div>
4347

44-
<div class="col-lg-4 col-md-6">
48+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
4549
<div class="row">
4650
<div class="card">
4751
<h4>
52+
<span class="fas fa-dice-d6"></span>
4853
<a href="http://box-256.com/" target="_blank">Box-256</a>
4954
</h4>
5055
<p>
@@ -57,10 +62,11 @@ <h4>
5762
</div>
5863
</div>
5964

60-
<div class="col-lg-4 col-md-6">
65+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
6166
<div class="row">
6267
<div class="card">
6368
<h4>
69+
<span class="fas fa-keyboard"></span>
6470
<a href="https://www.codewars.com/" target="_blank">Code Wars</a>
6571
</h4>
6672
<p>
@@ -73,10 +79,11 @@ <h4>
7379
</div>
7480
</div>
7581

76-
<div class="col-lg-4 col-md-6">
82+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
7783
<div class="row">
7884
<div class="card">
7985
<h4>
86+
<span class="fas fa-ghost"></span>
8087
<a href="https://www.codingame.com/" target="_blank">CodinGame</a>
8188
</h4>
8289
<p>
@@ -89,10 +96,11 @@ <h4>
8996
</div>
9097
</div>
9198

92-
<div class="col-lg-4 col-md-6">
99+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
93100
<div class="row">
94101
<div class="card">
95102
<h4>
103+
<span class="fab fa-medapps"></span>
96104
<a href="https://edabit.com" target="_blank">Edabit</a>
97105
</h4>
98106
<p>
@@ -104,10 +112,11 @@ <h4>
104112
</div>
105113
</div>
106114

107-
<div class="col-lg-4 col-md-6">
115+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
108116
<div class="row">
109117
<div class="card">
110118
<h4>
119+
<span class="fab fa-reddit"></span>
111120
<a href="https://www.reddit.com/r/dailyprogrammer/" target="_blank">Reddit: Daily Programmer</a>
112121
</h4>
113122
<p>
@@ -120,10 +129,11 @@ <h4>
120129
</div>
121130
</div>
122131

123-
<div class="col-lg-4 col-md-6">
132+
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
124133
<div class="row">
125134
<div class="card">
126135
<h4>
136+
<span class="fas fa-list-ul"></span>
127137
<a href="https://jupyter.org/try" target="_blank">Jupyter</a>
128138
</h4>
129139
<p>

0 commit comments

Comments
 (0)