Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft outline of the Basic HTML/CSS Guide #408

Open
freetonik opened this issue Feb 10, 2021 · 4 comments
Open

Draft outline of the Basic HTML/CSS Guide #408

freetonik opened this issue Feb 10, 2021 · 4 comments
Labels
enhancement

Comments

@freetonik
Copy link
Collaborator

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!

  1. 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
  2. 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
  3. 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
  4. Proper structure
    • Full HTML5 structure
    • Meta tags explained via necessity to convey hidden information to the browser (not the user)
    • Larger interactive examples
  5. Where next?
    • Brief overview of layout stuff (flexbox, css grid, etc)
    • Brief overview of CSS frameworks
    • Brief overview of JS
@davidmerfield
Copy link
Owner

davidmerfield commented Feb 10, 2021 •
edited

@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
Copy link
Collaborator Author

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
Copy link
Owner

  • 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
Copy link
Owner

davidmerfield commented Apr 1, 2021 •
edited

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@davidmerfield @freetonik