Bitcamp Intro to HTML/CSS
Learn HTML, CSS, Flexbox, and CSS Grid by building a professional website with modern front end development techniques.
Why Learn intro web dev?
HTML is the foundation of all web pages. It defines the structure of a page, while CSS defines its style. HTML and CSS are the beginning of everything you need to know to make your first web page! Learn both and start creating amazing websites.
Suggestion: Industry applications/tie-ins
What will the student work on?
The students will create a(n) X.
Other tutorials do x, y, z, but we want to get you up and running without shying away from the interesting components and extensions your project can have.
Discuss/link relevant materials https://www.youtube.com/watch?v=kMT54MPz9oE&ab_channel=freeCodeCamp.org https://scrimba.com/course/ghtmlcss/enrolled https://lab.github.com/githubtraining/introduction-to-html
Suggested Learning Objectives
Week 1
This week we will focus on setting up our local environments, getting an introduction to HTML and creating our first HTML web page.
Objective: Learn the basics of HTML/HTML5
- Introduction
- What is HTML/CSS
- Terminology/Syntax
- File Naming/Convention
- Anchors/Attributes
Homework
You would be a given a simple text file and an image from the cover of a book and your task would be to convert that information into a styled web page.
Week 2
Describe what you're doing this week
Objective: Getting Started with CSS
- CSS Basics
- Overriding CSS/Inheritance
- Padding/Margin/Attributes
- CSS Variables
- Colors (hex codes)
- Lists
- Images
Homework
- Students will be given a(n) X
- Asked to create a(n) Y
Week 3
Describe what you're doing this week
Objective: Visual Design (CSS + HTML)
- List
- of
- Topics
Homework
- Students will be given a(n) X
- Asked to create a(n) Y
Week 4
Describe what you're doing this week
Objective: Layouts with CSS Flexbox + Grid
- Intro to the box model
- Margin and Padding
- Borders
- Box model
- Layout
- Columns with Flexbox
- Creating the Layout
Homework
- Students will be given a(n) X
- Asked to create a(n) Y
Final Project
Create a personal website for you, or your favorite movie/anime/life character.