##GETTING STARTED
Welcome to the UXDI Front-End Week Curriculum.
This repository contains all required materials for Week 7 of UXDI, Front-End Week. Week 7 is comprised of lectures, code alongs, and exercises.
The following README document outlines how to use these materials.
By the end of the week, students should achieve the following learning objectives
###Learning Objectives
- Define and apply key front-end web development languages, like HTML, CSS, JavaScript.
- Complete a number of projects, including a responsive fashion blog, a simple marketing site, and a complete responsive site from a design comp.
- Students are not expected to end the week as proficient front-end web developers. They are learning the bare minimum in order to continue their learning in a working environment.
###Week 7 Lesson Schedule
| Day 01 | Day 02 | Day 03 | Day 04 | Day 05 |
|---|---|---|---|---|
| Introduction to Web Development | HTML & CSS | Advanced CSS | Understanding Javascript | Workshop: Building & Testing Case study Site (Example) |
| From Comps to Code: Annotating & Communicating with Developers | Workshop: Wireframing your Case Study Site (Example) | Workshop: Styling your Personal Case Study Site (Example) | Workshop: Building & Testing your Case Study Site (Example) | Presentations |
| -- | -- | -- | -- | |
| -- | -- | -- | -- |
###Preparing to Teach
We highly recommend you begin preparing your lessons before you start teaching.
When you prepare, you should:
-
Update slides for each lesson, so they match your style of teaching.
-
Review solutions and make sure you agree with the way it was coded. Keep in mind students coding level, but don't share code you don't agree with.
-
Review all curriculum materials and think about how you would like to apply your teaching style and professional experience to the classroom.
##AVAILABLE MATERIALS
We've supplied a folder for each week and lesson. In these folders we've included:
| Materials | Description | How to Use It |
|---|---|---|
| README.md | Topic break down and suggested schedule. | Use this to get a high level view of each lesson. It is meant to help you prep for the course. |
| Slides | Markdown file with slide content. | Customized the deck before sharing with students in pdf format (more on that during your on board). We suggest using reveal.js to present to the class . Keep the same folder structure so that image relative paths still work. |
| Code Along | Code to be used by instructors to help demonstrate a concept. | Type slowly and explain the concepts while students follow along with code and type their notes. |
| Exercises | Code examples to be completed without instructor guidance. | You should read the instructions and solution files. You must be able to further explain content to students. |
| Starter Code Folder | This is a folder with all the starter code students need for that lesson. | You should share this folder with students before every lesson. |
| Solution Folder | This is a folder with all solution code to code alongs and exercises | Share individual solution files as needed. Student should have code demo solutions before lab time to use as a reference. |
###How To Prepare For Each Lesson
-
Read the instructor agenda in the lesson folder.
-
Read the instructor code demo and exercise notes. Become familiar with what we would like students to accomplish.
-
View the solution file, and make sure you agree with the solutions. If you don't, change it before you share with students. Students want to feel like you are in command of all materials you share with them.
-
Decide how you will bring your expertise to the classroom.
-
Customize the deck before sharing with the class. The slides.md files we provide is a base. You need to update it and make sure it fits the story you want to tell. If you prefer not to use slides, use the markdown file to help you plan the story you will tell this class.
-
If not using the GA suggested in class labs, create your own and make sure it hits the same topics and learning objectives for that lesson. Please share your changes or new exercises with the curriculum team. We want to build the best curriculum and that can only happen with your help.
-
Practice using reveal.js. It can be tricky to get the hang of the workflow.
###Slides
-
We suggest using reveal.js with external markdown.
-
Any text following the line
Note:in a given slide will not appear in the presented deck. However, when you share the rendered markdown, students will see the notes. This is a great place to put presenter notes and additional information you would like students to read outside of class. -
See here for further documentation about Reveal.js.
The slides are a skeletal deck and require your input! If there are slides you do not agree with then update them. If you want to introduce topics in a different order, then reorder them.
##QUESTIONS
If you have any questions please send them to your local Producer or the UXDI Education Product Manager, Andre Plaut