01 The Pure and Clean Web: HTML and CSS

About

Folks will tell you often, to use pure markup, pure HTML, or pure CSS, so in other words - avoid JavaScript. Since the language is TIMTOWTDI (read: Tim Towdy), broken, dangerous etc.

TIMTOWTDI

Perl’s motto, There Is More Than One Way To Do It, illustrates that you can do even most simple thing in many ways. In fact, some say, too many (that’s why Python goes with something quite opposite).

JS is a powerful language, but you hardly can find common guidelines and Perl’s approach is prevalent here as well. So, for simplicity, we’ll start without it. Leaving the scares aside, there is indeed a lot you can do with just HTML and CSS (or mainly CSS, as Dave Shea’s ZEN Garden presents). And it leaves out a lot of complexity. So, let’s have it. The clean 🍀 and pure 💧 way of true World Wide Web 🌐 - ™. ;-P

CSS Zen Garden

website by Dave Shea and many glorious others, where CSS power is shown. Each version of the website has same markup, but looks WILDLY different: http://www.csszengarden.com/

ℹ️	all exercises are on their own dedicated page

HTML

HTML

HyperText Markup Language. Created by sir Tim Berners-Lee with several inspirations, including lesser known book Garden of Forking Paths. Initially for scientist, to easily follow citations and sources of papers.

HyperText

more than text, text enriched with multimedia content and able to encompass other texts within. Nesting is done through relations.

Relation

link between two things, people, documents, files…​ Concept that was built into web, though never took off as intended. You can find it in CSS (link rel).

We will cover HTML4 and 5, along with several good practices and layouts.

HTML4

Topics to know / understand:

• What is HTML

• How is HTML4 different from others

• How to migrate from HTML4

• Doc types in HTML4

• HTML4 "new" tags

• Tag categories or on element types

• Working with text

• Working with forms

• Working with frames and problems there

💡	Reading: HTML 4 spec from W3C "New" tags with short explanation

Good HTML skeleton

• HTML template for new page

• MIME types

• Good header

• Meta information about page

• What will happen if you do it wrong

Good header, good minimal document, order of items there, how to load scripts…​ These questions have been asked before and got a number of answers. Peruse them and learn at your own leisure:

1. Order of elements in the head tag

2. Charset

3. Good skeleton

❗

How the browser knows WHAT it is to display? Aka, MIME types. Browser is given content, and *somehow* it knows what that content is. How it knows if it’s an image, a text or a binary? Read, and find out, but be aware that most of links here deal with FF. Different browser will be - well - different. MIME types How FF handles files Cannot open text/something as text/something, it opens as text/plain Add-on for previous problem

ℹ️

Questions Please, find in the materials above answers to following questions: What governs a good header? What are conditional elements? Why is X-UA element needed in header sometimes? What are meta tags for? How can we see the headers of a given page? What happens if you just create a html file with Hello inside and send it to browser? What happens if your markup is malformed? How can you verify markup correctness? What is a minimum document that will be rendered as HTML? If I change the extension to something else, what will browser render? How can I set character encoding? If I set character encoding, is it enough? Is character encoding case sensitive or not? How can I set language? How can I support internationalization in HTML?

HTML 5

Introducing new tags and capabilities, adding audio, video, graphics, slew of semantic tags and LOTS of form goodies, HTML5 revamps HTML greatly and makes most layouting work much easier and fun.

💡	Excellent (and obligatory) reading material: http://diveintohtml5.info

ℹ️

Questions Common HTML5 questions are similar (or identical) to previous ones: Any changes to minimum HTML document? Or a good header? Or doctype? What new things HTML5 brings? What is insert HTML5 feature or tag here? How it works? Where would you (not) use it? I have an HTML4 document, can I migrate? How? Caveats? HTML5 or native apps, which to choose? Not covered yet, but there’s dedicated page, slowly filled out What happens if you just create a html file with Hello inside and send it to browser? What happens if your markup or doctype is malformed? How can you verify HTML5 markup correctness? HTML4.01 was like XHTML1. Which XHTML is equivalent to HTML5? Which browsers support which HTML5 feature?

ℹ️	Advanced features of HTML5 (everything else than semantic tags and form goodies) are best covered after some JS is known, so we’ll cover them later.

🔥	Favicon topic: https://mobiforge.com/design-development/adding-favicons-in-a-multi-browser-multi-platform-world

CSS

Once we learned to doodle, it’s time to make it ugly, shiny, unbearable, pretty. Ratio is up to you.

CSS

Cascading Style Sheets, ancillary technology for HTML, to style the markup and change it’s appearance, based on rules.

While initially you would use markup for both semantic and presentation, this was messy and hard to reason (why is this tag here, for it’s semantic or due to presentation reasons?) about, so folks decided to split: HTML for structure, CSS for look&feel.

Basics:

1. Selectors

2. Rules

3. Properties (initial, inherited…​)

4. Specificity

Specificity reading

1. Mozilla DN on it

2. Smashing Magazine

3. CSS Spec from W3C

🔥

Questions: What is a selector? Property? Value? Can you give examples? Name three types of selectors? How is class selector different from id? Can I use class and ID selector together? What is selector specificity? If I have tr, table tr, #myTr and .myTr all selecting some tr markup, with same property being set, what will happen? What’s the order of applying CSS rules? What’s the difference between table tr and table > tr, if any? How many classes may I have? If I have 100 classes, will specificity rise? What’s the difference (if any) between #some.other and #some .other?

Cascading:

1. Container

2. Inheritance

3. Default rules

4. Browser wars strike again

5. Browser vendors and their prefixes

6. Resets

🔥

Questions: What is a container? Why cascading style sheets? If I specify style on element, in head tag and via link to .css file, how will my markup look like? If I don’t specify any rule will my markup look the same everywhere? What are vendors prefixes? Why we have vendors prefixes if we have W3c? If I have animation as standard CSS, do I need to use vendor prefix for it? Elaborate why.

Where to put that thing:

1. Dimensions

2. Block or inline (or flow and phrasing)

3. Float (and clear)

4. Hiding elements

5. Measurement units

6. Box model

7. Positioning

8. Depth, or stacking elements

💡	Most important book on CSS you may read. It explains why there are 5 different box models, that display may be overwritten by formatting context, set by siblings, etc.

🔥	Questions: What is a box model? Do we have one box model? Why? Tell me about box-sizing.

Styling your text

1. Typography - what is it

2. Origin, or on machine-typing

3. What’s your medium

4. Serif or sans

5. Font families

6. Font stack