diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 766addf4..cf072cbd 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
-custom: ["https://codebar.io/donations/new"]
+custom: ["https://codebar.enthuse.com/donate/#!/"]
diff --git a/.gitignore b/.gitignore
index 7ff05a84..850441a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,5 @@ node_modules
# sourcemaps
*.map
+
+.idea
diff --git a/.ruby-version b/.ruby-version
index c043eea7..4d9d11cf 100644
--- a/.ruby-version
+++ b/.ruby-version
@@ -1 +1 @@
-2.2.1
+3.4.2
diff --git a/Gemfile b/Gemfile
index c452bbf3..fc183a50 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,3 @@
source 'https://rubygems.org/'
-gem 'jekyll', '~> 3.6.3' # https://pages.github.com/versions/
-
-group :jekyll_plugins do
- gem 'jekyll-livereload'
-end
+gem 'github-pages', group: :jekyll_plugins
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
index 5a679a25..ceff5507 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,60 +1,283 @@
GEM
remote: https://rubygems.org/
specs:
- addressable (2.5.2)
- public_suffix (>= 2.0.2, < 4.0)
+ activesupport (8.0.4.1)
+ base64
+ benchmark (>= 0.3)
+ bigdecimal
+ concurrent-ruby (~> 1.0, >= 1.3.1)
+ connection_pool (>= 2.2.5)
+ drb
+ i18n (>= 1.6, < 2)
+ logger (>= 1.4.2)
+ minitest (>= 5.1, < 6)
+ securerandom (>= 0.3)
+ tzinfo (~> 2.0, >= 2.0.5)
+ uri (>= 0.13.1)
+ addressable (2.8.7)
+ public_suffix (>= 2.0.2, < 7.0)
+ base64 (0.3.0)
+ benchmark (0.5.0)
+ bigdecimal (4.0.1)
+ coffee-script (2.4.1)
+ coffee-script-source
+ execjs
+ coffee-script-source (1.12.2)
colorator (1.1.0)
- em-websocket (0.5.1)
+ commonmarker (0.23.11)
+ concurrent-ruby (1.3.6)
+ connection_pool (3.0.2)
+ csv (3.3.2)
+ dnsruby (1.73.1)
+ base64 (>= 0.2)
+ logger (~> 1.6)
+ simpleidn (~> 0.2.1)
+ drb (2.2.3)
+ em-websocket (0.5.3)
eventmachine (>= 0.12.9)
- http_parser.rb (~> 0.6.0)
- eventmachine (1.2.5)
- ffi (1.9.25)
+ http_parser.rb (~> 0)
+ ethon (0.16.0)
+ ffi (>= 1.15.0)
+ eventmachine (1.2.7)
+ execjs (2.10.0)
+ faraday (2.14.2)
+ faraday-net_http (>= 2.0, < 3.5)
+ json
+ logger
+ faraday-net_http (3.4.2)
+ net-http (~> 0.5)
+ ffi (1.17.1)
forwardable-extended (2.6.0)
- http_parser.rb (0.6.0)
- jekyll (3.6.3)
+ gemoji (4.1.0)
+ github-pages (232)
+ github-pages-health-check (= 1.18.2)
+ jekyll (= 3.10.0)
+ jekyll-avatar (= 0.8.0)
+ jekyll-coffeescript (= 1.2.2)
+ jekyll-commonmark-ghpages (= 0.5.1)
+ jekyll-default-layout (= 0.1.5)
+ jekyll-feed (= 0.17.0)
+ jekyll-gist (= 1.5.0)
+ jekyll-github-metadata (= 2.16.1)
+ jekyll-include-cache (= 0.2.1)
+ jekyll-mentions (= 1.6.0)
+ jekyll-optional-front-matter (= 0.3.2)
+ jekyll-paginate (= 1.1.0)
+ jekyll-readme-index (= 0.3.0)
+ jekyll-redirect-from (= 0.16.0)
+ jekyll-relative-links (= 0.6.1)
+ jekyll-remote-theme (= 0.4.3)
+ jekyll-sass-converter (= 1.5.2)
+ jekyll-seo-tag (= 2.8.0)
+ jekyll-sitemap (= 1.4.0)
+ jekyll-swiss (= 1.0.0)
+ jekyll-theme-architect (= 0.2.0)
+ jekyll-theme-cayman (= 0.2.0)
+ jekyll-theme-dinky (= 0.2.0)
+ jekyll-theme-hacker (= 0.2.0)
+ jekyll-theme-leap-day (= 0.2.0)
+ jekyll-theme-merlot (= 0.2.0)
+ jekyll-theme-midnight (= 0.2.0)
+ jekyll-theme-minimal (= 0.2.0)
+ jekyll-theme-modernist (= 0.2.0)
+ jekyll-theme-primer (= 0.6.0)
+ jekyll-theme-slate (= 0.2.0)
+ jekyll-theme-tactile (= 0.2.0)
+ jekyll-theme-time-machine (= 0.2.0)
+ jekyll-titles-from-headings (= 0.5.3)
+ jemoji (= 0.13.0)
+ kramdown (= 2.4.0)
+ kramdown-parser-gfm (= 1.1.0)
+ liquid (= 4.0.4)
+ mercenary (~> 0.3)
+ minima (= 2.5.1)
+ nokogiri (>= 1.16.2, < 2.0)
+ rouge (= 3.30.0)
+ terminal-table (~> 1.4)
+ webrick (~> 1.8)
+ github-pages-health-check (1.18.2)
+ addressable (~> 2.3)
+ dnsruby (~> 1.60)
+ octokit (>= 4, < 8)
+ public_suffix (>= 3.0, < 6.0)
+ typhoeus (~> 1.3)
+ html-pipeline (2.14.3)
+ activesupport (>= 2)
+ nokogiri (>= 1.4)
+ http_parser.rb (0.8.0)
+ i18n (1.14.8)
+ concurrent-ruby (~> 1.0)
+ jekyll (3.10.0)
addressable (~> 2.4)
colorator (~> 1.0)
+ csv (~> 3.0)
+ em-websocket (~> 0.5)
+ i18n (>= 0.7, < 2)
jekyll-sass-converter (~> 1.0)
- jekyll-watch (~> 1.1)
- kramdown (~> 1.14)
+ jekyll-watch (~> 2.0)
+ kramdown (>= 1.17, < 3)
liquid (~> 4.0)
mercenary (~> 0.3.3)
pathutil (~> 0.9)
- rouge (>= 1.7, < 3)
+ rouge (>= 1.7, < 4)
safe_yaml (~> 1.0)
- jekyll-livereload (0.2.2)
- em-websocket (~> 0.5)
- jekyll (~> 3.0)
+ webrick (>= 1.0)
+ jekyll-avatar (0.8.0)
+ jekyll (>= 3.0, < 5.0)
+ jekyll-coffeescript (1.2.2)
+ coffee-script (~> 2.2)
+ coffee-script-source (~> 1.12)
+ jekyll-commonmark (1.4.0)
+ commonmarker (~> 0.22)
+ jekyll-commonmark-ghpages (0.5.1)
+ commonmarker (>= 0.23.7, < 1.1.0)
+ jekyll (>= 3.9, < 4.0)
+ jekyll-commonmark (~> 1.4.0)
+ rouge (>= 2.0, < 5.0)
+ jekyll-default-layout (0.1.5)
+ jekyll (>= 3.0, < 5.0)
+ jekyll-feed (0.17.0)
+ jekyll (>= 3.7, < 5.0)
+ jekyll-gist (1.5.0)
+ octokit (~> 4.2)
+ jekyll-github-metadata (2.16.1)
+ jekyll (>= 3.4, < 5.0)
+ octokit (>= 4, < 7, != 4.4.0)
+ jekyll-include-cache (0.2.1)
+ jekyll (>= 3.7, < 5.0)
+ jekyll-mentions (1.6.0)
+ html-pipeline (~> 2.3)
+ jekyll (>= 3.7, < 5.0)
+ jekyll-optional-front-matter (0.3.2)
+ jekyll (>= 3.0, < 5.0)
+ jekyll-paginate (1.1.0)
+ jekyll-readme-index (0.3.0)
+ jekyll (>= 3.0, < 5.0)
+ jekyll-redirect-from (0.16.0)
+ jekyll (>= 3.3, < 5.0)
+ jekyll-relative-links (0.6.1)
+ jekyll (>= 3.3, < 5.0)
+ jekyll-remote-theme (0.4.3)
+ addressable (~> 2.0)
+ jekyll (>= 3.5, < 5.0)
+ jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
+ rubyzip (>= 1.3.0, < 3.0)
jekyll-sass-converter (1.5.2)
sass (~> 3.4)
- jekyll-watch (1.5.1)
+ jekyll-seo-tag (2.8.0)
+ jekyll (>= 3.8, < 5.0)
+ jekyll-sitemap (1.4.0)
+ jekyll (>= 3.7, < 5.0)
+ jekyll-swiss (1.0.0)
+ jekyll-theme-architect (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-cayman (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-dinky (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-hacker (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-leap-day (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-merlot (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-midnight (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-minimal (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-modernist (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-primer (0.6.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-github-metadata (~> 2.9)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-slate (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-tactile (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-theme-time-machine (0.2.0)
+ jekyll (> 3.5, < 5.0)
+ jekyll-seo-tag (~> 2.0)
+ jekyll-titles-from-headings (0.5.3)
+ jekyll (>= 3.3, < 5.0)
+ jekyll-watch (2.2.1)
listen (~> 3.0)
- kramdown (1.17.0)
- liquid (4.0.0)
- listen (3.1.1)
- rb-fsevent (>= 0.9.3)
- rb-inotify (>= 0.9.7)
+ jemoji (0.13.0)
+ gemoji (>= 3, < 5)
+ html-pipeline (~> 2.2)
+ jekyll (>= 3.0, < 5.0)
+ json (2.19.5)
+ kramdown (2.4.0)
+ rexml
+ kramdown-parser-gfm (1.1.0)
+ kramdown (~> 2.0)
+ liquid (4.0.4)
+ listen (3.9.0)
+ rb-fsevent (~> 0.10, >= 0.10.3)
+ rb-inotify (~> 0.9, >= 0.9.10)
+ logger (1.7.0)
mercenary (0.3.6)
- pathutil (0.16.1)
+ mini_portile2 (2.8.9)
+ minima (2.5.1)
+ jekyll (>= 3.5, < 5.0)
+ jekyll-feed (~> 0.9)
+ jekyll-seo-tag (~> 2.1)
+ minitest (5.27.0)
+ net-http (0.9.1)
+ uri (>= 0.11.1)
+ nokogiri (1.19.3)
+ mini_portile2 (~> 2.8.2)
+ racc (~> 1.4)
+ octokit (4.25.1)
+ faraday (>= 1, < 3)
+ sawyer (~> 0.9)
+ pathutil (0.16.2)
forwardable-extended (~> 2.6)
- public_suffix (3.0.3)
- rb-fsevent (0.10.3)
- rb-inotify (0.9.10)
- ffi (>= 0.5.0, < 2)
- rouge (2.2.1)
- safe_yaml (1.0.4)
- sass (3.6.0)
+ public_suffix (5.1.1)
+ racc (1.8.1)
+ rb-fsevent (0.11.2)
+ rb-inotify (0.11.1)
+ ffi (~> 1.0)
+ rexml (3.4.2)
+ rouge (3.30.0)
+ rubyzip (2.4.1)
+ safe_yaml (1.0.5)
+ sass (3.7.4)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
+ sawyer (0.9.2)
+ addressable (>= 2.3.5)
+ faraday (>= 0.17.3, < 3)
+ securerandom (0.4.1)
+ simpleidn (0.2.3)
+ terminal-table (1.8.0)
+ unicode-display_width (~> 1.1, >= 1.1.1)
+ typhoeus (1.4.1)
+ ethon (>= 0.9.0)
+ tzinfo (2.0.6)
+ concurrent-ruby (~> 1.0)
+ unicode-display_width (1.8.0)
+ uri (1.1.1)
+ webrick (1.9.1)
PLATFORMS
ruby
DEPENDENCIES
- jekyll (~> 3.6.3)
- jekyll-livereload
+ github-pages
BUNDLED WITH
- 1.16.6
+ 2.6.5
diff --git a/README.md b/README.md
index 82558640..a6741064 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,7 @@ Follow the [quick installation guide](https://rvm.io/rvm/install#quick-guided-in
```bash
$ rvm install 2.2.1 # inside `codebar/tutorials` folder
$ rvm gemset use codebar-tutorial --create
-$ gem install bundler
+$ gem install bundler -v 1.17.3
$ bundle install
$ jekyll serve # go to http://127.0.0.1:4000/
```
diff --git a/_config.yml b/_config.yml
index fffe3e98..f32a2c37 100644
--- a/_config.yml
+++ b/_config.yml
@@ -8,8 +8,9 @@ kramdown:
input: GFM
hard_wrap: false
extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
-exclude: [
- "javascripts-dev",
- "node_modules"
-]
+exclude:
+ - javascripts-dev
+ - node_modules
+ - vendor
livereload: true
+
diff --git a/examples/hangman/script.js b/examples/hangman/script.js
index cb7ee61f..11e71277 100644
--- a/examples/hangman/script.js
+++ b/examples/hangman/script.js
@@ -1,7 +1,7 @@
function newGame() {
$.ajax({
type: "POST",
- url: "http://hangman-api.herokuapp.com/hangman",
+ url: "https://hangman-api.herokuapp.com/hangman",
}).done(function(data) {
$('.hangman-word').text(data.hangman);
$('.token').text(data.token);
@@ -14,7 +14,7 @@ function guess(token, letter) {
$.ajax({
type: "PUT",
dataType: 'json',
- url: "http://hangman-api.herokuapp.com/hangman",
+ url: "https://hangman-api.herokuapp.com/hangman",
data: { "token": token, "letter": letter},
beforeSend: function() {
$(".letter").prop('disabled', true);
@@ -42,7 +42,7 @@ function getSolution(token) {
$.ajax({
type: "GET",
dataType: 'json',
- url: "http://hangman-api.herokuapp.com/hangman",
+ url: "https://hangman-api.herokuapp.com/hangman",
data: { "token": token },
}).done(function(data) {
var hangman_word = $('.hangman-word').text();
diff --git a/general/getting-started-in-tech.md b/general/getting-started-in-tech.md
new file mode 100644
index 00000000..dbd2c26f
--- /dev/null
+++ b/general/getting-started-in-tech.md
@@ -0,0 +1,97 @@
+---
+layout: page
+title: Getting Started in Tech
+---
+
+Technology is a vast subject. It can enable you to write a to-do list on your phone, sell goods online or send a rover and a helicopter to Mars. Software is built by developers and codebar is here to teach you how to write such software. Whether you want to make a career of it or acquire some exta skills.
+
+Typically software can fall into two (very broad) categories:
+
+- **User interface** - How to present information to people using the technology and enable them to interact with it. For example:
+ - Displaying your vehicle and responding to joystick inputs in a game of Mario Kart
+ - Displaying your balance and allowing you to make a payment in your bank’s online banking site
+ - Displaying current temperature and allowing you to change the target on your Hive or Nest smart thermostat
+- **Data processing** - How to manipulate the data and perform the task that the software implements. For example:
+ - Calculating the position of your vehicle and detecting collisions
+ - Validating that your account has enough funds to send this payment and processing the payment
+ - Starting or stopping your heating or air conditioning depending on the current temperature and the target you set
+
+At codebar, we concentrate on web technologies for several reasons:
+
+- No initial investment is needed: all the tools you need to learn about web technologies are available online for free. And the computer you use doesn’t have to be new or a top of the range model, most computers will perform well, including shared computers in libraries.
+- You can see results very fast.
+- They are ubiquitous: a lot of technologies that started on the web are now used in many other places. Even if you end up working in a domain that has nothing to do with the web, you will likely use or interact with web technologies.
+
+Web technologies are designed in such a way that they tend to more clearly separate user interface work from data processing work. As a result, web developer jobs typically fall into three broad categories:
+- Front end: work that deals with user interfaces
+- Back end: work that deals with data processing
+- Full stack: work that combines both aspects
+
+Both front-end and back-end have their own complexities and neither is easier than the other. So let’s have a look at what they both involve. Take this web page as an example. It is a page on the codebar.io website and you are reading it via a web browser on a computer or mobile device. The codebar website runs on a computer in a data center that runs a piece of software called a web server. Both talk to each other via the internet.
+
+To build a website like this involves two pieces of code:
+- The front-end code that runs in the web browser
+- The back-end code that runs on the web server
+
+Below we go into more depth about these roles, and what languages you would need to learn.
+
+## Front-end Development
+
+As a front-end developer you would be responsible for the code that runs in the web browser and displays information to visitors. It is typically the practice of writing HTML, CSS and JavaScript.
+
+### HTML (Hyper Text Markup Language)
+
+HTML is the language used to build websites. All text and content that you see on the internet is built using HTML.
+
+### CSS (Cascading Style Sheets)
+
+CSS is used alongside HTML to style the page and make it look good.
+
+### JavaScript
+
+JavaScript is used to change what is displayed on a web page in response to user activity.
+
+## Back-end Development
+
+As a back-end developer you would be responsible for the code that runs on the server. This type of development usually consists of three parts: a server, an application, and a database. Many back-end developers know front-end languages such as HTML and CSS but need to use languages such as Ruby, Python, PHP, Java, and .NET to get the job done.
+
+Front-end and Back-end development overlap a fair amount so starting in one role doesn’t mean that you can't switch or learn the other, should you change your mind further down the line. They also have strong ties to other areas of technology. For instance, front-end development shares a lot with mobile app development; back-end development with data science.
+
+### Ruby
+Ruby is an object oriented scripting programming language typically used for building web applications. It is most commonly used with Ruby on Rails, a web development framework built with Ruby.
+
+### Python
+Python is the preferred option for data science thanks to scientific libraries like NumPy and pandas.
+
+### Node.js
+Node.js is a development framework built with JavaScript. It allows you to write back-end components with the same technologies as the ones used in front-end work, which makes it particularly attractive when the same developers work on the front-end and back-end.
+
+### PHP
+PHP is a general-purpose scripting language especially suited to web development. It is a server side scripting language that is embedded in HTML. It is used to manage dynamic content, databases, session tracking, even build entire e-commerce sites. Also commonly used with WordPress so if custom WordPress themes interests you, then learn PHP.
+
+### SQL
+SQL is a domain-specific language designed for managing data held in a relational database management system. It is often combined with the technologies described above.
+
+## Full-stack Development
+
+A full-stack web developer is a person who can develop both client (front-end) and server (back-end) software. For this we suggest learning any of the languages under front-end development and back-end development. Below are some further subjects that relate to both:
+
+### Testing
+Why do you want to test and what different types of tests you can do:
+- Unit testing
+- Integration testing
+- End to end testing
+- Acceptance testing
+- Security testing
+- Performance testing
+
+### REST API
+Basics on HTTP, JSON and how to put this together to use or build an API.
+
+### Privacy
+Basics on privacy, things like GDPR and overall principles.
+
+### Accessibility
+How you use web technologies to build your websites has an impact on who can access and interact with the information you provide. Accessibility is a set of guidelines and techniques to ensure that your websites can be used by as wide a variety of people as possible, irrespective of whether they get on the web like you do or in a very different way.
+
+[MDN Article](https://developer.mozilla.org/en-US/docs/Learn/Accessibility)
diff --git a/gulpfile.js b/gulpfile.js
index c237105c..dd364b1d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,48 +1,50 @@
-var
-browsersync = require('browser-sync').create(),
- concat = require('gulp-concat'),
- gulp = require('gulp'),
- sourcemaps = require('gulp-sourcemaps'),
- uglify = require('gulp-uglify'),
- paths = {
- jsdev: [
- './javascripts-dev/vendor/jszip.js',
- './javascripts-dev/vendor/jszip-utils.js',
- './javascripts-dev/vendor/FileSaver.js',
- './javascripts-dev/src/downloader.js',
- './javascripts-dev/src/zipper.js',
- './javascripts-dev/src/ui.js',
- './javascripts-dev/main.js',
- ],
- jsdist: './javascripts/',
- };
+const browsersync = require('browser-sync').create();
+const concat = require('gulp-concat');
+const gulp = require('gulp');
+const sourcemaps = require('gulp-sourcemaps');
+const uglify = require('gulp-uglify');
-gulp.task('js', function() {
+const paths = {
+ jsdev: [
+ './javascripts-dev/vendor/jszip.js',
+ './javascripts-dev/vendor/jszip-utils.js',
+ './javascripts-dev/vendor/FileSaver.js',
+ './javascripts-dev/src/downloader.js',
+ './javascripts-dev/src/zipper.js',
+ './javascripts-dev/src/ui.js',
+ './javascripts-dev/main.js',
+ ],
+ jsdist: './javascripts/',
+};
+
+function js() {
return gulp
- .src(paths.jsdev)
- .pipe(sourcemaps.init())
- .pipe(concat('downloader-bundle.js'))
- .pipe(uglify())
- .pipe(sourcemaps.write('./'))
- .pipe(gulp.dest(paths.jsdist));
-});
+ .src(paths.jsdev)
+ .pipe(sourcemaps.init())
+ .pipe(concat('downloader-bundle.js'))
+ .pipe(uglify())
+ .pipe(sourcemaps.write('./'))
+ .pipe(gulp.dest(paths.jsdist));
+}
-gulp.task('watch', function() {
- gulp.watch(paths.jsdev, ['js']);
-});
+function watch() {
+ gulp.watch(paths.jsdev, js);
+}
-gulp.task('server', function() {
+function server() {
browsersync.init({
server: {
baseDir: './',
routes: {
- "/test" : 'javascripts-dev'
- }
+ "/test": 'javascripts-dev',
+ },
},
- port: 4000,
+ port: 4000,
notify: false,
- open: false
+ open: false,
});
-});
+}
+
+const build = gulp.series(js, gulp.parallel(watch, server));
-gulp.task('default', ['js', 'watch', 'server']);
+gulp.task('default', build);
\ No newline at end of file
diff --git a/html/lesson2/tutorial.md b/html/lesson2/tutorial.md
index 723c42e6..b6f41fa6 100644
--- a/html/lesson2/tutorial.md
+++ b/html/lesson2/tutorial.md
@@ -6,19 +6,19 @@ footer: true
## Introduction to CSS
-### Objectives
-
+### Objectives
+
In this tutorial we are going to look at:
-
-* What is CSS?
-* What you can do with CSS?
-* Introductions to selectors
-* Linking your CSS file
-* Cascading selectors
-* Pseudo classes
-
+
+- What is CSS?
+- What you can do with CSS?
+- Introductions to selectors
+- Linking your CSS file
+- Cascading selectors
+- Pseudo classes
+
### Goal
-
+
Today we will be styling [this page](https://github.com/codebar/tutorials/blob/master/html/lesson2/example.html) so that it looks [like this example](https://tutorials.codebar.io/html/lesson2/example.html).
### Required files
@@ -33,7 +33,7 @@ It defines the visual representation of the content. For example colour, margins
### What does it stand for?
- **C**ascading **S**tyle **S**heets.
+**C**ascading **S**tyle **S**heets.
### What makes a website
@@ -43,7 +43,6 @@ CSS: presentation
_**CSS** works in conjunction with **HTML**_
-
## What can I do with CSS?
You can change the color, position, dimensions and presentation of different elements
@@ -84,9 +83,7 @@ In the head of the html page define a style tag
```html
I love owls
-
+
```
@@ -102,7 +99,7 @@ Let's set the font that we want our page to use
```css
body {
- font-family: Helvetica, Arial, sans-serif;
+ font-family: Helvetica, Arial, sans-serif;
}
```
@@ -112,7 +109,7 @@ Let's also remove the bullet from the lists that we have defined
```css
ul {
- list-style: none;
+ list-style: none;
}
```
@@ -120,12 +117,13 @@ and change the appearance of the links on our page
```css
a {
- color: #a369d5;
- text-decoration: none;
- border-bottom: 1px dotted #a369d5;
+ color: #a369d5;
+ text-decoration: none;
+ border-bottom: 1px dotted #a369d5;
}
```
-**color** defines the color of the text. `#a369d5` is the representation of the color in hex.
+
+**color** defines the color of the text. `#a369d5` is the representation of the color in hex.
**text-decoration** specifies the decoration applied to the text. Some other options you can try out are _underline_, _overline_ and _line-through_. As links by default have an underline text decoration applied to them, by setting this to none, we reset that property.
@@ -139,7 +137,7 @@ a {
**#a369d5** defines the color of the border
-How about changing the border thickness to 5px to see what happens?
+How about changing the border thickness to 5px to see what happens?
#### Selector: class
@@ -147,8 +145,8 @@ A class selector selects all elements that use the specified class.
```css
.pictures {
- margin: 10px auto;
- width: 900px;
+ margin: 10px auto;
+ width: 900px;
}
```
@@ -172,8 +170,8 @@ Selects the element with the id logo.
```css
#logo {
- margin: 0 auto 30px;
- width: 200px;
+ margin: 0 auto 30px;
+ width: 200px;
}
```
@@ -185,8 +183,8 @@ Selects all list elements that are nested within a **class** pictures
```css
.pictures li {
- display: inline;
- margin: 3px;
+ display: inline;
+ margin: 3px;
}
```
@@ -194,6 +192,50 @@ Selects all list elements that are nested within a **class** pictures
> Change inline to inline-block, and to block. Can you notice the difference?
+#### Selector: child selector
+
+Another common selector that allows you to select only the immediate child inside the parent element.
+
+Let's use the markup for a layered store menu that needs to style the `
` tags in the list with the `menu` class, but not the `submenu`.
+
+```html
+
+
+ History books
+
+
Rome
+
Egypt
+
UK
+
+
+
+ Technical books
+
+
CSS
+
JavaScript
+
+
+
+```
+
+If you use a nested (contextual) selector, then the CSS rule will be applied to all `
` tags, and each will have a red border.
+
+```css
+/* ❌ note solve task */
+.menu li {
+ border: 1px solid tomato;
+}
+```
+
+The child selector helps solve this problem by selecting only the children of the
that are the children (first nesting) of the `ul.menu` list.
+
+```css
+/* ✅ Exactly what we need */
+.menu > li {
+ border: 1px solid tomato;
+}
+```
+
## Ways of connecting CSS to HTML
### Embedded CSS
@@ -203,15 +245,12 @@ At the beginning of the tutorial we described how to connect the CSS to our page
```html
I love owls
-
+
```
This method of using CSS, by defining it within our HTML page is called **embedded**. The problem with this, is that it cannot be reused across other pages and it also makes it a bit harder to work.
-
### Linked CSS
A better way to define CSS, is to include it within a separate stylesheet. This is easier to maintain and can be reused across several pages.
@@ -221,7 +260,7 @@ To achieve this, let's move our CSS outside of the head of the page and into a n
```html
I love owls
-
+
```
@@ -252,7 +291,6 @@ We can change the styling of some of these images by defining a more specific se
So far we have explained some selectors and presented others with more self explanatory names. Knowing every selector, is not an easy task, but don't let this put you off. The internet is your friend. [Here you can find a list of all CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference)
-
## Styling our page further
### line-height
@@ -277,6 +315,7 @@ In the HTML page you will notice a div element with the id **main**. Let's use t
padding: 0;
}
```
+
To achieve centering of a container, we must define its width. If you remove the width property you will notice that it won't be in the center of the page.
We have also used another type of _shorthand_ to define the margin. The long version looks like this
@@ -292,8 +331,7 @@ margin-left: auto;
**padding** is the area around an element but within its border.
-> Don't confuse padding with margin, have a look using an inspector to see how the padding and margin of an element differ.
-
+> Don't confuse padding with margin, have a look using an inspector to see how the padding and margin of an element differ.
### Floating elements
@@ -352,13 +390,13 @@ h2 {
}
h4 {
- color: #6D6A6A;
+ color: #6d6a6a;
font-size: 19px;
padding: 27px 25px 15px;
}
small {
- color: #6D6A6A;
+ color: #6d6a6a;
font-size: 15px;
margin: 0 30px 10px;
text-align: right;
@@ -370,7 +408,7 @@ ol {
}
ol li {
- background-color: #F6F4F8;
+ background-color: #f6f4f8;
color: #663095;
font-size: 16px;
font-weight: 400;
@@ -387,7 +425,7 @@ ol li {
### A bit more styling
```css
-#the-quote{
+#the-quote {
border-bottom: 1px solid #f6f4f8;
border-top: 1px solid #f6f4f8;
margin: 40px auto;
@@ -407,7 +445,6 @@ ol li {
#text-block {
height: 370px;
}
-
```
### More cascading selectors
@@ -416,13 +453,12 @@ ol li {
.pictures li img {
border: 2px solid #b9b1bf;
}
-
```
### Some extra touches
```css
-.bigimg{
+.bigimg {
display: inline;
}
```
@@ -443,7 +479,6 @@ Let's add the code below to make sure we only apply a margin to the _first li el
> What happens when you remove _:first-child_ from your selector?
-
### Bonus - Resetting styles
You've probably noticed that pages look quite different when loading them in different browsers. To try and avoid these browser inconsistencies a common technique is **CSS resetting**
@@ -451,7 +486,24 @@ You've probably noticed that pages look quite different when loading them in dif
Let's apply this to the elements used within our page
```css
-html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li {
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+img,
+small,
+b,
+i,
+ol,
+ul,
+li {
margin: 0;
padding: 0;
border: 0;
@@ -460,13 +512,13 @@ html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, small, b, i, ol, ul, li {
}
```
-If you have some time how about you go back through the tutorial making little amends to your CSS to see what things you can change.
+If you have some time how about you go back through the tutorial making little amends to your CSS to see what things you can change.
+
+---
------
This ends our second lesson, we hope you enjoyed it and learnt something. If you have some spare time how about going back through this tutorial and, by yourself, make some amendments. If there is something you did not understand or want to give us some feedback please [send us an email.](mailto:feedback@codebar.io)
## Further reading
-* [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference)
-* [More CSS](https://learn.shayhowe.com/html-css/)
-
+- [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference)
+- [More CSS](https://learn.shayhowe.com/html-css/)
diff --git a/html/lesson3/example.html b/html/lesson3/example.html
index c8a1c5fd..662d2ba9 100644
--- a/html/lesson3/example.html
+++ b/html/lesson3/example.html
@@ -23,29 +23,29 @@
Hi, I'm Ada Lovelace
-
My name is August Ada King. I'm the Countess of Lovelace.
+
My name is Augusta Ada King. I'm the Countess of Lovelace.
-
I am a mathematician and a writer. People know me from my work on Charle's Babbage's early mechanical general-purpose computer, the Analytical engine. I wrote the first algorithm intended to be processed by a machine. In other words, I am the world's first programmer.
+
I am a mathematician and a writer. People know me from my work on Charles Babbage's early mechanical general-purpose computer, the Analytical Engine. I wrote the first algorithm intended to be processed by a machine. In other words, I am the world's first programmer.
My mother, Anne Isabella Byron, was a great help to me as she helped me by promoting my interest in mathematics and logic, but I also never forgot about my dad, who moved to Greece when I was just an infant to help out in the civil war.
“I do not believe that my father was such a poet as I shall be an Analyst; for with me the two go together indissolubly.”
-
Throughout my life, mathematics have been my primary interest. I always question even basic assumptions by integrating poetry, another great love of mine, and science. I also have a keen interest in scientific developments and trends of my era like phrenology and mesmerism.
+
Throughout my life, mathematics has been my primary interest. I always question even basic assumptions by integrating poetry, another great love of mine, and science. I also have a keen interest in scientific developments and trends of my era like phrenology and mesmerism.
Charles Babbage wrote the following poem of me
Forget this world and all its troubles and if
- possible its multitudinous Charlatans-every thing
+ possible its multitudinous Charlatans—every thing
in short but the Enchantress of Numbers.
The computer language Ada, was named after me. The Defense Military standard for the language, MIL-STD-1815 was also given the year of my birth.
-
These days, the British Computer Society runs an annual competitions for women students of computer science in my name. Also, the annual conference for women undergraduates is named after me. Google also dedicated its Google doodle to me, on the 197th anniversary of my birth.
+
These days, the British Computer Society runs an annual competition for women students of computer science in my name. Also, the annual conference for women undergraduates is named after me. Google also dedicated its Google doodle to me, on the 197th anniversary of my birth.
diff --git a/html/lesson6/tutorial.md b/html/lesson6/tutorial.md
index a9727102..cee11dbd 100644
--- a/html/lesson6/tutorial.md
+++ b/html/lesson6/tutorial.md
@@ -165,5 +165,5 @@ Some of your users might be using screenreaders or keyboards to navigate across
- The [A11Y Project](https://a11yproject.com/) is an open source project on providing the most up to date and easy to access information regarding accessibility.
#### These extensions are handy if you wish to check if your website meets the criteria and areas to improve:
-- Chrome: WAVE Evaluation Tool
+- Chrome: [WAVE Evaluation Tool](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)
- Firefox:[AInspector](https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/)
diff --git a/html/lesson7/tutorial.md b/html/lesson7/tutorial.md
index c075ef5b..e708bc99 100644
--- a/html/lesson7/tutorial.md
+++ b/html/lesson7/tutorial.md
@@ -195,7 +195,7 @@ Have a go at styling these up, you can compare yours with the below example.
color: white;
}
-Look at your changes in Chrome (Chrome has some great developer tools which are going to help your responsive design). Open up the chrome inspect tool by right clicking and choosing 'inspect'. In the top left hand corner of the inspect tool you should see an icon that looks like a mobile in front of a monitor
+Look at your changes in Chrome (Chrome has some great developer tools which are going to help your responsive design). Open up the Chrome Inspect Tool by right clicking and choosing 'Inspect'. In the top left hand corner of the inspect tool you should see an icon that looks like a mobile in front of a monitor
diff --git a/index.html b/index.html
index b565918f..8c2cc790 100644
--- a/index.html
+++ b/index.html
@@ -32,13 +32,16 @@