Draft outline of the Basic HTML/CSS Guide

freetonik commented 3 years ago

Hey @davidmerfield , below is a draft outline of the proposed HTML/CSS guide for Blot users. The goal is to quickly cover the basics and provide starting points for further self-exploration. By the end of the guide, the user should be able to make basic HTML pages with styling, and at the very least, be able to ask questions in order to learn about more advanced topics.

Let me know what you think. Thanks!

Intro
- What's a browser?
- Browser as text file viewer
- Basic HTML for styling text files
- Interactive demo in sandbox
- View source of current page, web inspector, change something and see result (instructions for 3 major browsers)
- Conclusion: HTML as styling language, browser as HTML renderer
HTML
- Structure of tags
- Attributes (examples: links and images)
- Hierarchy, embeddability rules
- Interactive demo in sandbox
- Where to look for tags (MDN, etc)
- Conclusion: HTML as infinitely growable document
CSS
- Explained via necessity for more styling
- Inline style
- <style> tag
- Interactive demo in sandbox
- Typography, accessibility, contrast
- Media queries explained via necessity for mobile/desktop responsivity
- Built-in default styling of browsers
- Conclusion: CSS as addon to HTML
Proper structure
- Full HTML5 structure
- Meta tags explained via necessity to convey hidden information to the browser (not the user)
- Larger interactive examples
Where next?
- Brief overview of layout stuff (flexbox, css grid, etc)
- Brief overview of CSS frameworks
- Brief overview of JS

davidmerfield commented 3 years ago

@freetonik Excellent, I'm in agreement with the goal for the guide.

Few more loose thoughts:

Consider settling on a cross-platform minimal text editor with HTML syntax highlighting, to recommend/require for the guide? (nothing ideal comes to mind, frankly)
As for the browser: ideally we create a system that will adjust the guide based on the browser/platform the student is using, e.g. To view source CMD+SHIFT+U in one browser vs To view source CONTROL+SHIFT+U in another. At first consider just writing the guide for say FireFox.
I don't know if it would be pedagogically correct but I like the idea of starting with an 'invalid' fragment in an HTML file, example.html like
```
This is my first webpage
```
And eventually building up with incremental explanation to something like:
```
<html>
<head><title>Hello!</title></head>
<body>
<h1>Hello, world</h1>
<p>This is <strong>my</strong> first webpage</p>
<style>
body {background: red}
</style>
</html>
```
Blot has the ability to 'write' stuff into the folder of the blog. Could we take advantage of this during the guide? Could the interactive aspects of the guide (embedded text editor / browser?) actually interact with the user's folder?
In terms of an exercise, something which would be useful to me would be to teach users how to use the developer tools to determine which styles are applied to an element, and how to edit those styles.

I would consider moving these out of the initial scope of the CSS guide into the Where next section

Typography, accessibility, contrast

Media queries explained via necessity for mobile/desktop responsivity

The ultimate goal is to excite a bit of wonder at the possibilities of the web, I suppose.

freetonik commented 3 years ago

Hi,

Consider settling on a cross-platform minimal text editor with HTML syntax highlighting, to recommend/require for the guide? (nothing ideal comes to mind, frankly)

Yeah, nothing ideal comes to mind indeed. I suppose it's safe to recommend VS Code. While not minimal, it's easy to install and works out of the box with everything needed for HTML.

As for the browser: ideally we create a system that will adjust the guide based on the browser/platform the student is using, e.g. To view source CMD+SHIFT+U in one browser vs To view source CONTROL+SHIFT+U in another. At first consider just writing the guide for say FireFox.

Good idea! Will do.

I don't know if it would be pedagogically correct but I like the idea of starting with an 'invalid' fragment in an HTML file

These are exactly my thoughts behind the Browser as text file viewer part of the outline: start with plain text, demonstrate that the browser can actually render it as is without problems, then explain why and how proper HTML structure is needed.

Blot has the ability to 'write' stuff into the folder of the blog. Could we take advantage of this during the guide? Could the interactive aspects of the guide (embedded text editor / browser?) actually interact with the user's folder?

Interesting! Something like this?:

in the beginning of the guide, logged in user can opt in to allow Blot to create "guide demo folder" in their blog
text editors are embedded throughout the guide
each text editor has as corresponding file created in user's blog
each text editor has a preview tab as well as a hyperlink to the corresponding HTML file (opens in new tab)

One problem I see is keeping text editors and files in sync. To avoid this and simplify things, alternative logic:

in the beginning of the guide, logged in user can opt in to allow Blot to create "guide demo HTML file" in their blog
text editors are embedded throughout the guide
each text editor has a "publish" button; clicking it writes the content to the demo file
each text editor has a preview tab as well as a hyperlink to the demo HTML file

In terms of an exercise, something which would be useful to me would be to teach users how to use the developer tools to determine which styles are applied to an element, and how to edit those styles.

Good idea, will incorporate this.

I would consider moving these out of the initial scope of the CSS guide into the Where next section

Agreed.

davidmerfield commented 3 years ago

VS Code sounds good
Noted regarding Browser as text file viewer – perfect! I'm not a connoisseur of intro-to-HTML courses but I do search for some every so often when someone asks me for a recommendation: I haven't come across one that tackles the Browser as text file viewer nicely. Very good
Regarding embeddable text-editor: your alternative logic proposal sounds great. One note: I definitely don't consider it a requirement for the first release. Just wanted to raise it as a potential idea down the line

davidmerfield commented 3 years ago

Seán's channel web. 101 has some interesting links on it
https://rutar.org/writing/how-to-build-a-personal-webpage-from-scratch/#an-overview-of-static-webpage-deployment

davidmerfield / Blot

Draft outline of the Basic HTML/CSS Guide #408