TMW Code Club

TMW Code ClubWeek 1: HTML and CSS – The basics

TMW Code Club

Welcome

Welcome!

TMW Code Club

What do you know?

TMW Code Club

The plan (vaguely)

Weeks 1 and 2 The basics of HTML and CSS

!

Week 3 onwards Look at specific elements of HTML and CSS and do more

hands-on coding in between sessions

Welcome!

TMW Code Club

Week 1 HTML and CSS – The basics

• Structuring a HTML file • What is a HTML tag? • Linking HTML and CSS

Welcome!

TMW Code Club

HTML, CSS, JavaScriptWhat’s the difference?

Content Styling BehaviourText, images, video Colours, borders,

backgrounds, shadowsClick, touch, scroll, hover

So what is the difference between HTML, CSS and JavaScript? !HTML defines the content you will display on a page. !CSS styles that content in whatever way you specify. !JavaScript let’s you create behaviours – such as what happens on hover or click events, or when someone scrolls the page.

TMW Code Club

HTMLHyperText Markup LanguageContent is tagged with

HTML elements (also known as HTML Tags)

Most of what you see in a browser is fundamentally described using HTML. !HTML is fundamentally made up of content that is ‘marked up’ using HTML elements (also called HTMLTags). !HTML is used to identify content, not to style it.

TMW Code Club

HTML5 = HTML

Also, it’s worth pointing out that HTML5 is simply HTML. !HTML5 was simply the latest version of HTML, so it introduced new tags and features, but it is still essentially HTML.

This is a web page when viewed without any CSS. !Essentially, it is just a load of content displayed on the page. !Each of these bits of content is wrapped in a HTML tag. Lists will have a list tag, images are defined using img tags

Tags can reference• Headers

• Subheaders

• Images

• Paragraphs

• Lists

• Links

• Videos

These are just a few examples of what tags can reference in your content

TMW Code Club

Structure of an HTML file

codepen.io/dragongraphics/pen/FfCDx

What you see here is the browser’s default styling, which looks boring.

TMW Code Club

CSSCascading Style SheetsContent is styled with CSS

All content is styled with CSS. Think of it like skin and makeup that covers the bones of HTML. !CSS is what we use to style colours, font-sizes, layout and much more, like animations and transitions. !!!

TMW Code Club

What does CSS look like?

Its a simple, declarative language. Give it a selector and add properties to that to change them. !We override the browser’s default styles !Use American spellings

TMW Code Club

Let’s try some out

codepen.io/mrmartineau/pen/Bkcbn

What you see here is the browser’s default styling, which looks boring and simple. !Let’s try improving it a little

TMW Code Club

Thanks

In terms of post event, I’d look to build on top of the already good foundations of last year and grow that up. !I think our internal knowledge sharing last year was good.