Objectives:
- basic teamwork
- introduction to the community
- introduce HTML, CSS & JavaScript
- introduction to the command line and git
By the end of this lessons, students will be able to:
- Locate instructional materials and have access to the Slack channel
- Identify their course goals and areas of improvement
- Identify the purpose of HTML, CSS, and JavaScript on a website
- Define the basic structure of an HTML element and a CSS rule
- Create a basic website using HTML and CSS with a text editor [Head, Body: Header, content, Footer] [h1, h2, div, nav, ul, ol, li, p] [class, id, background-color, color, border]
- Define situational awareness on the command line
- Navigate the command line by using commands such as change directory, print working direcory, and list
- Define and describe the purpose of git and github
Necessary materials:
- Laptop: prefurably Macbook Pro, or unix based operating system
- Class Syllabus
- Git
- Notebook/pen
- Text editor
- curricular guide to git basics, command line basics, website development basics
- Google form: assess student confidence
Process
- Start-up activity
- Review the course syllabus Identify where to locate the syllabus, what the course schedule it, what the expections on assignments are, grading policy
- Introduction of content
- Navigation of Treehouse
- Slack
- Sublime Text (or Atom)
- Check that everyone has all required programs downloaded and a computer to work from
- HTML and CSS introduction: instructor verbalizes what he/she is doing from sublime text. Ask questions occasionally to check for understanding and gage student engagement
- Define html and css
- Create a new html file
- Build a simple website with little content, list elements as their name,
- Add css to show what each element is created from
- Command Line Basic Commands: pwd, ls, cd, open, mkdir
- Introduce 1st assignment Creating your first website and walk through the beginning portion.
- Introduce 2nd assignment:
Homework:
- Read “25 Things Skilled Learners Do Differently” and choose one that you will use immediately. (Due by second session)
- Finish the Your First Web Page assignment
- Take this survey as a “pre-test” - a way for us to know where everybody is when they first come to class
- Do the Treehouse screencast How to make a web site (About 6 hours for all badges - take it in small chunks)
Treehouse:
- Getting started with Git (26 minutes)
- Working with Remotes (3 minutes) This is located in the Working with Remote Repositories badge
- Cloning (5 minutes) This is another video in the Working with Remote Repositories badge
- Basic Layout (CSS, 35 minutes)
- Add Image Gallery Content (6:49 minutes) This is one video in the Creating HTML Content badge
- Add New Page (8:11 minutes) This is one video in the Adding Pages to a Website badge
Assessment:
- Quiz: basic elements of html and css elements, and questions on what to do to get around on command line
References
Ducket book HTML & CSS:
- page 8 How webstes are created
- Chapter 1: Structure
- Chapter 2: Text
- Chapter 10: Introducing CSS
- Chapter 11: Color
On the web: