###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.
- Introduction HackYourFuture
- Hello new students and mentors!
- DOM structure
- HTML syntax (How to work in a text editor, make a zip file)
- CSS syntax
- Linking to external files
Read these Chapters from the Front-end Handbook
###Watch these videos:
- Khan Academy: Into to HTML/CSS: Making webpages
- Make your own web resume:
- One page
- Two files: HTML and CSS
- Include the following:
- Your personal info (name, place of birth, etc.)
- A picture
- A few lines about who you are
- Education
- Work experience
- Include the following:
- Different types of headings (h1, h2)
- A list (ul)
- img
- p
- Some css properties: margin, padding
- Make sure that you page looks nice, and that your text is readable
- upload in a zip
- 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
- Repeat/explain how HTML is structured, go through the entire html structure, explain all different elements
- CSS
- Tips and tricks
- Media queries
- Understand why/ how to use which language
- How to work with the inspector
- Resume presentations
- Introduction to media queries
- More about media queries
- HTML syntax
- Article about mulitiple ways to select classes and id's
- Read about nice color combinations
- Udacity: Responsive web design fundamentals
- Remake an existing responsive website: choose one of the following
- It should have an external CSS file
- BEFORE you hand it in, read the Style guide again and check your files
- Presentations of students website remakes
- Repeat topics of last two weeks:
- Understand why/ how to use which language
- Media-queries
- 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
- Choose one of the following subjects, look up how it works and implement it in a webpage
- Make a website that contains:
- A responsive grid made with flex-box
- A responsive grid made with CSS3 columns
- A responsive grid made with float left
- An animation using CSS keyframes
- Optional: use a SVG
- BEFORE you hand it in, read the Style guide again and check your files