HTML & CSS - Introduction
Description
HTML and CSS are two of the web's building blocks. They allow us, respectively, to define what are the contents of a website and how it should look like. In this module you will get in touch with the syntax, learn all fundamental parts of each and create a website.
If you never worked with either before, the syntax might look a little weird at first but it grows on you and you'll feel at home in no time. Focus on creating clean code, which you understand 100%. Make extensive use of sandboxes (with Glitch, CodePen or Web Maker, for example). Get comfortable and use HTML's semantic tags (header, main, section, footer, nav, etc). Go through the list of HTML and CSS topics described in this Guide to make sure you haven't overlooked anything important.
It's also a good moment to learn a bit about Developer Tools, which all major browsers offer. With these tools you'll be able to inspect your work and understand what's really happening when the browser uses your files.
But none of that is much fun if you can't share, so you'll also release a website on the web using a service such Surge or Github Pages. With this knowledge it will be possible to make all your great work publicly available for friends and potential future clients!
Example
One pager
description
- Create a one-page website (see some theme ideas below).
Submit:
- Git repository
- Add comments for each relevant code block
- Add project description and details in the README.md file
- Public URL (no need for a custom domain). Tip: use surge.sh.
- Git repository
Minimum requirements
- Website’s should contain at least 3 parts:
element, element and element should contain at least a logo and navigation item - Website should contain:
- At least 2
elements - Paragraph, list, image and anchor elements
- At least 2
- Website should be styled with CSS
- Use of color palette
- Use of Google fonts (or similar)
- Hover state for links
- Use BEM notation for the CSS
- At least one page should be available
- Website’s should contain at least 3 parts:
Theme ideas:
- Lost pet website 😢
- New product or service
- Portfolio
- Upcoming event
- Restaurant website
Materials
Easy in-browser HTML, CSS & JS sandboxing with GlitchHTML Cheat SheetCSS Cheat SheetInteractive cheatsheet for CSS (and HTML is also there if you click the link on top of the page)HTML & CSS TutorialChrome Dev Tools Crash CourseFree code camp interactive tutorialTopics
- return
- What is HTML and CSS?
- Setup development environment
- Basic HTML aspects
- Syntax
- Units
- Common tags
- Block elements
- div, main, section, ul, li, table
- Inline elements
- p, a, img
- Block elements
- Semantics
- Common layout structure (header with navbar, main, sidebase, footer)
- Syntax
- Basic CSS aspects
- Structure & Syntax
- Common properties
- Colors
- Fonts
- Display & Visibility
- State pseudo-classes
- BEM Notation
- CanIUse.com
- Chrome Dev Tools
- Deployment
- Git
- Markdown (README.md)
- Surge, Github Pages and similar services
;
Tips
Requirements
- Understand what a markup language is
- Understand what a style sheet language is
- Understand what the "cascading" in Cascading Style Sheets means
- Understand what "static site hosting" is
- Be able to setup a development environment to start a web development project
- Be able to use HTML and CSS to create a simple website
- Be able to use the browser's development tools to inspect a website's code
- Be able to publish a static website