diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..cf072cbd --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: # Replace with a single Patreon username +open_collective: codebar +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +custom: ["https://codebar.enthuse.com/donate/#!/"] diff --git a/.gitignore b/.gitignore index 552734bb..850441a3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://help.github.com/ignore-files/ for more about ignoring files. # # If you find yourself ignoring temporary files generated by your text editor # or operating system, you probably want to add a global ignore instead: @@ -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 840519a4..fc183a50 100644 --- a/Gemfile +++ b/Gemfile @@ -1,3 +1,3 @@ -source 'https://rubygems.org/' +source 'https://rubygems.org/' -gem 'jekyll', '= 2.4.0' # https://pages.github.com/versions/ +gem 'github-pages', group: :jekyll_plugins \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index 775ab1bf..a4fe6c63 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,64 +1,283 @@ GEM remote: https://rubygems.org/ specs: - blankslate (2.1.2.4) - classifier-reborn (2.0.4) - fast-stemmer (~> 1.0) + activesupport (8.0.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) + 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.2.0) + benchmark (0.4.0) + bigdecimal (3.1.9) coffee-script (2.4.1) coffee-script-source execjs - coffee-script-source (1.10.0) - colorator (0.1) - execjs (2.6.0) - fast-stemmer (1.0.2) - ffi (1.9.10) - jekyll (2.4.0) - classifier-reborn (~> 2.0) - colorator (~> 0.1) - jekyll-coffeescript (~> 1.0) - jekyll-gist (~> 1.0) - jekyll-paginate (~> 1.0) + coffee-script-source (1.12.2) + colorator (1.1.0) + commonmarker (0.23.11) + concurrent-ruby (1.3.5) + connection_pool (2.5.0) + csv (3.3.2) + dnsruby (1.72.4) + base64 (~> 0.2.0) + logger (~> 1.6.5) + simpleidn (~> 0.2.1) + drb (2.2.1) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + ethon (0.16.0) + ffi (>= 1.15.0) + eventmachine (1.2.7) + execjs (2.10.0) + faraday (2.12.2) + faraday-net_http (>= 2.0, < 3.5) + json + logger + faraday-net_http (3.4.0) + net-http (>= 0.5.0) + ffi (1.17.1) + forwardable-extended (2.6.0) + 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.7) + 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.3) - liquid (~> 2.6.1) + jekyll-watch (~> 2.0) + kramdown (>= 1.17, < 3) + liquid (~> 4.0) mercenary (~> 0.3.3) - pygments.rb (~> 0.6.0) - redcarpet (~> 3.1) + pathutil (~> 0.9) + rouge (>= 1.7, < 4) safe_yaml (~> 1.0) - toml (~> 0.1.0) - jekyll-coffeescript (1.0.1) + webrick (>= 1.0) + jekyll-avatar (0.8.0) + jekyll (>= 3.0, < 5.0) + jekyll-coffeescript (1.2.2) coffee-script (~> 2.2) - jekyll-gist (1.3.5) + 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-sass-converter (1.3.0) - sass (~> 3.2) - jekyll-watch (1.3.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-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.9.0) - liquid (2.6.3) - listen (3.0.5) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - mercenary (0.3.5) - parslet (1.5.0) - blankslate (~> 2.0) - posix-spawn (0.3.11) - pygments.rb (0.6.3) - posix-spawn (~> 0.3.6) - yajl-ruby (~> 1.2.0) - rb-fsevent (0.9.6) - rb-inotify (0.9.5) - ffi (>= 0.5.0) - redcarpet (3.3.3) - safe_yaml (1.0.4) - sass (3.4.19) - toml (0.1.2) - parslet (~> 1.5.0) - yajl-ruby (1.2.1) + jemoji (0.13.0) + gemoji (>= 3, < 5) + html-pipeline (~> 2.2) + jekyll (>= 3.0, < 5.0) + json (2.10.1) + 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.6.6) + mercenary (0.3.6) + 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.25.4) + net-http (0.6.0) + uri + nokogiri (1.18.9) + 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 (5.1.1) + racc (1.8.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) + rexml (3.4.1) + 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.0.3) + webrick (1.9.1) PLATFORMS ruby DEPENDENCIES - jekyll (= 2.4.0) + github-pages + +BUNDLED WITH + 2.6.5 diff --git a/README.md b/README.md index e3d82ea6..a6741064 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -This is the source code for +This is the source code for ## Getting started @@ -8,10 +8,10 @@ indicated in `.ruby-version`, as well as the [bundler](https://bundler.io/) gem. 1. `bundle install`, which will install Jekyll 2. `bundle exec jekyll serve --watch` -3. go to +3. go to -(*you could also use your favorite manager, `chruby`, `rbenv`, `rvm`, etc. See -intructions for `rvm` at the end of this README*) +(*you could also use your favourite manager, `chruby`, `rbenv`, `rvm`, etc. See +instructions for `rvm` at the end of this README*) If you are just updating or adding new tutorials, follow steps 1 to 3 only. @@ -41,7 +41,7 @@ You can go to the general [codebar Slack channel here](https://codebar.slack.com dedicated [tutorials channel here](https://codebar.slack.com/messages/tutorials/). Use it to get in touch and chat to other codebar students/coaches, or if you need help. -If you are not on Slack use [this link](http://codebar-slack.herokuapp.com/) to get an invite. +If you are not on Slack use [this link](https://slack.codebar.io/) to get an invite. ## Contributing @@ -117,15 +117,15 @@ And you're done. Commit and push as usual. # RVM -Another way of installing the project depdendencies is via [RVM](https://rvm.io/rvm/install). +Another way of installing the project dependencies is via [RVM](https://rvm.io/rvm/install). Follow the [quick installation guide](https://rvm.io/rvm/install#quick-guided-install) and then run: ```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 +$ jekyll serve # go to http://127.0.0.1:4000/ ``` If you also want to make changes to the JavaScript of the site, you'll need to have diff --git a/_config.yml b/_config.yml index 54b3ccd3..f32a2c37 100644 --- a/_config.yml +++ b/_config.yml @@ -8,7 +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/_includes/post/sharing.html b/_includes/post/sharing.html index f0f9b9db..06d68868 100644 --- a/_includes/post/sharing.html +++ b/_includes/post/sharing.html @@ -1,6 +1,6 @@ diff --git a/examples/github-user-finder/index.html b/examples/github-user-finder/index.html index 0ec9bc03..9effba43 100644 --- a/examples/github-user-finder/index.html +++ b/examples/github-user-finder/index.html @@ -7,7 +7,7 @@
- +
@@ -20,7 +20,7 @@

diff --git a/examples/hangman-canvas/index.html b/examples/hangman-canvas/index.html index d8c0cf8d..6d74602c 100644 --- a/examples/hangman-canvas/index.html +++ b/examples/hangman-canvas/index.html @@ -7,7 +7,7 @@
- +
@@ -16,7 +16,7 @@
diff --git a/examples/hangman/index.html b/examples/hangman/index.html index 583b5660..ea379876 100644 --- a/examples/hangman/index.html +++ b/examples/hangman/index.html @@ -7,7 +7,7 @@
- +
@@ -28,7 +28,7 @@
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/examples/tv-schedule/index.html b/examples/tv-schedule/index.html index cff2a90d..4622124c 100644 --- a/examples/tv-schedule/index.html +++ b/examples/tv-schedule/index.html @@ -7,7 +7,7 @@
- +

What's on TV tomorrow?

@@ -17,7 +17,7 @@

What's on TV tomorrow?

diff --git a/examples/wishlist/index.html b/examples/wishlist/index.html index 84133e7b..a8a2664f 100644 --- a/examples/wishlist/index.html +++ b/examples/wishlist/index.html @@ -8,7 +8,7 @@
- +

Wish List

@@ -21,7 +21,7 @@

Wish List

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/general/setup/how-to-use-discord.md b/general/setup/how-to-use-discord.md new file mode 100644 index 00000000..8eef7f95 --- /dev/null +++ b/general/setup/how-to-use-discord.md @@ -0,0 +1,99 @@ +--- +layout: page +title: How to use Discord for codebar +--- +# How to use Discord for codebar + +First of all, in case you missed it, you can find the invitation link to codebar's Discord server on your workshop invitation page. It should be available if you have succesfully managed to secure a spot to the workshop. + +After accepting the invitation, you should [download the Discord desktop app](https://discordapp.com/download). Even though Discord works well in the browser, it does not support video streaming which is an important aspect of the workshops and why you need the desktop client installed on your machine. + +When you open the Discord app it should look similar to the screenshot below: + +![](how-to-use-discord/image-1.png) + + +There is LOTS of information, but the most important parts are: +1. List of available channels. Unlike Slack there are 2 types of channels: Text channels (which start with a **#**) and Voice channels (which start with a :speaker:). All **text channels** are available to you but you need to switch to them to see what has been posted. When it comes to **voice channels** however, you can only be in *one* at a time. We will come back to this in a bit. +2. The text channel you are currently in. As you can see it's also highlighted in the channels list (1). +3. A list of members that are online at the moment. Clicking on one of those will open a Direct Message with that person that no-one else can see. +4. You! + +Our Discord server is available to everyone in the codebar community so there may be other people online that aren’t part of the chapter that you normally attend. Most of the channels are public too, so just like Slack, anyone can join in. There is also a small chance that another chapter will be hosting a workshop at the same time but that should have no impact on your workshop experience! Just make sure that you are looking in the workshop related channels mentioned in the section below. + +## At the beginning of a workshop + +Every virtual workshop will have two channels that you need to join, a text and voice one, and they will be named using the hosting chapter's name followed by the date e.g. a virtual West London workshop taking place on May the first 2020 should be named **virtual-west-london-2020-05-01**. When you join the voice channel, please make sure that **your microphone is muted** and keep it muted unless you need to speak or respond to any queries. Not muting creates a lot of ambient noise and makes it harder for the organisers to be heard. + +To **mute** your microphone, click on the microphone icon next to your name: + + +![](how-to-use-discord/image-2.png) + + +## Once you’ve been paired + +When being paired the organisers will allocate a coach/student for you to work with and the name of a pairing room to use. This will be announced in the workshops **voice channel** so it's important that you join it by the time posted in Slack! To join the pairing voice room you just need to click on the name of the room allocated to you (by doing so you also leave the workshop's voice room so please wait until the intro has finished or otherwise you might miss important announcements). + +Once you are in the pairing room, have a chat with your student/coach pair and decide how you would like to proceed. We suggest [continuing to use Discord](#using-the-discord-room-for-pairing) but if you are having trouble or would prefer to use another technology and you are both in agreement, feel free to do that. We would however prefer that you also stay in the Discord pairing channel so that the organisers are able to check up on how you are doing periodically and let you know when the workshop is ending. It's probably best if you mute your microphones to avoid a feedback loop. + +## Using the Discord room for pairing + +To carry on using the Discord room to pair, the student will need to share their screen. To do this, click on the TV screen that you should now see at the bottom left of the Discord app: + + +![](how-to-use-discord/image-3.png) + + +You’ll then be given the option to select what you want to share: a single application or your entire screen: + +![](how-to-use-discord/image-4.png) + + +We would suggest sharing your entire screen, so click on _Screens_ and then pick the one you want to share. Then click _Go Live_. + + +![](how-to-use-discord/image-5.png) + + +You should now be prompted with one final message dialog so you can confirm that you have selected the correct stream. Click _Go Live_ and you should now be sharing your screen! + +![](how-to-use-discord/image-6.png) + + + +If you are a coach, once your student has started to share their screen, a small red box will appear next to their name with the word _LIVE_ + +![](how-to-use-discord/image-7.png) + + +Click on the red box and a final popup dialog will show up with the option to _Join Stream_. Click that and you should be able to see their screen. + + +![](how-to-use-discord/discord-streaming.png) + + +If you are the presenter of the stream and more specifically have a slow broadband connection, you can amend the settings of the stream by clicking the _Settings_ icon in the stream overlay: + + +![](how-to-use-discord/discord-stream-settings.png) + +You will then be presented with a settings window where you can change the quality and frame rate. + + +![](how-to-use-discord/discord-stream-settings-2.png) + +## Troubleshooting + +**Having audio trouble when using Discord?** + +If you are having trouble with hearing any sound , go to your discord **Settings**, select **Voice & Video** and make sure you select a specific output device as the `Default device` option doesn't seem to pick the correct output for everyone. + +![](how-to-use-discord/amend-discord-voice-output-device.png) + +Can't find settings? Have a look at the first image of this tutorial, **Settings** is at area 4! + + +## Further questions + +If you have any questions throughout the session, feel free to post them in the workshop's text channel or if it's easier for you, pop into the workshop's voice channel. Organisers will be around throughout the session to help you out in any way they can. If you are having discord trouble, you can also direct your questions in the workshop's Slack channel. diff --git a/general/setup/how-to-use-discord/amend-discord-voice-output-device.png b/general/setup/how-to-use-discord/amend-discord-voice-output-device.png new file mode 100644 index 00000000..323476c1 Binary files /dev/null and b/general/setup/how-to-use-discord/amend-discord-voice-output-device.png differ diff --git a/general/setup/how-to-use-discord/discord-stream-settings-2.png b/general/setup/how-to-use-discord/discord-stream-settings-2.png new file mode 100644 index 00000000..40698c06 Binary files /dev/null and b/general/setup/how-to-use-discord/discord-stream-settings-2.png differ diff --git a/general/setup/how-to-use-discord/discord-stream-settings.png b/general/setup/how-to-use-discord/discord-stream-settings.png new file mode 100644 index 00000000..83665e35 Binary files /dev/null and b/general/setup/how-to-use-discord/discord-stream-settings.png differ diff --git a/general/setup/how-to-use-discord/discord-streaming.png b/general/setup/how-to-use-discord/discord-streaming.png new file mode 100644 index 00000000..a5657d31 Binary files /dev/null and b/general/setup/how-to-use-discord/discord-streaming.png differ diff --git a/general/setup/how-to-use-discord/image-1.png b/general/setup/how-to-use-discord/image-1.png new file mode 100644 index 00000000..74d79600 Binary files /dev/null and b/general/setup/how-to-use-discord/image-1.png differ diff --git a/general/setup/how-to-use-discord/image-2.png b/general/setup/how-to-use-discord/image-2.png new file mode 100644 index 00000000..79c01b49 Binary files /dev/null and b/general/setup/how-to-use-discord/image-2.png differ diff --git a/general/setup/how-to-use-discord/image-3.png b/general/setup/how-to-use-discord/image-3.png new file mode 100644 index 00000000..1cee31c1 Binary files /dev/null and b/general/setup/how-to-use-discord/image-3.png differ diff --git a/general/setup/how-to-use-discord/image-4.png b/general/setup/how-to-use-discord/image-4.png new file mode 100644 index 00000000..9fba1227 Binary files /dev/null and b/general/setup/how-to-use-discord/image-4.png differ diff --git a/general/setup/how-to-use-discord/image-5.png b/general/setup/how-to-use-discord/image-5.png new file mode 100644 index 00000000..9d5b8c0b Binary files /dev/null and b/general/setup/how-to-use-discord/image-5.png differ diff --git a/general/setup/how-to-use-discord/image-6.png b/general/setup/how-to-use-discord/image-6.png new file mode 100644 index 00000000..8aa73bb0 Binary files /dev/null and b/general/setup/how-to-use-discord/image-6.png differ diff --git a/general/setup/how-to-use-discord/image-7.png b/general/setup/how-to-use-discord/image-7.png new file mode 100644 index 00000000..e72c758b Binary files /dev/null and b/general/setup/how-to-use-discord/image-7.png differ diff --git a/general/setup/tutorial.md b/general/setup/tutorial.md index c51fcd62..d7716d7c 100644 --- a/general/setup/tutorial.md +++ b/general/setup/tutorial.md @@ -3,7 +3,7 @@ layout: page title: Setting up your computer for codebar --- -You can have a great time at codebar no matter what kind of laptop you have, but you must do a little setup before jumping in to the tutorials. You can do this at home so you can jump straight into a tutorial at codebar. Don't worry if you have trouble - your coach can help you with this if you prefer. +You will have a great time at codebar no matter what kind of laptop you have, but you may need to do a little setup before completing the tutorials. You may want to do this at home, so that during a workshop you can jump straight into following the tutorial with your coach. Don't worry if you have trouble - your coach can help you with this if you prefer. ## Somewhere to save your files (required) @@ -13,23 +13,23 @@ Programming projects are normally made up of several related files, and we hope ## A text editor (required) -Programmers use **text editors** to write code. You could use [Notepad](https://en.wikipedia.org/wiki/Notepad_%28software%29) (Windows) or [Notes.app](https://en.wikipedia.org/wiki/Notes_%28application%29) (Mac) to write code, but almost all programmers use a text editor with programming-specific features: +Programmers use **text editors** to write code. You could use [Notepad](https://en.wikipedia.org/wiki/Notepad_%28software%29) (Windows) or [Notes.app](https://en.wikipedia.org/wiki/Notes_%28application%29) (Mac) to write code. However most programmers use a text editor with programming-specific features: -- **Syntax highlighting** shows your code in different colours. This helps you spot typos and understand the structure of your code. +- **Syntax highlighting** shows your code in different colours. This helps you spot any errors, and understand the structure of your code. - **Auto-indent** helps you keep your code tidy. -- **Project navigation and tabs** help you move between the different files in your project. +- **Project navigation and tabs** helps you move between the different files in your project. - **Auto-completion** shows you keywords you could use to finish what you're typing, so you don't have to remember all the possible commands. -We recommend you use **[Atom](https://atom.io/)** at codebar. It's free, open source, and runs on Windows, Mac, and Linux. **[Sublime Text 2](http://www.sublimetext.com/)** is another popular choice. It's free to download & use for as long as you like (though it will nag you intermittently to buy it when you save your work), and it runs on Windows, Mac and Linux. +We recommend you use **[Atom](https://atom.io/)** or **[Visual Studio Code](https://code.visualstudio.com/)** at codebar. Both are free, open source, and run on Windows, Mac, and Linux. **[Sublime Text 3](http://www.sublimetext.com/)** is another popular choice. It's free to download and use for as long as you like (though it will nag you intermittently to buy it when you save your work), and it runs on Windows, Mac and Linux. ## A web browser (required) -You'll have one of these already! Windows comes with [Internet Explorer](https://windows.microsoft.com/en-us/internet-explorer/), and OS X comes with [Safari](https://www.apple.com/uk/safari/). Most Linux distributions come with [Firefox](https://www.mozilla.org/en-US/firefox/), which is also available for Windows and OS X. You can also download [Chrome](https://www.google.com/chrome/) which is a popular alternative. You can get started with whatever you currently use, but when you reach the later tutorials the powerful developer tools in Chrome and Firefox will be useful. Your coach will show you how to use them while you work through the tutorials. +Windows comes with [Internet Explorer](https://support.microsoft.com/internet-explorer), and OS X comes with [Safari](https://www.apple.com/uk/safari/). Most Linux distributions come with [Firefox](https://www.mozilla.org/en-US/firefox/), which is also available for Windows and OS X. You can also download [Chrome](https://www.google.com/chrome/) which is a popular alternative. You can get started with whatever you currently use, but when you reach the later tutorials the powerful developer tools in Chrome and Firefox will be useful. Your coach will show you how to use them while you work through the tutorials. ## A compression utility (handy on Windows) -Many of the tutorials have links to download code from Gist in `.tar.gz` format. Macs and most Linux distributions have built-in support to extract the files from these archives for you. On Windows there are a variety of utilities available. If you don't already have one, [7-zip is free](http://www.7-zip.org/). +Many of the tutorials have links to download code from Gist in `.tar.gz` format. Macs and most Linux distributions have built-in support to extract the files from these archives for you. On Windows there are a variety of utilities available. If you don't already have one, [7-zip is free](https://www.7-zip.org/). ## Ruby (optional) @@ -37,7 +37,7 @@ You won't need Ruby installed if you're working on CSS or HTML, but you will nee If you have a Mac you'll have a version of Ruby installed already. A coach can help you get started with Ruby on your Mac - ask them about `rbenv` (or `rvm`) and `Homebrew`. -You can [download and run the RubyInstaller program](http://rubyinstaller.org/) to program Ruby on Windows. +You can [download and run the RubyInstaller program](https://rubyinstaller.org/) to program Ruby on Windows. On Linux, you can install Ruby using your distribution's package manager, as follows: @@ -67,4 +67,6 @@ $ sudo pacman -S ruby ## Python (optional) -Python usually comes with your operating system. Your coach will show you how to use it to run execute Python code. +For Mac and Linux users, Python usually comes with your operating system. Your coach will show you how to use it to run execute Python code. + +For Windows users, Python will need to be installed. Your coach will show you how to install this. diff --git a/general/setup/tutorial.pt.md b/general/setup/tutorial.pt.md index 8e478202..e0ab1fca 100644 --- a/general/setup/tutorial.pt.md +++ b/general/setup/tutorial.pt.md @@ -25,11 +25,11 @@ Nós recomendamos usar **[Atom](https://atom.io/)** no Codebar. É de graça, te ## Um navegador de internet (obrigatório) -Você já tem um desses! O Windows vem com o [Internet Explorer](https://windows.microsoft.com/pt-br/internet-explorer/), e o OS X vem com [Safari](https://www.apple.com/br/safari/). [Firefox](https://www.mozilla.org/pt-BR/firefox/new/) e [Chrome](https://www.google.com.br/intl/pt-BR/chrome/) são alternativas populares. Você pode começar com qualquer um que já use, mas quando você chegar nos últimos tutoriais, as ferramentas poderosas do Chrome e Firefox vão ser úteis. Seu tutor vai te mostrar como usá-las quando vocês estiverem trabalhando nestes tutoriais. +Você já tem um desses! O Windows vem com o [Internet Explorer](https://support.microsoft.com/internet-explorer), e o OS X vem com [Safari](https://www.apple.com/br/safari/). [Firefox](https://www.mozilla.org/pt-BR/firefox/new/) e [Chrome](https://www.google.com.br/intl/pt-BR/chrome/) são alternativas populares. Você pode começar com qualquer um que já use, mas quando você chegar nos últimos tutoriais, as ferramentas poderosas do Chrome e Firefox vão ser úteis. Seu tutor vai te mostrar como usá-las quando vocês estiverem trabalhando nestes tutoriais. ## Ferramenta de compactação (importante para Windows) -Muitos dos tutoriais tem links para baixar códigos do Gist em formato .tar.gz. Os Macs tem ferramentas de apoio já instaladas para extrair os arquivos deste formato para você. O Windows tem uma variedade de ferramentas disponíveis. Se você ainda não tem uma, [7-zip é de graça](http://www.7-zip.org/). +Muitos dos tutoriais tem links para baixar códigos do Gist em formato .tar.gz. Os Macs tem ferramentas de apoio já instaladas para extrair os arquivos deste formato para você. O Windows tem uma variedade de ferramentas disponíveis. Se você ainda não tem uma, [7-zip é de graça](https://www.7-zip.org/). ## Ruby (opcional) @@ -37,4 +37,4 @@ Você não precisa instalar o Ruby se está trabalhando com CSS ou HTML, mas voc Se você tem um Mac, então já tem uma versão do Ruby instalada. O seu tutor pode te ajudar a começar com Ruby no Mac - pergunte a eles sobre `rbenv` (ou `rvm`) e `Homebrew`. -Você pode [baixar e executar o programa RubyInstaller](http://rubyinstaller.org/) para programar Ruby no Windows. +Você pode [baixar e executar o programa RubyInstaller](https://rubyinstaller.org/) para programar Ruby no Windows. 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/lesson1/example.html b/html/lesson1/example.html index ec1965c2..3cb1f23d 100644 --- a/html/lesson1/example.html +++ b/html/lesson1/example.html @@ -16,10 +16,10 @@

Why do I like owls so much?

  • they are adorable
  • and lovely
  • and cuddly
    • +
    cute owl
    another cute owl
    Watch this video here -

    "A wise old owl sat on an oak; The more he saw the less he spoke;
    The less he spoke the more he heard; Why aren't we like that wise old bird?" diff --git a/html/lesson1/example.pt.html b/html/lesson1/example.pt.html index e33e1253..f3db5931 100644 --- a/html/lesson1/example.pt.html +++ b/html/lesson1/example.pt.html @@ -17,10 +17,10 @@

    Porque nós gostamos tanto de corujas?

  • elas são adoráveis
  • e amáveis
  • e apertáveis
    • +
    Assista o vídeo -

    "Uma coruja sábia e anciã pousou em um carvalho; Quanto mais observava, menos falava;
    Quanto menos falava, mais ouvia; Por que não somos como a coruja sábia e anciã? diff --git a/html/lesson1/tutorial.md b/html/lesson1/tutorial.md index a29ad3b6..f7a44b99 100644 --- a/html/lesson1/tutorial.md +++ b/html/lesson1/tutorial.md @@ -18,7 +18,7 @@ In this tutorial we are going to look at: ### Goal -By the end of this tutorial you will have built [this webpage.](http://codebar.github.io/tutorials/html/lesson1/example.html "I love owls") +By the end of this tutorial you will have built [this webpage.](https://tutorials.codebar.io/html/lesson1/example.html "I love owls") #### What is HTML? @@ -250,8 +250,8 @@ Add this underneath the ordered list about why we like owls. ## Formatting text -We can also **emphasise** or make text *important*. -For emphasis we use `` and for importance `` +We can also *emphasise* or make text **important**. +For emphasis we use `` and for importance `` Let's emphasise some of the content of your paragraph @@ -272,16 +272,14 @@ One way is to use **HTML entities**. These are made up of an ampersand, a name, You can also use a numerical format to produce special characters. [Here's a list](http://htmlandcssbook.com/extras/html-escape-codes/) of some common entities. -Add a small rhyme to your page, wrapped with quotes using HTML entities. +Add a small rhyme to your page, in which the first sentence says "The Owl & the Pussy-cat" instead of "The Owl and the Pussy-cat" using HTML entities for the ampersand: `&`. ```html

    - - "A wise old owl sat on an oak; The more he saw the less he spoke;
    - The less he spoke the more he heard; Why aren't we like that wise old bird?" -     + "The Owl & the Pussy-cat went to sea
    + In a beautiful pea-green boat"

    — nursery rhyme @@ -299,10 +297,10 @@ Links can also open up a user's email client and share content. The difference b ```html ``` @@ -311,7 +309,9 @@ Links can also open up a user's email client and share content. The difference b > What happens when you click the second link? How is it different? -> What happens when you add `&body=Owls are amazing` to the second link? +> What happens when you add `&body=Owls%20are%20amazing` to the second link? + +Note that replacing spaces in the subject text with **%20** isn't essential but makes sure the spaces are kept when opening the link in a range of both new and older email clients/software. ### Commenting @@ -328,7 +328,7 @@ You can use a special kind of tag to add notes to our page that the computer wil Add a share on twitter link along with your other sharing links. ```html -Share your love of owls on twitter +Share your love of owls on twitter ``` ----- This ends our first 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) @@ -336,5 +336,5 @@ This ends our first lesson, we hope you enjoyed it and learnt something. If you ## Further reading * [HTML elements](https://developer.mozilla.org/en/docs/Web/HTML/Element) -* [Special characters](http://htmlandcssbook.com/extras/html-escape-codes) +* [Special characters](http://htmlandcssbook.com/extras/html-escape-codes/) * [The Bare Bones Guide to HTML](http://werbach.com/barebones/barebones.html) diff --git a/html/lesson1/tutorial.pt.md b/html/lesson1/tutorial.pt.md index a8bc5a38..8dff9eb2 100644 --- a/html/lesson1/tutorial.pt.md +++ b/html/lesson1/tutorial.pt.md @@ -357,7 +357,7 @@ A diferença entre os links e link de envio de email (mailto link) é o conteúd Coloque um link para compartilhar no twitter junto com outros links de compartilhamento. ```html -Compartilhe seu amor por corujas no twitte +Compartilhe seu amor por corujas no twitte ``` --- diff --git a/html/lesson2/example.html b/html/lesson2/example.html index 6bf0d305..9df9e340 100644 --- a/html/lesson2/example.html +++ b/html/lesson2/example.html @@ -51,7 +51,7 @@

    Owls:

    Email a friend
  • - Share your love of owls on twitter + Share your love of owls on twitter
    • diff --git a/html/lesson2/tutorial.md b/html/lesson2/tutorial.md index 3f0aeed6..b6f41fa6 100644 --- a/html/lesson2/tutorial.md +++ b/html/lesson2/tutorial.md @@ -6,20 +6,20 @@ 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](http://codebar.github.io/tutorials/html/lesson2/example.html). + +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,12 +43,11 @@ 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 -### Anatomy of a CSS element +### Anatomy of a CSS rule ```css body { @@ -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,13 +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. -A useful resource for figuring out color codes is [http://0to255.com](http://0to255.com). + +**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. @@ -140,7 +137,7 @@ A useful resource for figuring out color codes is [http://0to255.com](http://0to **#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 @@ -148,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; } ``` @@ -173,8 +170,8 @@ Selects the element with the id logo. ```css #logo { - margin: 0 auto 30px; - width: 200px; + margin: 0 auto 30px; + width: 200px; } ``` @@ -186,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; } ``` @@ -195,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 @@ -204,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. @@ -222,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 - + ``` @@ -253,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 @@ -278,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 @@ -293,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 @@ -353,16 +390,17 @@ 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; + display: block; } ol { @@ -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,18 +453,12 @@ ol li { .pictures li img { border: 2px solid #b9b1bf; } - -.bigimg img { - margin: 15px 2px; - width: 439px; - border: 2px solid #b9b1bf; -} ``` ### Some extra touches ```css -.bigimg{ +.bigimg { display: inline; } ``` @@ -448,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** @@ -456,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; @@ -465,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](http://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 bbdfaa6b..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.

    @@ -54,7 +54,7 @@

    Hi, I'm Ada Lovelace

    diff --git a/html/lesson3/tutorial.md b/html/lesson3/tutorial.md index 84cd708d..f949725a 100644 --- a/html/lesson3/tutorial.md +++ b/html/lesson3/tutorial.md @@ -20,7 +20,7 @@ We will also be explaining in more detail elements that we mentioned in the prev ### Goal -The page we will be building will look similar to this [example page](http://codebar.github.io/tutorials/html/lesson3/example.html "Ada Lovelace"). +The page we will be building will look similar to this [example page](https://tutorials.codebar.io/html/lesson3/example.html "Ada Lovelace"). ### Required files @@ -35,7 +35,7 @@ In the previous two lessons, we spoke about **H**yper **T**ext **M**arkup **L**a Inspectors are development tools that help you view, edit and debug CSS, HTML and JavaScript. -Developer Tools are already built into all modern browsers, whether you use [Chrome](https://developer.chrome.com/devtools), [Firefox](https://developer.mozilla.org/en-US/docs/Tools), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide), [Opera](http://www.opera.com/dragonfly/) or [Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html). For advanced users, many other tools are available as browser extensions, including the [Web Developer Toolbar](https://chrispederick.com/work/web-developer/) plugin. +Developer Tools are already built into all modern browsers, whether you use [Chrome](https://developer.chrome.com/devtools), [Firefox](https://developer.mozilla.org/en-US/docs/Tools), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide), [Opera](http://www.opera.com/dragonfly/) or [Safari](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html). For advanced users, many other tools are available as browser extensions, including the [Web Developer Toolbar](https://chrispederick.com/work/web-developer/) plugin. ![](assets/images/chrome-devtools.png) @@ -307,7 +307,7 @@ ul.social-media { Add a bottom border, to give the effect of a line, to the individual list items and tweak its dimensions -``` +```css .social-media li { border-bottom: 1px solid #b0afc0; padding: 10px; @@ -586,7 +586,7 @@ footer a { ### Bonus - Inspector -Have a look at the [example page](http://codebar.github.io/tutorials/html/lesson3/example.html "Ada Lovelace"). The heading and body of the page have some differences from the page we just created. +Have a look at the [example page](https://tutorials.codebar.io/html/lesson3/example.html "Ada Lovelace"). The heading and body of the page have some differences from the page we just created. Use the inspector to have a look at `` and `

    ` and apply these changes to your page. diff --git a/html/lesson4/example.html b/html/lesson4/example.html index 289d10b1..9388b424 100644 --- a/html/lesson4/example.html +++ b/html/lesson4/example.html @@ -58,7 +58,7 @@

    Grace Hopper

    diff --git a/html/lesson4/tutorial.md b/html/lesson4/tutorial.md index 42e8b0c2..80ffdc54 100644 --- a/html/lesson4/tutorial.md +++ b/html/lesson4/tutorial.md @@ -12,7 +12,7 @@ Today we will be building a website and learning more about CSS layouts and form ### Goal -The page we will build will look similar to this [example page]( http://codebar.github.io/tutorials/html/lesson4/example.html "Grace Hopper") +The page we will build will look similar to this [example page]( https://tutorials.codebar.io/html/lesson4/example.html "Grace Hopper") ### Required files @@ -180,7 +180,7 @@ Add an id `toolbar` to the outer `
    ` See what happens when you add a `target="_blank"` to your link ```html -
  • Computer Scientist
    • +
  • Computer Scientist
    • ``` ### Styling the toolbar @@ -228,7 +228,7 @@ The text is now really hard to see. Change the color of the link... } ``` -> Do you remember what **:hover** does? Have a quick look at **Pseudo classes** in the [previous tutorial](http://codebar.github.io/tutorials/html/lesson3/tutorial.html) to refresh your memory. +> Do you remember what **:hover** does? Have a quick look at **Pseudo classes** in the [previous tutorial](https://tutorials.codebar.io/html/lesson3/tutorial.html) to refresh your memory. ## Content @@ -429,7 +429,7 @@ Before we do some more cool things, let's add a footer to our page ```html ``` diff --git a/html/lesson5/tutorial.md b/html/lesson5/tutorial.md index c97fe477..c3249655 100644 --- a/html/lesson5/tutorial.md +++ b/html/lesson5/tutorial.md @@ -12,7 +12,7 @@ Today we will be building a website and will focus more on HTML5 and CSS3 specif ### Goal -The page we will build will look similar to this [example page](http://codebar.github.io/tutorials/html/lesson5/example.html "Anita Borg") +The page we will build will look similar to this [example page](https://tutorials.codebar.io/html/lesson5/example.html "Anita Borg") ### Required files @@ -33,7 +33,7 @@ Set her name as the title that will be displayed on the browser's bar. Anita Borg ``` -Also, set a title for your page +Also, set a heading for your page ```html

    Anita Borg

    @@ -218,7 +218,7 @@ You can set a background image to any element on your page. To do this you decla `background: url(http://github.com/path/to/image)` -You can also set multiple background images, specify their dimension, position and attachment. To set multiple backgrounds, you simple need to specify them separating them by commas. +You can also set multiple background images, specify their dimension, position and attachment. To set multiple backgrounds, you simply need to specify them, separated by commas. `background: url(http://github.com/path/to/image), url(http://github.com/path/to/other/image), ...` @@ -234,10 +234,12 @@ You can also set different properties for your backgrounds, by defining them in First let's set two background images, the first positioned on the right and the second on the left. ``` -background: url('http://github.com/assets/images/background-right.jpg') right top no-repeat, - url('http://github.com/assets/images/background-left.jpg') left no-repeat; +background: url('http://github.com/background-right.jpg') right top no-repeat, + url('http://github.com/background-left.jpg') left no-repeat; ``` +> Which element should this property be in? + By default, a background image repeats itself to fill in the container. We don't want that, that's where the **no-repeat** property we specified comes into place. Now, let's set the dimensions. @@ -329,7 +331,7 @@ p.about { ### What is an em -The name of an `em` stands for an ephemeral unit. It was originally used to describe that it was equal to the **M** character as it was commonly casted as the full-width of the square "block which are used in printing presses. +The name of an `em` stands for an ephemeral unit. It was originally used to describe that it was equal to the **M** character as it was commonly casted as the full-width of the square "block" used in printing presses. By using `em` instead of `px` to set the font-size, we are keeping it relative to the default font size. So 0.9em is 0.9 times the size that would have otherwise applied to that container. @@ -404,11 +406,9 @@ Let's make it look even better. In this part we will apply a different style to every second child element of our list. -Thanks to the following great CSS selectors, this is quite simple to do. - -`:nth-child(odd)` and `:nth-child(even)` to do that. +This is simple thanks to the great CSS selectors `:nth-child(odd)` and `:nth-child(even)`. -In our case, we only want to change the style of every odd row. Achieving that is quite simple! +In our case, we only want to change the style of every odd row. ```css .achievements li:nth-child(odd) { @@ -425,8 +425,6 @@ As you may have just noticed, we didn't define the color as we usually do, using `rgb(176, 175, 192);` is another way of defining the color with the hex code `#b0afc0` -A great way to find both the rgb and hex values of a color is [http://0to255.com](http://0to255.com). - > Try changing the last attribute of the `rgba` we just set. > What happens when you set it to 1? > What happens when you set it to 0? @@ -468,7 +466,10 @@ a.btn:hover { If we wanted to even wilder with our on hover effect we could add a rotate: -```css +```css +a.btn{ +display:inline-block; +} a.btn:hover { transform: rotate(90deg); transition-delay: 1s; diff --git a/html/lesson6/index.html b/html/lesson6/index.html index a1757049..a7ca0ead 100644 --- a/html/lesson6/index.html +++ b/html/lesson6/index.html @@ -1,120 +1,127 @@ - - - - -
    + + + Lesson 6 - Advanced HTML5 + + +
    Women programmers -
    +
    - - -
    +

    Women have always coded

    - Programming has always been women's work. + Programming has always been women's work.

    - The discipline was founded by a woman, after all. When humanity took its first halting steps into the Information Age, it needed a feminine touch. While recent revisionist efforts by masculists have emphasized the work of Charles Babbage, the reality is that he supplied only brute manipulation of matter with his mechanical device. And it didn't even work! Babbage's failures set the information age back by a century. It was Ada Lovelace who supplied the code. + The discipline was founded by a woman, after all. When humanity took its first halting steps into the Information Age, it + needed a feminine touch. While recent revisionist efforts by masculists have emphasized the work of Charles Babbage, + the reality is that he supplied only brute manipulation of matter with his mechanical device. And it didn't even work! + Babbage's failures set the information age back by a century. It was Ada Lovelace who supplied the code.

    - When the Information Age finally dawned, it was (inevitably) thanks to women's industry. The transition from textiles to text files began with punch cards and Marie Joseph's Jacquard loom. Those same punch cards echo through history to the traditional 80 character line limit today. Weaving is deeply embedded in code, and the fine motor skills needed to work thread have simply never been a masculine trait. The ancient Romans understood this; it is the goddess Minerva who watches over both weaving and philosophy. + When the Information Age finally dawned, it was (inevitably) thanks to women's industry. The transition from textiles to + text files began with punch cards and Marie Joseph's Jacquard loom. Those same punch cards echo through history to + the traditional 80 character line limit today. Weaving is deeply embedded in code, and the fine motor skills needed + to work thread have simply never been a masculine trait. The ancient Romans understood this; it is the goddess Minerva + who watches over both weaving and philosophy.

    - Women, not men, wove the core memory that landed men on the moon. This is not to diminish the clumsy heroism of the boys who risked their lives on the journey itself. They too had their contribution to make to history. But they were simply passengers, and the real triumph was getting them there at all. + Women, not men, wove the core memory that landed men on the moon. This is not to diminish the clumsy heroism of the boys + who risked their lives on the journey itself. They too had their contribution to make to history. But they were simply + passengers, and the real triumph was getting them there at all.

    +
    -
    - -
    +

    Women Programmers

    -

    Ada Lovelace

    -
    - -
    - The first analyst -
    -
    - +

    Ada Lovelace

    +
    + +
    + The first analyst +
    +
    -

    Grace Hopper

    -
    - -
    - The first programmer -
    -
    - +

    Grace Hopper

    +
    + +
    + The first programmer +
    +
    -

    Anita Borg

    -
    - -
    - Founder of Institute of Women in Technology -
    -
    -
    +

    Anita Borg

    +
    + +
    + Founder of Institute of Women in Technology +
    +
    -
    +
    + +

    Other resources

    -

    Grace Hopper - Nanoseconds

    -
    -

    Grace Hopper on Letterman

    - +

    Grace Hopper on Letterman

    +
    -
    -

    Articles

    - Hi I'm Ada Lovelace -
    - Grace Hopper -
    - Anita Borg - Where are we and where are we going. -
    - +

    Articles

    + Hi I'm Ada Lovelace +
    + Grace Hopper +
    + Anita Borg - Where are we and where are we going.
    - - - - +
    + + + - diff --git a/html/lesson6/tutorial.md b/html/lesson6/tutorial.md index fedaeda1..cee11dbd 100644 --- a/html/lesson6/tutorial.md +++ b/html/lesson6/tutorial.md @@ -98,7 +98,7 @@ We can use other attributes to control our media plays. To make music start play Today, we will be following a different approach to building our page. -You now know enough to build a complete web page from scratch. Open [our example page](http://codebar.github.io/tutorials/html/lesson6/index.html "Women in Programming"), then try to build it yourself. You should use the HTML5 elements we mentioned today and what you have learned in the previous tutorials. +You now know enough to build a complete web page from scratch. Open [our example page](https://tutorials.codebar.io/html/lesson6/index.html "Women in Programming"), then try to build it yourself. You should use the HTML5 elements we mentioned today and what you have learned in the previous tutorials. ### But before you begin... @@ -109,14 +109,14 @@ Download the files required to begin working through the tutorial from [here](ht ### Links and resources you will need ``` -Hi I'm Ada Lovelace - http://codebar.github.io/tutorials/html/lesson3/example.html -Grace Hopper - http://codebar.github.io/tutorials/html/lesson4/example.html -Anita Borg - Where are we and where are we going. - http://codebar.github.io/tutorials/html/lesson5/example.html -Grace Hopper on Letterman - http://codebar.github.io/tutorials/html/lesson6/assets/images/grace-letterman.mp4 +Hi I'm Ada Lovelace - https://tutorials.codebar.io/html/lesson3/example.html +Grace Hopper - https://tutorials.codebar.io/html/lesson4/example.html +Anita Borg - Where are we and where are we going. - https://tutorials.codebar.io/html/lesson5/example.html +Grace Hopper on Letterman - https://tutorials.codebar.io/html/lesson6/assets/images/grace-letterman.mp4 ``` -Also, don't forget to refer to the [previous tutorials](http://codebar.github.io/tutorials) +Also, don't forget to refer to the [previous tutorials](https://tutorials.codebar.io/) > Don't be afraid to ask for help from your coach. @@ -143,3 +143,27 @@ This ends our sixth lesson. How did you find learning HTML and CSS? If you have ## Extras Now that you are familiar with HTML & CSS, how about you create your own portfolio site. Think about the pages that you may include, such as home, about me and a portfolio or gallery page. You may even want to include a downloadable CV. + +## Further Reading: +### Accessibility + +Some of your users might be using screenreaders or keyboards to navigate across your page. How do you ensure your website is available to them? By following a few guidelines and integrating particular techniques. + +#### Acronyms to know: +- (ARIA) Accessible Rich Internet Applications are set of techniques and additions to HTML to allow additional markup to be interpreted by accessibility devices. +- (WCAG) Website Content Accessibility Guidelines contain different compliance levels (A, AA and AAA) and lay down the “rules” to make a website or application accessible. +- (WAI) The Web Accessibility Initiative is a part of the W3 consortium that works on accessibility standards, guidelines, rules and techniques. +- (a11y or A11Y) is an abbreviation/numeronym for accessibility. The number 11 refers to the number of letters omitted. + +#### Articles for getting started with accessibility: +- [Introduction to Accessibility](https://www.w3.org/standards/webdesign/accessibility) +- [WAI Getting started](https://www.w3.org/WAI/fundamentals/accessibility-intro/) +- [How People with disabilities use the web](https://www.w3.org/WAI/people-use-web/) +- [Tutorials](https://www.w3.org/WAI/tutorials/) +- [Mozilla have created their own Accessibility page](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) +- [ARIA Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/aria) +- 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](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/example.html b/html/lesson7/example.html index d668c7ab..e1e0da9a 100644 --- a/html/lesson7/example.html +++ b/html/lesson7/example.html @@ -52,7 +52,7 @@

    Resources

    diff --git a/html/lesson7/tutorial.md b/html/lesson7/tutorial.md index 1a80b704..e708bc99 100644 --- a/html/lesson7/tutorial.md +++ b/html/lesson7/tutorial.md @@ -12,7 +12,7 @@ Today we will be building a responsive website and learning about CSS media quer ### Goal -The page we will build will look similar to this [example page]( http://codebar.github.io/tutorials/html/lesson7/example.html "Grace Hopper") +The page we will build will look similar to this [example page]( https://tutorials.codebar.io/html/lesson7/example.html "Grace Hopper") ### Required files @@ -24,7 +24,7 @@ In the previous lessons, we spoke about **HTML5** elements which are used to put ### Getting started -Responsive web design, as the name suggests, is an approach that suggests that design and development should respond to their environment. +Responsive web design is an approach that suggests that design and development should respond to their environment. Usually, this takes the form of a design that is optimised for the width of the viewport (the width of the device that the user is looking at, be it a mobile, tablet or monitor, or even a watch!) @@ -88,13 +88,13 @@ The mobile first approach aims to provide the best possible experience for mobil ### Structure your content first -The content of your site is the important stuff! Think about what you want your users to see and do when they get to your site. Create a hierachy of content that will get your information across to your users in a way that is meaningful and cohesive. +The content of your site is the important stuff! Think about what you want your users to see and do when they get to your site. Create a hierarchy of content that will get your information across to your users in a way that is meaningful and cohesive. -In the case of our example, in order of importance, we've got the site name, the text, a list of useful offsite resources and info about the author. If we were to show these things on a mobile they'd appear in this order eg. +In the case of our example, in order of importance, we've got the site name, the text, a list of useful offsite resources and information about the author. If we were to show these things on a mobile they'd appear in this order ![](images/mobilelayout.png) -So, lets get some markup written! We're going to use our html5 elements to lay out the site so, put in a header, a section, a sidebar div and a footer with relevant class names +So, lets get some markup written. We're going to use our HTML5 elements to lay out the site so, put in a header, a section, a sidebar div and a footer with relevant class names.
    @@ -108,16 +108,16 @@ So, lets get some markup written! We're going to use our html5 elements to lay
    -This is the structure of our page. +This is now the structure of our page. ### Add in the content -Now we're ready to flesh out our structure with content. Looking at the example page, starting from the top we can see that the header contains an image and a heading, so lets put them into our HTML, with class names +Now we're ready to flesh out our structure with content. Looking at the example page, we can see that the header contains an image and a heading, so lets put them into our HTML, with class names.

    Grace Hopper

    -Next we have the copy in paragraphs interspersed with figures and a blockquote. Add this to your about section using +Next we have the copy in paragraphs interspersed with a figure and a blockquote. Add the following to your about section. And remember do not copy and paste.

    ... @@ -134,7 +134,7 @@ Next we have the copy in paragraphs interspersed with figures and a blockquote. ... -Next up is our list of resources and its title, this is going to be inside the sidebar and the HTML should look something like this (fill in the hrefs as you like) +Next up is our list of resources and its title, this is going to be inside the sidebar and the HTML should look like this (fill in the hrefs as you like).

    Resources

    @@ -146,23 +146,21 @@ Next up is our list of resources and its title, this is going to be inside the s -And finally we have the footer which will contain the author information. This will just be a p tag with an a. Give them appropriate class names eg +And finally we have the footer which will contain the author information. This will just be a `p` tag with an `a`. Give them appropriate class names eg: -

    Made by codebar.io

    +

    Made by codebar.io

    -That's our page all marked up! Woop! Take a look at it in a browser. Because of the reset css it should look pretty boring. So, let's add some styles! +That's our page all marked up! Woop! Take a look at it in a browser. Because of the reset css it should look pretty boring. So, let's add some styles. ### Mobile first styles -As the name suggests, we're going to style up the mobile design first. Later on we'll add styles for wider screens, but what we want to achieve first is a design that works great on small screen devices. +As the name suggests, we're going to style up the mobile design first. Later on we'll add styles for wider screens, but what we want to achieve first is a design that works great on small devices. For this page we're going to stack the different sections of the site into one column, this is often the choice for mobile designs, users are used to scrolling lots on their phones. ![](images/mobilelayout.png) -Open up your style.css file in your text editor. - -The first thing we're going to add is some generic styles for the page +Open up your style.css file in your text editor. The first thing we're going to add is some generic styles for the page. body { font-family: Arial, Helvetica, sans-serif; @@ -171,9 +169,9 @@ The first thing we're going to add is some generic styles for the page As far as possible we want the order that our CSS selectors come in to reflect the order of the HTML, so the first thing we're going to style is the header. -Looking at the example page we can see that the header has some padding and a background colour. The image and title are centered, which we can do with flex box the image has a 50% border radius to make it round and the title is large, bold and white. +Looking at the example page, we can see that the header has some padding and a background colour. The image and title are centered, which we can do with flex box, the image has a 50% border radius to make it round and the title is large, bold and white. -Have a go at styling these up, you can double check yours below. +Have a go at styling these up, you can compare yours with the below example. .header { @@ -197,11 +195,11 @@ Have a go at styling these up, you can double check yours below. 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 inspect tool -Click on the icon in your inspect tool to open up the device toolbar. This view will show you what your site will look like on a mobile device, it has a few different options for default device widths, or you can set it to responsive and drag the width and height about yourself. For now we'll set it to responsive and drop the width down to about 320, this is a very narrow screen. +Click on the icon in your inspect tool to open up the device toolbar. This view will show you what your site will look like on a mobile device, it has a few different options for default device widths, or you can set it to responsive and drag the width and height about yourself. For now we'll set it to responsive and drop the width down to about 320, this is a very narrow screen.