HTML-CSS

Introduction

In this module you will learn to write and understand basic HTML(5) and CSS syntax. Also we will go into the DOM and file structure. There will be time spent on why and how you use different programming languages (like CSS and HTML). When it comes to CSS you should understand how CSS decides which rules are applied, also you should have an understanding what is meant by elements and attributes. Making responsive websites is an important part of front-end programming. You will learn how to make your websites responsive by using media queries using a “mobile first” approach. Also you will get familiar with developer tools that help make this process easier. During this entire module you’ll (learn to) work in a text editor. It’s expected from you that your code is properly styled using the style guide for HTML/CSS. You’ll be introduced to the inspector that helps you debug and understand you code better.

Lesson 1

• Introduction CodeYourFuture
• Hello new students and mentors!
• DOM structure
• HTML syntax (How to work in a text editor)
• CSS syntax
• Linking to local files

Homework

Read these Chapters from the Front-end Handbook

• What Is a Front-End Developer?
• Part I. The Front-End Practice

Watch these videos:

• How the Internet Works in 5 Minutes
• How Web Browsers Work

Exercises:

• Khan Academy: Into to HTML/CSS: Making webpages

Assignment:

1. Set up a Github account

   • Create a local repository named <your-username>.github.com

2. Make your own page cloning Instagram

   • At least two pages
   • Have styles in a separate CSS file
   • Include the following:
     • A homepage which is a 'stream' of images
     • A picture
   • Make sure that you page looks nice, and that your text is readable
   • Upload your files to Github (See below)

Extra material:

• Next week reading/ practice (these topics will be discussed next week but If you want to read ahead):
  • Next week we will talk about responsive web design and using media queries, if you already want to start reading about this subject check out this Responsive Web Design - Introduction". And take a look at this website

Lesson 2

• Repeat/explain how HTML is structured, go through the entire html structure, explain all different elements
• CSS
  • Tips and tricks
• Discuss code style
  • Indenting code *
• Media queries
• Understand why/ how to use which language
• How to work with the inspector
• Resume presentations

Homework

Read:

• Introduction to media queries
• More about media queries
• HTML syntax
• Article about multiple ways to select classes and id's
• Read about nice color combinations

Exercises

• Codecademy course on CSS Positioning
• CSS Selector learning game

Assignments:

1. Build A House
2. Style A Website

Further Learning:

If you have completed all the assignments have a go at these:

• Exercise: Udacity: Responsive web design fundamentals
• Exercise: Responsive Web Design - Introduction

Lesson 3

• Presentations of students website remakes
• Repeat topics of last two weeks:
  • Understand why/ how to use which language
  • Media-queries
  • Responsive Websites
  • DOM
  • File structure, external links
• How to find information on the web
• Task: find some info about a certain topic in groups of 2, present to each other
  • Choose one of the following subjects, look up how it works and implement it in a webpage
    • CSS transitions
    • CSS animations with keyframes
    • SVG
    • Dropdown menu in CSS
    • flex-box

Homework

Homework

For home assignment you can build a responsive blog and get ready for javascript. Follow following article