while you wait

Nicolas Feer 

Wifi: 3DK_4G-CA_WIFI-B9A2

Password: bowlings

LE wagon

Nicolas Feer 

  • Started three years ago in Paris
  • Over 1500 students
  • Present in 20 cities in 12 countries
  • 9 week bootcamp to learn how to make a web app:
    Ruby, Ruby on Rails, SQL, HTML, CSS, Javascript

GET STARTED CODING FOR THE WEB

An introduction to HTML, CSS & JavaScript

Nicolas Feer 

 workshop Outline

  1. Free tools setup‪
  2. Live-code demo (I code, you don't)
  3. Your turn (you code, I don't)

 

Ask for help when needed & have fun!

Why DIY

                                          because you can : 

  • start immediately
  • operate freely & independently 
  • test & adjust design continuously
  • add & optimize content on the fly

setup free Tools

to build a website :

  1. Install Google Chrome (web browser)
  2. Install Sublime Text 3 (text editor)

working with sublime

  1. On your desktop, create a folder named my_first_website
  2. Open Sublime Text and a new black window will be displayed
  3. Drag & drop my_first_website folder into the SublimeText window

your first website

  1. In SublimeText, right-click on my_first_website folder
  2. Add a new HTML file named index.html
  3. Add a new CSS file named style.css
  4. Open your HTML file in the browser
  5. Now don't move! You're ready to code!

Front-end languages

content
+ structure 

design

behavior

HTML is a markup language.

It structures the content of a web page.

Cause in order to design and animate its elements, 

we have to organize them first

The Internet is REAL and it's made by us.

HOW TO THINK OF HTML

  • HTML is like a blank space
  • To fill the space, you need to write something the browser understands
  • The language needs to adhere to strict rules
  • Also called code

html skeleton 

<!DOCTYPE html>












<!-- end of file -->

html skeleton 

<!DOCTYPE html>
<html>


  <!-- your content (text, images,...) 
  and all the other html tags 
  to structure this content goes here -->


</html>
<!-- end of file -->

html skeleton 

<!DOCTYPE html>
<html>
  <head>

    <!-- intelligence (meta-data) -->

  </head>
  <body>

    <!-- stuff to be displayed on your web page -->

  </body>
</html>
<!-- end of file -->

html skeleton 

<!DOCTYPE html>
<html>
  <head>
    <title>My first web page</title> 
    <!-- text appearing in the tab + used by Google in its search results -->
    <meta charset="utf-8"/> 
    <!-- to display properly the special characters -->
  </head>
  <body>

    <!-- stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

html skeleton 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title> 
    <!-- Text appearing in the tab + used by Google in its search results -->
    <meta charset="utf-8"/> 
    <!-- To display properly the special characters -->
  </head>
  <body>
    <h1>Hello buddies!</h1>

    <!-- Stuff to display in the page -->

  </body>
</html>
<!-- end of file -->

html syntax

<element_name>element_content</element_name>

opening tag

closing tag

-------------

 ---------------

html syntax

<element_name attribute_name="attribute_value">element_content</element_name>

opening tag

closing tag

 -------------------------------------------

 ---------------

html syntax

result => Le Wagon

 

QUIZ:

  • What is the element name?
  • What is the element content?
  • What are the 2 attributes (name and value)?

html elements 

<h1>[...]</h1>  <!-- Only one per page! SEO important -->

<h2>[...]</h2>

<h3>[...]</h3>

<h4>[...]</h4>

<h5>[...]</h5>

<h6>[...]</h6>
titles

html elements 

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  But the painful truth resilience at all by any law
  inventor worse for them or just leave offices
  there is nothing, which is an impediment to the time to follow?
</p>
paragraphs

html elements 

<h2>Shopping List</h2>
<ul>
  <li>Milk</li>
  <li>Butter</li>
</ul>

<h2>World Cup 2014</h2>
<ol>
  <li>Germany</li>
  <li>Argentina</li>
  <li>Netherlands</li>
  <li>Brazil</li>
</ol>
lists

html elements 

<img src="logo.png" alt="Le Wagon logo"/>
images

icons resources 

graphical icons

The Noun Project

You can get these icons both in :

  • PNG format = with a transparent background
  • SVG format = perfectly resizable and customisable! 

html elements 

<a href="http://www.lewagon.org" target="_blank">Le Wagon</a>
links

YOur TURN - HTML 

<!DOCTYPE html>

<html>
  <head>


  </head>
  <body>


  </body>
</html>

<!-- end of file -->

Setup your web page's overall html structure

YOur TURN - HEAD 

  <head>
    <title>Hello world</title> 
    <!-- text appearing in the tab + used by Google in its search results -->
    <meta charset="utf-8"/> 
    <!-- to display properly the special characters -->
  </head>

Setup your web page's head

YOur TURN - BODY 

<body>

  <h1>My playground app</h1> 
  <p>A toy app to play with HTML and CSS</p>

  
<h2>Fast</h2> 
  <p>A fast app, <strong>very fast</strong> app</p>
<img src="#" alt="quick">
     
  <h2>Simple</h2> 
  <p>A simple app, <strong>very simple</strong> app</p>
<img src="#" alt="simple">
    
  <p>This page was coded by me!</p>

</body>

Setup your web page's body

YOur TURN - NOUN PROJECT

  • Go to the Noun Project to find good images
  • Create a user if you haven't already
  • Copy the images to your project folder
  • Rename them to short self-explanatory names
  • Add them to your img tags' src attribute like so
<img src="rocket.png">

html elements 

resources

HTML ​Cheat Sheet 

HTML5 Doctor

CSS is used to add some style properties

to specific HTML elements

css power

What would this website workuper.com look like without any CSS ? 

LET'S FIND OUT!

css power

HOW TO THINK OF CSS

  • Your HTML space has now content and structure,
    it's time to make it look good
     
  • Through CSS, you have total control over
    the design and placement of all your HTML content

css link

For your CSS stylesheet to be taken into account, you need to

add a link to it in the head of the HTML document

css syntax

css syntax

css syntax

css properties 

/* syntax 1 : color name in English */

body {
  color: orange;
}
color

css properties 

/* syntax 2 : hexadecimal color reference */

body {
  color: # FFA500;
}
color

css properties 

/* syntax 3-a : RGB color reference */

body {
  color: rgb(255, 165, 0);
}
color

css properties 

/* syntax 3-b : RGBA color & opacity reference */

body {
  color: rgba(255, 165, 0, 0.8);
}
color

RGBA has a 4th parameter: opacity 

(which may vary between 0 and 1)

css properties 

color tools
  • Choose a good color scheme with Coolors
  • Add & use the ColorZilla plug-in to pick nice colors on-the-fly
  • You can pick them among the trendy flat colors

css properties 

text color vs
background color

css properties 

background image

css properties 

fonts - family (1)

css properties 

fonts - family (2)

css properties 

fonts - family (3)

css properties 

fonts - size & spacing

css properties 

fonts - color

css properties 

fonts - decoration

css properties 

fonts - alignment

GOOGLE FONTS

Google Fonts is a collection of beautiful web fonts that Google makes available for anyone for free

TEXTUAL ICONS

Font Awesome

  • A font for icons
  • Powerful for quick design decisions using CSS
  • Integrates easily into text or lists
<h1><i class="fa fa-cutlery"></i> MY RESTAURANT</h1>

Your  TURN - head  

<link href="style.css" rel="stylesheet">

Your  TURN - CSS  

body{
  margin: 0px;
  color: green;
  background: rgb(245,245,245);
}
h1 {
  font-family: courier;
  color: rgb(212,57,43);
}
p {
  font-size: 30px;
  line-height: 20px;
}

Your  TURN - CHALLENGE 

  • Change text colors to black
  • Change paragraph sizes to 16px
  • Go to Google Fonts to use:
    Montserrat for h1
    Open Sans for body
  • Use Coolors to find a nice color for h1

Your  TURN - HEAD  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Your  TURN - BODY  

<ul>
    <li>
      <a href="#"> <i class="fa fa-facebook"></i> </a>
    </li>
    <li>
      <a href="#"> <i class="fa fa-twitter"></i> </a>
    </li>
    <li>
      <a href="#"> <i class="fa fa-youtube"></i> </a>
    </li>
    <li>
      <a href="#"><i class="fa fa-pinterest"></i></a>
    </li>
</ul>
<p>This page was coded by me!</p>

css properties 

picture size & shape

html elements 

divisions and box model

Any modern website...

html elements

... is made of <div>

divisions and box model

html elements

=> structure your HTML code with <div> elements,  
to group all the contents that fits together

divisions and box model

Your  TURN - BODY  

<div>
  <h1>My Playground App</h1>
  <p>A toy to play with HTML and CSS</p>
</div>

<div>
  <h2>Fast</h2>
  <img src="fast.png" alt="A rocket">
  <p>A fast app, <strong>very fast app</strong> </p>
</div>

<div>
  <h2>Simple</h2>
  <img src="simple.png" alt="A cloud">
  <p>A simple app, <strong>very simple</strong> app</p>
</div>

Add a div around your footer too!

css properties 

the box model

CSS PROPERTIES 

syntax and shorcuts
id and class

Name your html tags

in your HTML file 

css properties 

div{
  border-top: 1px solid red;
  border-right: 2px dotted black;
  border-bottom: 1px dashed green;
  border-left: 2px dotted black;
}
borders
id and class

Name your html tags

To add some style only to :

  • a specific unique html element, use the id attribute 
  • a specific set of html elements, use the class attribute
divisions and box model
div{
  background: white;
  border: 1px solid lightgrey;
  padding: 20px;
  margin: 30px;
}

you can make the box structure more visible
by adding some CSS rules on this <div>

css properties

Your  TURN - CHALLENGE 

  • Add an id tag "header" to your header
  • Add class tags "feature" to your features
  • Add an id tag "footer" to your footer

Your  TURN - CSS 

#header {
  text-align: center;
  background-image: url("http://lorempixel.com/1300/1000");
  background-size: cover;
  padding: 150 0 500 0;
  color: white;
  text-shadow: 1px 1px 3px black;
}

.feature {
  padding: 50px;
  font-weight: 300px;
}

Check out our free online track

Go to lewagon.com/learn/copenhagen and learn much more about coding for free!

See you soon!

Stay in Touch:

Twitter - Meetup - Facebook

lewagon.com/copenhagen

Made with Slides.com