Loading

Copy of 2022 - ProgTech training - HTML / CSS

Code Nation

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

Website Work
(HTML + CSS)

ProgTech - Web editing training 2022

 

Corey, Sara & Nic

@ Code Nation


 

Presentation: www.codenation.com/presentation

Activities: www.codenation.com/course

About Code Nation

  • Digital agency of designers & developers
     
  • Specialising in NationBuilder since 2014
     

Our 2021 Highlights:

 

✓ NationBuilder Themes  - Ready-made themes supporting translations into multiple languages

✓ Conservation Council of WA - Launched a beautiful action-focused website

✓ SupporterBase - Empowering volunteers to run local groups - helped Environment Vic defeat a mega-polluting gas import terminal

✓ Florida Climate Score - Interactive tool scoring politicians on climate policy

Why learn coding basics?

  1. Take your campaign digital (online RSVPs, petitions, etc.)
     
  2. Automate boring data stuff
     
  3. Make tweaks to your site when you need them
    (not when the lazy developer gets around to it)
     
  4. Find a solution ready when a rapid response is required

​Ultimately, to become a self-sufficient digital campaigner

Did someone say <code>?

Learning goals (pt 1)

  1. Add HTML structure to basic content (headings, paragraphs, links and images)
     

  2. Add simple CSS styles to basic content (colours, backgrounds and spacing)
     

  3. Edit code in your CMS (by editing a specific page/section)

Ultimate goal

World domination with your own robot army

What is HTML?

HTML = HyperText Markup Language

Markup - Structure/content of the page


Hypertext - the links used to navigate between pages

It provides the raw structure of every webpage on the internet, but virtually no styles

HTML properties

 

  1. Symmetrical
     
  2. Whitespace is ignored
    • ​​Multiple spaces and line breaks are treated the same as a single space
    • HTML tags tell the browser the structure of the content
       
  3. Attributes can be added to opening tags
    • e.g. the href on the <a href="www.example.com"> link
       
  4. Nested
    • ​​HTML tags can contain text
    • HTML tags can contain other HTML tags

HTML tags

Sections of text content are wrapped in <tags>.
This tells the browser if it's a headline, paragraph text, a link, etc.

HTML tags

Sections of text content are wrapped in <tags>.
This tells the browser if it's a headline, paragraph text, a link, etc.

<h1>Because of the h1 tag this would be a large headline</h1>

Notice the three components?

  1. The opening tag: <h1>
     
  2. The enclosed text
     
  3. The closing tag: </h1>

It's all gloriously symmetrical

HTML is symmetrical

  • All our opening tags below have matching closing tags
  • HTML allows nesting elements

HTML spacing

In the world of HTML, multiple spaces and new lines in the code are treated the same as a single space

HTML spacing

Paragraphs and other HTML tags provide the structure, including vertical space between elements

HTML attributes on opening tags

<a> 

The anchor tag <a> has a href (the URL the text should link to)

HTML attributes on opening tags

<img />

The <img /> tag has a src (the URL where the image file is hosted

HTML attributes on opening tags

<iframe>

The <iframe> tag has a src (the URL of the page to embed)

3 attributes we'll see today...

  • href (on an <a> tag)
    The URL of the link
     
  • src (on an <img /> or <iframe> tag)
    The URL of the image; OR
    The URL of the page you are embedding
     
  • style (on any tag you want!)
    We will see this in detail when we get to the section on CSS styles

Self-closing HTML tags

Self-closing HTML tags

  1. There are some self-closing tags, e.g:
    • <img /> (images)
    • <br /> (line breaks)
    • <hr /> (horizontal lines)
    • <input /> (form fields)
       
  2. These elements do not have a matching closing tag
    • This is because images, line breaks and horizontal lines can’t enclose text or other content

HTML properties (recap)

  1. Symmetrical
     
  2. Whitespace is ignored (so structure is set by <tags>)
    • ​​Multiple spaces and line breaks are treated the same as a single space
    • HTML tags tell the browser the structure of the content
       
  3. Attributes are required for some HTML tags
    • ​​Attributes can be added to opening tags
      e.g. the href on the <a> link
       
  4. Nested
    • ​​HTML tags can contain text
    • HTML tags can contain other HTML tags

IT'S A SWAN!

Exercise 1 - Basic HTML:

 

  1. Click the link for "Exercise 1 - Basic HTML" on the main exercises page: www.codenation.com/exercises. You will see a code editor with nothing but plain text.
     
  2. Your job is to use what you have learnt to turn the plain text into HTML by adding tags to the code.
     
  3. If you get stuck you can see a completed version on the next slide :)

CSS - Introduction

  • CSS stands for Cascading Style Sheets
     
  • CSS controls how HTML elements are displayed
     
  • CSS brings life to a Web page.

CSS vs HTML


 

  • HTML is for the structure


     
  • CSS is for the design, layout and variations in display for different screen sizes

CSS - example styles

  • Styles are simple pairs separated by a colon, with a property on the left and a value on the right.
     
  • For example,                       
    sets the text color
    of an element to black.
     
  • Other common examples:
color: black;

Adding CSS to your pages


You can add CSS to your HTML in three ways:
 

  1. Inline (we'll cover in exercise 2):

     
  2. Internal (we'll cover in exercise 3)




     
  3. External Linking to a separate file containing nothing but styles (aka a "stylesheet").
<h1 style="color:blue; font-size:30px;">
<style>
  * {
    color: blue;
    background-color: white;
  }
</style>

CSS - Colors

  1. Name - 140 color names supported               
     
  2. Hexadecimal colors -
     
  3. RGB colors -

 

 

Note: You can pick hex colours using an online picker like this one here.

color:#FFFFFF
color: rgb(255, 255, 255);
color: white;

Exercise 2 - Inline CSS:

  

Complete Exercise 2: www.codenation.com/exercises

 

Note: Use the American spelling of "color" and "center" when coding

 

If you are stuck ask for help (from Corey, Paddy or Sara) or sneak a glance at the answers if you need :)

Exercise 2 - Inline CSS:

  

 

CSS - External CSS

 

  • Classes are used to style HTML tags that appear multiple times on a page/site.
     
  • For example, to style all the main headings on a page, add a class to each main heading                                 and apply styles to that class:
     

 

.head {
    color: blue;
}
<h1 class="head">

Now all HTML with the class="head" will be the colour blue!
 

CSS - Classes

.main {
  font-size: 18px;
  background: blue;
}
<tag class="main"></tag>

Note that when defining the styles the CSS class name starts with a period character (.)
 

CSS Class Basics

  • All HTML tags have an "attribute" called class
     
  • This class attribute lets you tell the tag that you want to use a group of styles
     
  • To use this you must first define a group of styles and give it a name


     
  • Now you can tell the HTML to use the group of styles defined with the name "main"
<tag class=""></tag>

CSS - Internal CSS

<style type="text/css">
  .main {
    font-size: 18px;
    background: blue;
  }
</style>

<h1 class="main">My Main Headline!</h1>

CSS separate from HTML

  • When writing the styles for these classes, you need somewhere to put the CSS
     
  • The <style> tag

CSS - CSS Classes

.main {
  font-size: 18px;
  background: blue;
}

.black-text {
  color: black;
}
<h1 class="main black-text">

Multiple CSS Classes

  • When setting the class attribute in a HTML tag, you can set more than one class at the same time
     
  • To do this you put a space between the name of each class that you want the tag to use

CSS - CSS Classes

.main-heading {
  font-size: 18px;
  color: black;
}

.sub-heading {
  font-size: 12px;
  color: dark-grey;
}
<h1 style="font-size: 18px; color: black;">Main Heading</h1>
<h2 style="font-size: 12px; color: dark-grey;">Sub Heading</h2>
<h2 style="font-size: 12px; color: dark-grey;">Sub Heading</h2>
<h1 class="main-heading">Main Heading</h1>
<h2 class="sub-heading">Sub Heading</h2>
<h2 class="sub-heading">Another Sub Heading</h2>
  • The benefit of using classes comes when you have lots of tags that all use the same styles
  • They are also handy when you just want everything to be a bit easier to read!

Reusing classes

CSS - CSS Classes

h1 {
  font-size: 18px;
  color: blue;
}
  • Another useful feature of writing CSS separately is you can apply a group of styles to all tags of a certain type
  • All h1 tags will now have a font size of 18px and the text will be blue

Applying styles to tags

Note that when defining these styles there is no period character (.) at the start

Exercise 3 -

Using CSS classes:

 

  1. Complete exercise 3: www.codenation.com/exercises 
     
  2. Add colors to reveal the hidden object

 

Exercise 3 -

Using CSS classes:

 

Editing code for specific pages

 

  • Your CRM (e.g. NationBuilder, WordPress etc.) will have a feature allowing you to edit the code for specific pages (in NB it is custom page templates). This provides a great opportunity for you to practice your new HTML & CSS skills!
     
  • The next exercise will show an example of how you can do this in TinaCMS. 

Exercise 4:

HTML and CSS working together!


 

 

 

 

 

 

 

This is where everything you've learnt today comes together!

Complete exercise 4 here: www.codenation.com/exercises

 

HAPPY CODING!