Coding for Newbies

Breaking into the 21st century's most valuable career skill



PRESENTER


    KHURRAM VIRANI 
    @viranik


Co-founder, Lighthouse Labs
Co-founder, Functional Imperative




What is coding?

And what does it mean to be a coder?

CODING IN REAL LIFE VS MOVIES





Where does HTML come in?

How does it compare to CSS ?


TOO MUCH CSS



choose your flavour





How do we write code?


LET'S TAKE A LOOK AT BRACKETS

How are Webpages built?


boxes, little boxes on the hillside



How does HTML work?

<>


These are called angle brackets

Text inside of angle brackets is an HTML tag.


Everything else is just  text.

Boxes are called Elements



<p>This is normal text surrounded by HTML tags .</p>


Note how the closing tag has a  forward slash.


This forms a paragraph Element .




Example time

Let's pick apart SOME CODE

<h1>Khurram Virani</h1>
            
<p>
            
  <em>Bio:</em> Co-founder of Lighthouse Labs

  <br>

  <em>E-mail:</em> khurram@lighthouselabs.ca

</p>

<h1> : Defines a "heading 1' with large text.
<p> :  Creates a paragraph of text.
 <em>: Emphasizes text (e.g. italicize it).
<br> : Triggers a new line.



There are many types of HTML elements, including:
<SECTION>, <HEADER>, <STRONG>, <FOOTER>
EACH ELEMENT HAS ITS OWN SPECIFIC ROLE

cool ...



We've learned about tags and elements.


WHAT'S NEXT?




Nesting: CODE INSIDE OF CODE


Place an HTML element inside another HTML element. 

Previously, our <em> tags were inside our <p> tag. 

Shapes how the resulting web page is structured.






Attributes


Attributes give elements superpowers additional information.


Attributes


Attributes are placed inside an element's opening tag.

They are placed after the tag's name.

They are structured as follows:  attribute="value"

ATTRIBUTE EXAMPLE



Here's a normal header element: 

<header>I'm a sentence.</header>

Here's a header element with a title attribute:

<header  title="My Cool Header">I'm a sentence.</header>

SRC Attribute


The  src  attribute is how we get  CAT PICTURES

Used within the  <img> element

<img  src=" http://images.com/cute_kitten_charlie.jpg"> 





LESSON #2

css

HTML defines the elements on a webpage
CSS defines the design of those elements. 


Structure: 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.


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


CSS consists of rules. CSS rules are simple:

                              header  {
                                 color: green;
                              }

Just like with HTML attributes, we simply assign values to properties.

DIVING DEEPER INTO THE CSS


header  { <---- Opening curly bracket.
       text-align: center; <---- We use ":" instead of "=".
       color: green; <---- We don't put the value inside quotes.
}  <---- Closing curly bracket.

em  { <---- We're targeting all emphasized text on the page.
       font-size: 20; <---- Then we're telling CSS how to style the font-size property.
       color: blue;
}

We place groups of CSS rules one after another.




show me khurram!!

identifying elements

Problem: Targeting a specific element


Use an HTML attribute that assigns it a unique name.  

The attribute that does this is called id.

Should be unique to the page.

<p  id="welcome">Welcome to my webpage.</p>




In CSS we can now target that element using #


      #welcome  {
          font-size: 20;
          color: blue;
      }

PROBLEM: TARGETING ALL CAT IMAGES!

SOLUTION: classify them!


Use another HTML attribute that assigns it a common name.

The attribute that does this is called class.

       <img  src="kitten.jpg" class="cat">
       <img  src="tony_the_tiger.jpg" class="cat">


In  CSS  we can now target that element using . (a period)

      .cat  {
           border: red;
      }


One

MORE

TIME,

PLEASE.




What else can you do with css?


tons more

stylistic control

Gradients
Linear
Radial
Repeating Linear
Repeating Radial

Animations



Fine.

But what about interactivity?

Javascript to the rescue!



deadly when
used in combination
with html5 & css3


Example:

without js we wouldn't have ...


OR

OR





the future of html & css






it's not just for the web 

anymore!



Desktop Apps!


Brackets


    Apache Cordova / Adobe PhoneGap


Everyone

should
learn
to
code

What it takes


1. Curiosity
2. Drive
3. Persistence
4. Enjoyment



IT'S NORMAL TO ENCOUNTER BUGS.

Debugging is a natural part of writing code.

Also: Developers look stuff up ALL the time. 

#thxgoogle




What's Next?
where do i go from here?

FREE(ISH) ONLINE TOOLS




The best way to become:


tinker


&


Build stuff





Thank you


khurram virani

@viranik
LIGHTHOUSE LABS

Coding for newbies: Breaking into the 21st century's most valuable career skill

By Khurram Virani

Made with Slides.com

Coding for newbies: Breaking into the 21st century's most valuable career skill

Sunday 50 minute Workshop

  • 1,637

More from Khurram Virani