OVERVIEW + HTML
WE HAVE TWO "SHORT" LESSONS THIS MORNING
OVERVIEW + HTML
CODING IN THE MOVIES...
What is coding?
CODING IN REAL LIFE...
IT'S NOT LIKE THIS.
Where does HTML come in?
SO, WHAT IS CODING?
THEN ADD CONTEXT
CSS is appearance
WHEN YOU BUILD A HOUSE...
choose your flavour
TOO MUCH CSS
<p>This is normal text surrounded by an HTML tag .</p>
A closing tag has a forward slash.
This whole thing is an HTML element.
How does HTML work?
These are called angle brackets
Text inside of angle brackets is an HTML tag.
Everything else is just text.
There are many types of HTML elements, including:
<SECTION>, <HEADER>, <STRONG>, <FOOTER>
EACH ELEMENT HAS ITS OWN SPECIFIC ROLE
Let's LOOK AT SOME CODE
<h1>Don Burks</h1> <section> <p><em>Bio:</em> Head Instructor of Lighthouse Labs</p>
<p><em>E-mail:</em> firstname.lastname@example.org</p> </section>
<h1> : Defines a heading on the page.
<section> : Creates a section of related content.
<em>: Emphasizes text (e.g. italicize it).
<p> : Creates a paragraph of text.
We've learned about tags and elements.
How do we write code?
LEt's take a look at ATOM
Here's a normal header element:
The src attribute is how we get CAT PICTURES
Used within the < img > element
let's change gears
HTML defines the elements on a webpage
CSS defines the design of those elements.
Structure: Remember our house's scaffolding?
Defining block of content that should go within another block, etc.
Design: Our house's paint and decor.
How those blocks should actually look:
what colour they are, how big they are, etc.
browsers already have css
CSS is a two-step process
1. It targets an element on a page.
2. It applies styles ("properties") to it.
Common CSS properties include:
color, font-size, text-align
NOW LET'S CREATE THE CSS
DIVING DEEPER INTO THE CSS
What does an ID do?
how do you Add an id?
okay, what about in css?
When we start a selector with a pound-sign,
we tell CSS to target elements with a given id:
ID vs class attribute
how do we visualize classes?
What else can you do with css?
But what about interactivity?
used in combination
with html5 & css3
without js we wouldn't have ...
What ELSE CAN
YOU DO WITH
html & css?
not just for the web
We learn to
What it takes
where do i go AFTER TODAY?
FREE(ISH) ONLINE TOOLS
The best way to learn is:
IT'S NORMAL TO ENCOUNTER BUGS.
RUBBER DUCK DEBUGGING
AFTER YOU're DONE YOU
can publish your page
GET READY TO PAIR UP
By Iskender Piyale-Sheard