Just Enough Code

Web Design in 2016: Just Enough Code

Mindy McAdamsUniversity of Florida

http://bit.ly/mm-just

These are files for you to use. I will refer to them throughout this presentation.

Using software tools is like this.

Using code is like this.

WarningHTML, CSS and JavaScript have all evolved over the years.

Check carefully for a date on any tutorials or examples you use (books too), and teach your students to do the same.

OutlineStep 1.Step 2. Step 3.

Step 4.

HTMLCSSUsing a text editor and managing files; document structureJavaScript and jQuery

HTMLStep 1.

https://jsfiddle.net/ A free, interactive site for experimentation, for learning the tags and how they operate.

1) Start with 4 essential HTML tags for (in order from top): a main heading, a paragraph, an image, and a link.

2) Fill each of the essential HTML tags with (respectively) a main heading, a paragraph, an image URL, and a link URL.

3) Click the “Run” command in JSFiddle.

4) View the outcome in the

JSFiddle “Result” pane.

https://jsfiddle.net/ Free, and you can save your work indefinitely.

5) Encourage students to add more HTML elements, then “Run” again to update the results.

HTML

JavaScript

CSS

Results

CSSStep 2.

Memorize and Teach ThisHTML marks up the structure of the document.Headings, paragraphs, images, links …

CSS is used to control design: all the visual effects and layout of elements.Color, margins, rules and borders, fonts ...

Tip: Start CSS with colors, and apply them to HTML elements already used.

We’re still using JSFiddle and

clicking “Run” after changes to

see results.

body refers to most of the visible page

h1a pair of h1 tags wraps the main heading at the top of the page

Beginner CSS

background sets the background color (this property can also be used for more)

color sets the foreground color only (text color)

color.adobe.comStudents get pretty excited about this free site.

While the students are playing with CSS colors, it’s a good time to introduce link styles.

aaffects all links on the page

a:hoveraffects each link when moused over

After colors:

bordermarginpadding

CSS Teaching Tips 1–41. Do not get into DIVs, HTML5 elements, or

positioning until students have experimented thoroughly with padding, margins, and borders.

2. Using borders is a great way to learn the different effects of margins and padding.

CSS Teaching Tips 1–43. Require students to look up the “CSS box

model” and create a fiddle that uses borders and explains difference between margin and padding, with visual examples.

4. Do not teach fonts until later, when the students are working with real files and not JSFiddle.

div Like duct tape, this element has thousands of uses. After a thorough workout with border, margin, and padding, have the students experiment with div tags.

One Last CSS Teaching TipBeginners and computer-science types and random self-taught coders do many bad things with CSS. There are established Web standards that professionals follow and respect.Impress this upon your students.smashingmagazine.com is a good source.

Using a text editor, managing files, document structure

Step 3.

Text editor:Atom is free, and excellent.https://atom.io

Text editor:You must not use Notepad (Windows) or TextEdit (Mac), because they don't do the right things in the right way.

Good Work Habits1. Always create a new folder for a new code project.2. Inside that folder, create three separate folders for

css, images, and scripts.3. Save all files into their proper folders.4. Do not save any project files outside that project’s

folder.

A well-ordered project

Document Structure<!DOCTYPE html><html> <head>  </head>

<body>  </body></html>

The HTML head element<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport"

content="width=device-width, initial- scale=1">

<title> Title for search engines </title> </head>

Now your students can create complete standalone documents outside a content management system. They can create a site consisting of many pages, or a single-page application for web, mobile or both.

Next Steps• Page layouts and responsive design/design for

mobile devices• Responsive images• Optimizing image file size for best

performance• Accessibility for people with disabilities

JavaScript and jQueryStep 4.

Why teach JavaScript and jQuery to beginners?

Tip: Never say "Java" when you mean JavaScript. They are not even related! Java is a completely different programming language.

HTML

JavaScript

CSS

Results

The aim is to start students with JS code they can manipulate,

change, and run, to inspire them.

The three blocks of jQuery code here each do the same thing, but each block is “listening” for a different action by the user.

The first block of jQuery code “listens” for a change in the first text field.

The second block of jQuery code “listens” for a change in the second text field.

The third block of jQuery code “listens” for a change in the third text field.

The paragraph below the three text fields changes whenever you change any of the fields and then leave it (return, enter, tab).

There is no change until you leave the field (return, enter, tab).

This jQuery example is explained in the “handout”

http://bit.ly/mm-justand there’s a link to the fiddle,

which you can play with.

http://bit.ly/mm-just

Most people learn code by looking at fairly simple scripts, playing with them, and modifying them. You don’t need to know everything to be able to do something.

Web Design in 2016: Just Enough CodeMindy McAdams

University of [email protected]

Twitter: @macloo

Just Enough Code

Education

Transcript of Just Enough Code