Static page with HTML and CSS
To build a page with as many concepts of HTML and CSS in a crash course.
Site on netlify
https://blissful-clarke-ce7b4e.netlify.app/
Site on figma
https://www.figma.com/file/xTHpeFlMlNOJ6OZ7bu7VfA/Staticsite?node-id=0%3A1
Concepts to cover (suggested outline):
- HTML basic
- Mobile first design
- VS Code tools, figma, github
- CSS simple
- CSS advanced
- MDN reference
- Resources
- Chrome devtools (or firefox devtools)
- HTML semantic
- html tags
- video and audio
- forms
- css color
- rem and em
- css specificity
- flex box and grid
- position: relative and absolute
- block and inline-block
- pseudo classes and elements
MDN reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
(visit site and give indications of beta, browser support, and deprecation)
Input field types
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
Youtube crash course in HTML
https://www.youtube.com/watch?v=qz0aGYrrlhU
online editing
https://codepen.io/
CSS gradient resources
https://www.gradientmagic.com/
Google fonts
https://fonts.google.com/
CSS specificity
https://specifishity.com/
CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
DEV
https://dev.to/
Fontawsome
https://fontawesome.com/
Material icons
https://fonts.google.com/icons
Clip path
https://css-tricks.com/almanac/properties/c/clip-path/
https://ishadeed.com/article/clip-path/
Path maker
https://bennettfeely.com/clippy/