Develop Me HTML & CSS Syllabus

HTML & CSS Syllabus for Developme: This covers both the first two weeks of the fellowship and the part time evening course.

Overview

The first part is mainly based on theory lessons, learning HTML & CSS. Syntax, elements, style & layout, with supported exercises.

If exercises are not held in directories, they are on codepen (this is a much easier set up for students in the early days). Codepen account is @devmeexamples. It's worth looking through this account as there are plenty of other useful examples!

The second part is writing the templates for a multipage site. Theory includes how to approach a project, design handover, CSS methodology to structure your HTML & CSS well; we support the theory of component design and reuseable CSS

There are three categories taught in this course: HTML, CSS & Web Theory. The latter is for notes & lessons on accessibility, performance, testing, project planning & design theory.

Folder structure

• exercises Each lesson contains exercises, here you will either find the code or the instructions for the students. After the first day the exercises build on from each other.
• notes These are the students notes - see to run LaTeX to generate the pdfs for the students
• quiz There is one for each week/part, but they are held in google docs, under the instructor account. Archive any previous quiz answers and then remove them from the form before distributing to new students
• slides These are also the tutors notes. We encourage live coding over slides, however all these notes use PITCHME markdown files, so you can view as plain markdown, or run on github as a presentation (good for new tutors).

Notes for new tutors

Go through the repo - the slides folder especially. We teach in increments so you may feel valuable info is being omitted only to find it's being taught at a later stage. Don't overwhelm your students - remember you will have to lie until you can tell the truth.

If you are adding content: Choose your unit, create/modify slides, notes & exercises content as per. Things you may find useful:

• There is an example presentation in the root directory here I strongly recommend using that to create new presentations

You are responsible for filling in the feedback for students (see Mark) and also marking the weekly quizzes.

Suggested Course Structure

Feel free to mix and match the syllabus order as you see fit. This is proposed so you can keep track of where you have been and where you go next.

Order in the repo is as per category, not as per order in which you teach.

I recommend printing off the table and making notes as you go as to what you have taught & amends

If you are splitting weeks with another tutor, make sure you make them aware of any material omitted from suggested 'Part One'. 'Part Two' depends on all theory being covered in the first part.

Part One

PT	FT	Title	Lesson	Slides	Exercise	Notes
		Intro & Class Rules	Lesson	Slides
		Web Theory: General Overview	Lesson	Slides		web-theory.pdf 1.1
		HTML: Intro & Syntax	Lesson	Slides	Exercise	html.pdf 1.1
		HTML: Content Elements	Lesson	Slides	Exercises	html.pdf 2.1
		Web Theory: Assistive Technologies		Lesson
		HTML: Sectioning Elements	Lesson	Slides	Exercises	html.pdf 2.2
		Web Theory: Devtools	Lesson	Slides	Exercises	web-theory.pdf
		HTML: Media Elements	Lesson	Slides	Exercises
		CSS: Intro & Syntax	Lesson	Slides	Exercise	css.pdf 1.1
		CSS: Basic Styles	Lesson	Slides	Exercises	css.pdf 2.1
		HTML: Metadata	Lesson	Slides	Exercises	html.pdf 1.2
*	*		Go over everything we have done, organise your files and notes, remember to shut down your text editor when you do. Sit somewhere different tomorrow
		HTML: Text Elements	Lesson	Slides	Exercises	html.pdf 2.4
		CSS: Web Fonts	Lessons	Slides	Exercises	css.pdf 2.3
		CSS: Box Model	Lesson	Slides	Exercises	css.pdf
		Web Theory: Devtools	Lesson	Slides	Exercises	web-theory.pdf
		CSS Colours	Lesson	Slides	Exercises	css.pdf 2.2
*			The button exercise
		CSS Floats	Lesson	Slides	Exercises	css.pdf
		CSS Units	Lesson	Slides	Exercises
	*		Flexbox Froggy
		HTML Forms	Lesson	Notes	Exercises	html.pdf
*			Flexbox Froggy & Form Exercise
		CSS Flexbox	Lesson	Slides	Exercises	css.pdf
		Responsive Design	Lesson	Slides	Exercises	css.pdf
*		Finish flexbox & media query exercises.
	*	Play Grid Garden
		CSS Grid Part 1	Lesson	Slides	Exercises	css.pdf
		CSS Grid Part 2	Lesson	Slides	Exercises	css.pdf
	*		Revise for quiz tomorrow
		Requirements Gathering	Lesson	Slides	Exercises	web-theory.pdf 4.1
		Sitemaps	Lesson	Slides	Exercises	web-theory.pdf 4.2
		Scamps	Lesson	Slides	Exercises	web-theory 4.3
	*		Quiz & 1-1s
		Wireframes	Lesson	Slides	Exercises	web-theory 4.4
x		CSS Framworks	Lesson	Slides	Exercise	css.pdf 4.4
	*		Homework: Prototype with Bootstrap

NB For the full time students there is an ongoing 'portfolio' project, for which you can find the brief in Basecamp. Homework over the weekend would be to use the skills they learnt on Friday to wireframe their portfolio.

Part Two

Figma Student Master for Part Two - https://www.figma.com/file/6TdVNL837VjTI7yvmiyKXf/Photography-Site-Student-Master?node-id=0%3A1

Once they get started on the weekly project it's a good idea to use some time during the days (Tues -> Thurs) to go over parts of the site with the class. I tend to pick out certain approaches or parts of the design they are struggling with. It varies for each class. You can find the project on Glitch here, (Instructor google verified account), it's usually in a state of incomplete, but this is helpful as showing coding is better than showing code.

PT	FT	Title	Lesson	Slides	Exercise	Notes
		Design Systems	Lesson	Slides	Exercise	css.pdf 5.1
		Atomic Design	Lesson	Slides		Exercise
		Design Handover	Lesson	Slides	Exercises	web-theory.pdf 3.5
		Design Breakdown	Lesson	Slides	Exercises	web-theory.pdf 3.6
		Positioning & Transforms	Lesson	Slides	Exercises	css.pdf
		Imports	Lesson	Slides	Exercises	css.pdf 4.1
		Variables	Lesson	Slides	Exercises	css.pdf 4.2
		Accessibility	Lesson	Slides	No exercise yet	web-theory.pdf 3.2
		OOCSS	Lesson	Slides	Exercises	css.pdf 4.3
		BEM	Lesson	Slides	Exercises	css.pdf 4.4
		CSS Effects	Lesson	Slides	Further Reading	css.pdf 1.5
*	*		Homework: Research complex selectors
		Complex Selectors	Lesson	Slides	Exercises	css.pdf
		CSS Animation	There is a codepen for this lesson
*	*		Homework: Try to upload to server using instructions if you can. Go over the past two weeks for an AMA session tomorrow afternoon
		Specificity	Lesson	Slides	Exercises	css.pdf
		Upload to server	Lesson	Slides	Exercises
		Testing	Lesson	Slides	Exercises
*	*		Week 2 Quiz: Can be found in the devme account (someone created a new one so there are two, depending on what you have taught pick your flavour)
*	*		AMA Session: Have an open hour in the afternoon for the students to discuss anything from the past couple of weeks.

| | | Extra CSS | | | | |

Extra Tasks

Should the students finish the project in Part Two there is a readme containing extra exercises which should keep them busy here.

Key

• x Can be ommitted

• * This course only

• CSS: CSS Animation

  • See codepen for lesson https://codepen.io/devmeexamples/pen/OJMWxLv
  • Slides
  • Exercises

• CSS: Extra CSS

  • Slides
  • Exercises