Just Enough Code

Web Design in 2016:
Just Enough Code
Mindy McAdams
University 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.

Warning
HTML, 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.

Outline
Step 1.
Step 2.
Step 3.
Step 4.
HTML
CSS
Using a text editor and managing
files; document structure
JavaScript and jQuery

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.

Memorize and Teach This
HTML 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
h1
a 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.com
Students get pretty excited
about this free site.

While the students are
playing with CSS colors,
it’s a good time to
introduce link styles.
a
affects all links on the page
a:hover
affects each link when moused over

After colors:
border
margin
padding

CSS Teaching Tips 1–4
1. 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–4
3. 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 Tip
Beginners 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 Habits
1. 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.

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

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.

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-just
and there’s a link to the fiddle,
which you can play with.

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 Code
Mindy McAdams
University of Florida
mmcadams@jou.ufl.edu
Twitter: @macloo

Just Enough Code

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Just Enough Code

Más de Mindy McAdams

Último

Just Enough Code

Notas del editor