Website Work
(HTML + CSS)

OrganiseUs - Digital Intensive 2020

Corey & Viviana & Jo

@ Code Nation

Presentation: www.codenation.com/presentation

Exercises: www.codenation.com/exercises

Who are we?

About Code Nation

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

Why learn coding basics with NationBuilder?

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

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 NationBuilder:

   • A) through the WYSIWYG

   • B) by creating a custom page template

   • C) by customising the theme for the whole site

Extension goals (pt 2)

1. Include extra features on your pages, for example:

   • the snippets listed here: www.codenation.com/snippets

   • Facebook page widgets or Twitter timelines
      

2. Creating a custom theme and customising the colours to suit your team's brand

Ultimate goal

What is HTML?

HTML tags

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

Notice the three components?

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

HTML spacing

In the world of HTML, multiple spaces and line breaks are treated the same as a single space

HTML properties

1. Symmetrical
    
2. Whitespace is ignored
   • ​​Multiple spaces and line breaks are treated the same as a single space
      
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 attributes on opening tags

• <a> has a href (the URL the text should link to)
• <img /> has a src (the URL where the image file is hosted)
• <iframe> has a src (the URL of the page you are embedding)

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

• We're handing out a piece of paper to each of you
• For now, just pay attention to the big HTML tag on the front
  (the back explains what your tag does)
• You will either have an opening <tag> or closing </tag>

1. In that activity you will have seen that there were some self-closing tags, e.g:
   • <img /> (images)
   • <br /> (line breaks)
   • <hr /> (horizontal lines)
      
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
   • ​​Multiple spaces and line breaks are treated the same as a single space
      
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 :)

ANSWER - Exercise 1

CSS - Introduction

• CSS stands for Cascading Style Sheets
   
• CSS controls how HTML elements are displayed
   
• HTML is for structure
   
• CSS is for sexiness.

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 examples:

Adding CSS to your pages

You can add CSS to your HTML in three ways:
 

1. As inline styles (covered in exercise 2):
   
    
2. Using a                          block (covered in exercise 3)
    
3. Linking to a separate file containing nothing but styles (aka a "stylesheet").

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, Viviana or Jo) or sneak a glance at the answers if you need :)

Exercise 2 - Inline CSS:

CSS - Using Classes

• 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:
   

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.

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:

HTML in NationBuilder

NationBuilder Content editor or WYSIWYG

(What You See Is What You Get), pronounced "Wiziwig"

HTML

If you click the HTML button in the WYSIWYG you can see the code automatically added.

Exercise 4:

Creating a new basic page in NationBuilder
 

1. Complete exercise 4 here: www.codenation.com/exercises
    
2. Navigate to the "Content" tab and click the code button "<>"
    
3. Copy the code from Exercise 2 and paste it into the editor.
    

You just coded your first webpage!
 

Challenge: Add new HTML tags and CSS styles in the editor then open the live link in a new tab to review the final product.

Custom page templates

1. NationBuilder allows us to create custom page templates so you can edit the code for a single page without worrying about breaking other pages on the site.
    
2. You can add extra plugins, embeddable widgets or any of these code snippets directly to your page templates: http://www.codenation.com/snippets

Exercise 5:

Using some existing snippets
https://www.codenation.com/exercises

1. Navigate to the template tab on your new basic page and click "Create a custom template"
    

2. Choose a snippet from the list at codenation.com/snippets, then follow the link and copy the code.
    
3. Return to the template of your page and paste the snippet code at the very bottom
    
4.  Click "Save and publish changes" then review the live page

Exercise 6:

Create a custom theme and edit the primary colours
 

1. Complete the task here: codenation.com/exercises
    

2. Customise your site using the Candidate theme docs. See what is possible with the full theme here

HAPPY CODING!

Liquid

1. Liquid is an extension of HTML
    
2. Liquid allows us to:
   • Make websites dynamic by showing content from WYSIWYG editors.
   • Add simple conditional logic (e.g. “Sign up below” for visitors, “Thanks for joining” for returning supporters).
   • Repeat a section of HTML (e.g. once per post). This avoids having to duplicate code. Write it once and liquid will show that section on the page once for each post.
      
3. All liquid is highlighted green or yellow in the code editor when viewing a custom page template in the backend of NationBuilder