Short Course

Founders and Coders

Week 1: Toolkit & HTML

Getting started

1. Sign up for a GitHub account on github.com
2. Use your GitHub account to sign up for freecodecamp.org
3. Use your GitHub account to sign up for codepen.com
4. Please read the Code of Conduct and click the button to join our short course Slack channel: foundersandcoders.com/slack
5. Please read over our Slack etiquette: github.com/foundersandcoders/slack-etiquette

Our values

Cooperative

Support for cooperative learning, cooperatively-owned businesses, and collaboration with the local community

Inclusive

Getting a more diverse group of people into tech training and into tech employment

Social Impact

Helping charities and social enterprises develop digital services

Why are we running a short course?

For two main reasons:

It aims to set prospective applicants to our full-time course on the path to completing our pre-requisites, through teaching the starter skills and technologies needed to pursue a career in web development.

The short course is also a great introduction to how we learn here at FAC, as we place emphasis on collaborative, peer-led learning, and techniques like pair programming.

What will we be learning?

The course curriculum:

Week 1

Toolkit and HTML

Week 2

CSS

Week 3

JavaScript

Week 4

More JavaScript and Codewars

There'll also be a small amount of work to take away after each session and complete at home.

What is a web page?

Ok, so what's hypertext?

Hypertext is text displayed on an electronic device that can contain references, or hyperlinks, to other information.

Kind of like this.

In fact, you're looking at a bunch of hypertext right now!

Which leads us onto...

HTML is an example of a hypertext language. It stands for: Hypertext Markup Language

Ok, I get hypertext. So what's markup?

Markup language allows us to define different elements on a page in a human-readable way.

Let's see an example...

HTML

In order to write HTML, we need to use something called tags. The text you're reading now has been interpreted and rendered by the browser, but it was written in HTML like this:

What if I want some of this text to be bold? We can use a different set of tags like so:

You'll be pleased to know that pretty much all webpages use HTML.

But that's not the end of the story!

Together, HTML, CSS and JavaScript make up the three core technologies of the web.

Some people find it helpful to think of their relationship to one another as nouns, adjectives and verbs.

HTML: Nouns 🏠

Our HTML dictates what content will be on the page. It provides our basic structure.

CSS: Adjectives 🎨

Our CSS describes how that content should look, how it should be laid out, and what styles it should have.

JavaScript: Verbs 🏃

And our JavaScript brings that content to life - it allows the user to interact with the content, providing a dynamic experience and determining the behaviour of the page.

Project 🔨

Using the HTML you've learnt, build a tribute page to someone (or something) that inspires you.

You'll need to try and satisfy the following user stories:

1. I can see the title, or header, of the page

2. I can see an image on the page

3. I can see a paragraph of bold text underneath the image

4. I can click on a link that takes me to another website

If you finish all these user stories, feel free to keep adding more elements to your page. You may want to continue with the challenges on freeCodeCamp for inspiration.