Tag

html Archives - CoderDojo Toronto

January 2015 – Build your first website (Ages 8-17)

By | classes

Starting in 2015, CoderDojo Toronto is moving to an objective based session format, aiming to welcome and challenge students across multiple sessions. Students will work through a set of activity cards to the creation of ‘My First Website’.

To prepare for this event, you might want to consider what type of website you want to make. Some ideas to get the ball rolling:

  • About your family
  • An issue that you care about (your community, environment, culture and society, music)
  • Highlight a collection or hobby (Embed videos or Scratch programs, archive your rare stamps)
  • Your small business
  • A website about sealife, horses, or dinosaurs 

If you know what you want to build a site about, what will it do? 

  • What pages will it have?
  • Who do you want to see this site?
  • Do you want people to be able to contact you from the site?
  • How should visitors of the site feel?
  • Do you want the visitors to complete an action on the site?

We are looking forward to mentoring you as you create your first website.

*Bitmaker Labs is a code academy for adults. It is located up a small flight of stairs. Wheelchair access is unfortunately not available at this time. Visit coderdojoto.com to download supplementary resources for use at home. Contact hi+toronto@coderdojo.ca with any questions about accessibility or if you have any questions about our session resources.

How To Learn To Code – Resources for continuing coding

By | blog, classes, tips & tricks, tutorial

What is code?

Code, in computing, is program language.

There are many different types of program languages used by different software and hardware. Just like the many human languages, program languages have rules to follow and spelling to consider. They also allow you to get creative within those rules.

Unlike human languages, different program languages can work together to create more powerful programs. Sometimes, one program language can greatly enhance another.

Before we can write our poetry with code, we must first learn some of the rules.

Web program languages

In web development, there are 3 types of languages that all do different jobs:

  1. Markup
  2. Document Object Model (The DOM)
  3. Server-side

You guessed right if you guessed that these languages work together.

Markup

Markup is what gives a web page it’s structure. HTML (or, Hyper Text Markup Language) is the old reliable champion of web markup. Every web browser is built to read HTML, though different browsers can read things slightly differently.

Think of a web page as a human body, it has different parts that do different things. Markup is like the bones.

<html>
<head></head>
<body></body>
</html>

DOM

The DOM, in a nutshell, is an object. In code, you can picture an object like a family tree. There are parents and children and grandchildren nodes, and they all have names and are unique.

The only difference here is that there will only ever be one parent.

Let’s pause and look around with Mozilla’s X-Ray Goggles tool. This tool is similar to more advanced developer tools, and it is performing an action called traversing the DOM.

https://goggles.webmaker.org/

JavaScript

Just as web browsers use the HTML standard to read markup, browsers also use JavaScript (also known (to the very nerdiest) as ECMAScript). JavaScript does an excellent job at DOM traversal, telling us information about what a user is interacting with on a web page.

It can be used to perform interactive tasks like popping up a slideshow gallery when you click a thumbnail image, or switch tabs within a web page. It can also be used to send and receive data in the background, silently, as a user interacts with the program.

Keep in mind, all things in the browser run on your computer, relying on your resources to do the work. This is known as ‘client-side’, browsers are the client.

Server Side

Server-side code gives a web page access to web server resources – this can include datestamps, access to data sources, and can perform program logic. This is often similar logic to JavaScript language, except it runs on this code is run on the web server, relying on those services to do the work.

Some examples of server side code are PHP, and Ruby. Similar languages, different manufacturers.

There is a performance trade-off coding for server vs client, tip for all the future pros in the room.

Code Lessons

HTML & CSS

http://www.codecademy.com/tracks/web

JavaScript

http://javascript-roadtrip.codeschool.com

Server Side

http://www.codecademy.com/tracks/ruby

Developer Tools

https://www.codeschool.com/courses/discover-devtools

Additional Resources