Skip to content

Latest commit

 

History

History
427 lines (424 loc) · 21.7 KB

README.md

File metadata and controls

427 lines (424 loc) · 21.7 KB
Raw

WEB-1.0-Web-Foundations

Planning

  • notes doc

  • learning outcomes rubric

  • learning objectives descriptions, mapping to topics

  • Selling from the get-go

    • Why this HTML / CSS / JS course (instead of the hundreds of others online)?
      • it's new (hence, fresh + up to date)
      • multiple modes of content
      • learning community
      • practical exercises and projects so that you build your skills
        • also focused on the concepts underneath, so you have the whole picture
      • puts the HTML + CSS + JS content into the context of a 'whole CS education'
      • Make School helps you get credit for what you learn
    • You could (and maybe should!) click through a site like https://jgthms.com/web-design-in-4-minutes/
      • And it's impressive! And you learn something
      • But - could you actually do web design after you click to the end of the page?
      • No! You have to actually practice.
      • We'll tell you the content, then give you space to practice, then tell you more stuff
      • There's other sites that do this kind of thing too
      • It's good to visit multiple sites and find what works for you
      • We have different modes, in case you prefer one or the other
    • What to expect
      • how long it will take
      • what you need to know / have on hand / experience that's expected of you
        • Reading in English
        • Computer literacy
        • Internet literacy
      • What you'll learn
        • and why it matters
      • What you'll make
      • Who you'll meet
    • Levels of Expertise
      • Progression to being an expert tends to follow these steps / phases
        • Sometimes, circling back through these phases for new skills
          • Or, if you forget knowledge
        • from the starting point, knowing nothing, through to creative mastery
          • it takes time and effort!
        • we want to align our materials with your goal: if you just want to be able to recognize what HTML is you don't need this course
          • If you urgently need to put up a site, use a site builder Squarespace, Wix, Webflow
          • If you just want to put up a blog, use Wordpress or Ghost or Medium
        • This course is for the full picture
          • theoretical underpinning: what's happening under the hood
          • practical application: exercises, hands-on
            • problem solving: debugging, recognizing and solving errors
          • creative use: actually making things that you thought of (while having guidelines and guardrails to keep you on track)
          • context: where does this knowledge fit into the bigger picture of CS, and your journey?
          • community: sharing journey with others, making friends, having mentors
          • credit and recognition: college credit, social and professional recognition of your skill
        • Knowing About vs. Knowing How
          • Knowing that bootstrap exists vs. having experience using Bootstrap
          • Knowing that CSS is for styles vs. actually using CSS to style pages
          • For core ideas, we want you to have both: knowledge about what something is, and the practical (and demonstrable) knowledge of how to use it
          • For other topics, we're just giving you knowledge about something. We want you to know that it exists, but we're not going to have exercises and projects that help you apply that knowledge. Sometimes these are related topics that offer historical context.
          • A lot of these are just pointers to huge topics, that might take a whole course on their own (some of those courses are coming soon!) We think those things are important, but also that you have to learn things piece by piece. That means this course can't cover them in depth - just indicate that they exist.
        • Practice and Memory
      • Phases
        • Recognition / Reading
          • Naming things
          • Comfort when reading syntax
          • Familiarity
          • Identification
          • Saying back / repetition
          • Prediction of what will happen from some snippet of code
        • Manipulation / Editing
          • Editing fragments of code to achieve some goal
          • Find and fix basic errors
          • Copy / paste development
        • Application / Writing
          • Applying a template creatively
          • Problem solving
          • Confident, larger-scope problem fixing
        • Independence / Building
          • creative use "from scratch"
          • comfort taking an idea, breaking it down into component pieces, and building the whole whole thing
          • knowing what's possible given a set of skills
          • knowing boundaries
          • improvisation, figuring out on the fly how to solve subproblems
          • Novel use, creative exploration, boundary pushing
    • What concepts, skills, and tools give you outsized leverage?
      • Syntax for HTML and CSS
        • key for building websites in the future
        • practice with 'learning a syntax' in general
        • recognize errors in your code - many beginner errors are syntax errors
        • comfort with the syntax means you aren't fighting it when you're reading code, or learning new elements or properties
        • gives you a framework for understanding more
      • CSS Selectors
        • while somewhat arcane, they give you a ton of power
        • there's too many properties to memorize all of them
        • but, selecting elements is always part of using CSS
        • and it's a core step to many JS tasks
      • JS basics (selecting & modifying elements, conditional statements, looping, responding to events)
        • with these in hand, you can build any website (that doesn't do server stuff)
        • they're common programming patterns that set you up well for learning other programming stuff
        • Full JS Syntax is more complicated; holding off on teaching the whole language
      • Developer tools (whichever browser)
        • Power up on learning + development process
        • See how other sites do something

  • Design considerations

    • Backwards design from the target projects
    • Slimming down from the current curriculum
    • Focus on fun and beauty
    • Acknowledge previous experience
      • Have you done any web building before?
      • How much?
      • What kinds of things do you know already, what is your experience
      • Celebration of that!
      • Now that we know that, change the language on the page to show different
      • Introduction vs. Refresher on basics
        • feel free to skip to the quiz if you think you know this stuff already!
    • Spiral the curriculum
      • HTML + CSS
      • Does this mean we can use HTML + CSS + JS on the first project?
      • Or, just, as soon as we can?

  • Encourage a project planning process

    • Projects need to be simple enough that students don't get stuck
    • Projects need enough space for creativity that students are engaged
    • Projects need to use the skills and concepts just covered (and, maybe, only those skills and concepts)

  • Use other sites to illustrate the possibilities

  • Projects and Exercises

  • Asides

    • Context and Bigger picture
      • Getting the bigger picture for what kinds of things are possible
      • Getting a bigger picture for how much there is to know, and how you'll come to know it
      • Where this knowledge fits into your bigger picture of knowledge
      • What skills do you actually need to be good at, and why
      • Graduating from 'user' to 'expert user'
        • But still, acting as the consumer of a lot of technologies - you won't, after this course, understand everything
        • That's not a reason to give up!
        • There's just a lot to learn
      • A lot of what makes a website satisfying to use comes from design and CSS
      • And, from the concept and content - not from far-out functionality
      • we're focusing on some of the basics of 'how', not on 'what' or 'why'
    • Rich text vs plain text #[[transclusion]]
      • in document editors like Word and Google Docs, when you save the file, it knows about both the content and the styles
      • in this way, the file format is "rich" - it's got it all!
      • This is nice for having an all-in-one format
      • but, it makes the files bigger
      • and if someone doesn't have the program you have, they can't view the document
      • Plain text is plain - it's just the content
      • It doesn't have the styles saved in the document
      • Instead, some other program styles and displays the content
      • Often, it does that based on some rules
      • A browser is such a program
      • a code editor is also such a program - repl.it will apply styles to highlight your code, but the actual code is just text - plain text.
      • #[[Flashcard]] What's included in a rich text document that's not included in a plain text document?
        • the styles
      • #[[Flashcard]] Do we edit HTML, CSS, and JavaScript with a plain text editor, or a rich text editor?
        • A plain text editor
    • How to get unstuck
      • terms to use on Google
      • how to evaluate snippets for whether they are any good
      • how to emotionally "deal with" the frustrating search for answers
      • how to use code you haven't written, haven't understood, or haven't seen
    • Where to learn more
      • documentation: w3 and mdn
      • other tutorials (with recommendations)
      • blogs, explanations, and code snippets
      • goal: not just copy / paste, but understand how and why things work
        • you can usually solve a problem by 'just messing with it until it works'
        • but that means you'll always be slow, and solutions to problems won't build on each other
    • Just enough about file serving to publish your website
      • Repl.it is serving your site
      • it stores your content on some computer in a datacenter
      • it serves your content to browsers that ask for it
      • What would it take to publish your site somewhere else?
        • two things are needed
          • a server to serve the files
          • a name (formatted as a url), so that a person and their browser can find that server to ask it for the files
        • replit solves these for you, by assigning the repl's name to the content, and serving your files
        • other sites can also do this for you!
          • Github Pages
          • Surge
          • Netlify
          • Now.sh
          • Firebase
          • Heroku pages
        • Or, you can have a more complicated setup
          • Cloud hosting for server (or, running your own server somewhere connected to the internet)
          • DNS for names (buying a domain name and configuring it so that the name points to your server, wherever that is)
      • What if you put up something secret on replit?
    • Why is the web like this?
      • evolved over time
      • standards bodies
      • browsers are programs too
      • balancing needs of different people
        • old websites still need to be supported
        • new websites want new features
        • developers need to be able to develop the content
        • technical constraints
          • browsers can only do certain things
          • networks can only do certain things
          • devices can only do certain things
      • The web could have used some other syntax for HTML and CSS!
      • We are, in a sense, stuck with this format, because it's what all the browsers support
      • If everyone installed a different browser, and that browser supported something else, then developers would write for that instead
      • But in another important sense, we're not stuck with writing in this format at all
      • Developers can (and do!) write programs to translate between formats
      • That way, they can write in something "easy" and then it turns into HTML underneath
      • For instance, google docs or wordpress editors still turn the content into HTML to show it to you
      • But you write as if it's rich text, instead of plain text
    • Most html that you encounter is generated
      • In this course, we're hand-writing all the html - except in some js exercises
      • that's because writing HTML by hand is super tedious and effortful
      • and of course, we can write programs to do it for us
      • Instead of having to deal with the tags yourself, the program will insert them automatically
      • Sites are often templates - the content gets inserted into a spot, but it's not hand-written for every page
      • That's how a site like wikipedia can work
    • Who uses websites?
      • people on their phones
      • people with poor network connectivity
      • people who use screen readers
      • bots and crawlers
      • Consequences for your design
        • Accessibility
          • lots of things you can do as a web developer to support people
          • accessible content: structured, named in a way that's friendly to screen readers
          • fonts, colors, and contrast so that content is easy to read
          • there's bugs in html and css!
          • but they're often hard to find and fix: usability bugs
        • Speed
          • your content takes up room in the computer's memory
          • and it has to travel over the network
          • the more space it takes up (especially over the network), the slower the site will get to the user
          • when you write javascript, the computer also has to execute it
          • unless you write a lot of slow javascript, even phones are fast enough to run a lot very fast
          • but, as an advanced topic, see how you can think about measuring how fast your site is, and making improvements that help make it faster