Class 2: 09/5/2019
Today we are going to get more practical with HTML and practice writing it. We will also talk about learning science, start discussing responsive design and layout and take a short practice quiz.
HTML Refresher
The presentation on HTML from last week can be found here: https://www.dropbox.com/sh/2qqbhb9sb1w653n/AACjG7ORjctXlBxftA6vpKiia?dl=0
Periodic Table of HTML Elements
This is a quick reference you can use to help remember the elements http://stein-bmcc.github.io/periodic-table/
HTML Sample Quiz
We are going to take a short practice quiz. Go to Blackboard and Assignments and complete HTML Practice Quiz 1
Learning Science: Retrieval and Spacing
In this class we will learn more about the science behind how people learn and remember. There will be 6 main concepts we will cover:
- Retrieval Practice
- Spaced Practice
- Interleaving
- Dual Coding
- Elaborative Interrogation
- Concrete Examples
Today we are going to talk briefly about two of them: Spaced Practice and Retrieval Practice. You have actually already started trying them.
This web site will be one source of information for us: https://www.learningscientists.org They have downloadable materials we will reference: https://www.learningscientists.org/downloadable-materials
Here are links to information on
- Spaced Practice: https://www.learningscientists.org/spaced-practice
- Retrieval Practice: https://www.learningscientists.org/retrieval-practice
They also have a podcast named The Learning Scientists. You are welcome to subscribe, and I will generally link directly to episodes that cover the topics we’re looking at.
- Spaced Practice Podcast: https://www.learningscientists.org/learning-scientists-podcast/2017/10/4/episode-4-spaced-practice
- Retrieval Practice Podcast: https://www.learningscientists.org/learning-scientists-podcast/2017/9/6/episode-2-retrieval-practice
- Spaced Retrieval Podcast: https://www.learningscientists.org/learning-scientists-podcast/2017/10/18/episode-5-bite-size-research-on-spaced-retrieval
HTML Basic Page and Tools: Text Editors
We are going to do an in-class session where we create a basic HTML page. As we learn about the page structure we will also learn more about how to use your text editor. I will focus on Brackets today and also try to add some help for those using Sublme Text.
The goal is to create a very basic site structure with the following:
- folder for the project
- index.html file
- css folder
- main.css file in the css folder
- img folder
- js folder
Extensions
We will look at how to add extensions to Brackets. https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/04/brackets-extensions/
and Sublime Text https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/04/sublime-text-packages-extensions/
Emmet
This is a powerful extension that is available in Brackets, Atom, Sublime Text and more. We will use it to help write HTML. https://emmet.io/
DESIGN
Today we will start talking about responsive design. We are not going to get too deep into graphic/web design concepts but look at it from a high level.
Responsive checker
A quick way to see if a site is responsive is to put the URL into this page: http://ami.responsivedesign.is/
Groups
We will pair up and each pair is responsible for finding an example responsive site that is NOT made by one of the large tech companies (apple/google/facebook/amazon/Microsoft/samsung/twitter/instagram).
Boxes and Layout
We will look at how to break down the layout of these pages using boxes. Then we will look at translating those to HTML.
