Skip to content

Latest commit

 

History

History
122 lines (103 loc) · 9.53 KB

draft-outline.md

File metadata and controls

122 lines (103 loc) · 9.53 KB
Raw

Draft outline

This is a draft of the course. The topics we'll cover and the order. It will be established and modified based on student needs and how things are going / what people ask for as far as needing things that match the trajectory we're on.

Schedule

This schedule will be modified as we go. Look to it for what we are doing in clas that day / week. This becomes more refined as we get closer to the dates. I modulate based on needing to remediate on concepts of adding concepts based on how far we get that week.

Common issues

Before saying "it doesn't work" with web development in general, please consult this common issues document. It is the solution to 95% of the problems I've seen young web devs have when working with web components, terminal, VS code and javascript/html/css more broadly.

Past weeks

  • Week 1 & 2 - git / intro

Week 1 - The one with getting started

Tues - The one where we go through the contract

  • Welcome and syllabus day
  • Context setting what we'll be working on, learning about and the industry at large as well as establishing what brought me from the classrooms you've taken to the stage where I am today and online
  • This is a rare sit and listen day so you should be googling stuff and installing requirements for the class https://oer.hax.psu.edu/bto108/sites/ist256/requirements

Wed - between class if possible

  • https://oer.hax.psu.edu/bto108/sites/ist256/requirements - get accounts on these services
  • Install the software mentioned and bring any issues you have to class
  • If you have issues with vercel, please contact their support as soon as possible. They take awhile to respond sometimes and it will enhance your ability to see 'built' work out at live web addresses when having it.

Thurs: Get basic structure around the big 3, fundamentals and playing with stuff

  • We'll "hack" the penn state website and learn that the browser is the debugging environment
  • Play with a very watered down "web application" called the "Stupid Simpsons App"
  • Check out a code pen, a really easy way of learning HTML/CSS/JS by remixing examples of others
  • https://oer.hax.psu.edu/bto108/sites/ist256/activities/day-1

Homework

  • https://www.w3schools.com/ -- Do the "Learn HTML" tutorials (all of them, this is mostly a primer and they go quick as you start to get them)
  • Create an account on https://github.com 
  • Create accounts on the services listed here: https://oer.hax.psu.edu/bto108/sites/ist256/requirements
  • Create a PUBLIC Gist on https://gist.github.com/ called week-1.md (so that you can write markdown and practice doing so)
  • Watch this video on terminal basics: https://www.youtube.com/watch?v=cwTswuFkMH4
  • Read this common issues document (and keep it in mind going forward as it'll save us time and time is valuable!):
  • Watch the following video / have it open in another tab: https://youtu.be/DWvRV9KuTjk
  • Write responses using Markdown (Look it up if you don't know how to do it but bottom right corner in gist will have a M^ button w/ details):
    • If the question is a simple answer / response. Then make it a HEADING using markdown for the question ##
    • If the question has multiple responses (like 5 syntaxes) then make the question a HEADING level 2, but the responses using a bulleted list (look this up)
    • If you end up adding a code sample, use the ``` three back ticks syntax in order to show the code in a block.
  • Questions to answer
    • Was the backend or frontend responsible for the bug in the video?
    • What languages do you see in this video? List ALL of them. If you're not sure what the language is, but you know there's an additional one, indicate that.
    • What tools, strategies, and workflows used in the video do you think are common across all web development?
    • What strategies used in the video help with debugging?
    • What strategies have you used before that are shown here for debugging?
    • What tools and approaches used in the video do you think help in quality control / quality assurance?
    • What are 5 syntaxes / pieces of code shown you DO recognize (could be of any scale or size), time stamp (link) or screenshot it and list what they are them. (screen shots can be drag and dropped into the comment area below your gist)
    • What are 5 syntaxes / pieces of code shown you DON'T recognize, time stamp (link) or screenshot it and list what they are them. (screen shots can be drag and dropped into the comment area below your gist)
    • You just wrote responses to these questions in Markdown. What even is that? (insert meme here :p). What is Markdown and how is it similar, different, or related to HTML?
    • What are 3 things you CAN NOT do in markdown that you CAN do in HTML?

Submit the link to your GIST using the Cantvas HW 1 Dropbox

Week 2 - The one with Git..

Week 2: Git / Github

Tuesday

Wed between class

  • Watch this video of me solving a problem and the full end to end pipeline with github and process: https://www.youtube.com/watch?v=oc7sNh2Zisg
  • HW Part 1 listed below: do between class for discussion as well as jump starting the homework

Thursday

Homework

Two-part homework this week; we will have time in class Thurs to start and then Tues the focus will be critique via submissions generated by the class.

HW Part 1

  • https://www.w3schools.com/ -- Do the "Learn CSS" tutorials (all of them, this is mostly a primer and they go quick as you start to get them)
  • Fork this pen on codepen https://codepen.io/btopro/pen/jOJVyXN
  • Try to make more than 1 meme by duplicating the HTML portion of the code
  • Modify the text / image used in the meme on the HTML portion
  • Try to modify the font-size using the CSS tab.
  • Make a new HAX.PSU.EDU BLOG POST where you try to answer the following questions
    • Provide a Link to your fork of the codepen
    • Look at the CSS / styles; What's special about --meme-maker-font-size-medium?
    • Look at @media in styles() what does this do?
    • In the CSS area, write a selector for changing the font color on both tags. If you can change this, how did you do it? If you can't, why don't you think it is working?

Part 2:

  • here's what I made in a previous class: https://codepen.io/btopro/pen/dyrWXBp
  • Working with your pod, come up with an agreed upon visual as to how you'd conceive the following problem:

We need to make a card with a fancy button on it

  • I will model the button on the white board
  • I'll use codepen to create the button based on my model - https://codepen.io/btopro/pen/dyrWXBp
  • You are free to follow along and copy or just watch and ingest technique

Now it's your turn, kicked up a notch

  • Working with your Pod, created a shared model of a card visually based on the requirements below
  • model things after the screenshot / pen and paper copy you came up with

Required steps:

  • Create a new codepen from scratch and try to create a "card" using a mix of semantic, div and other tags to lay the card out:
  • Create a simple “card” using a few SECTION or DIV tags, a Heading for the title, a Paragraph for description of the image an IMG for an image, and a button on the card that says "Details" which links to hax.psu.edu
  • Make the image a fixed size via height / width and ensure the card is no bigger than 400px wide (height is weird in CSS, ignore height)
  • Use the Border, Margin, and padding attributes in order to space the card to visually be appealing (the internet can help influence something to model, try making things 8px and then 12, then 16 to find what you like, ratios are key)
  • Add a media query that only shows the details button when the screen is smaller than 800px (generally a small tablet) but larger than 500px (phone)
  • Add a media query that scales the card (and image / items within) when on a screen smaller than 500px (generally considered phone)
  • Create a new blog post on hax.psu.edu

Remediation

I will not verify you completing the assigned tutorials from HTML and CSS, but both are important to understand the fundamentals of the langauges and you'll ask less questions about it if you did them:

Homework Submission

Submit the link to your HAX.PSU BLOG POST in Canvas The HAX.PSU BLOG POST should include the following:

  • A link to your code pen fork from Part 1 of the meme and part 2 of the "Card"
  • Answers to the questions asked about part 1.
  • If you found particular websites helpful from a tutorial perspective on any of these specific requirements, then include them so we can share with the class.
  • If you have questioned unanswered / things you couldn't figure out from the "Card" activity, what are they?
  • a picture of the mock up you were trying to model the card off of (YOU CAN UPLOAD VIA DRAG AND DROP OR BLOCKS TAB OR MERLIN MENU AT THE TOP OF THE UI)