View
457
Download
0
Category
Preview:
Citation preview
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
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.
HTML
CSS
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> <!-- meta tags, title, link tags --> </head>
<body> <!-- all content visible to users --> </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
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 Floridammcadams@jou.ufl.edu
Twitter: @macloo
Recommended