HTML BASICS
- image: add a dark(black color background) mask on image's container
- zoom out and become brighter animation
- radius image,
- number and text in one line: inline-block, float: left
- icon and text align together in one-line
/* secrets to align icons and text */
line-height: 120%;
vertical-align: middle;
margin-top: -4px;
blockquote tag
cite
tag- linear gradient background color
- quotation marks
:before
tag - absolute(child) vs relative(parent)
- input: type =
text, email, checkbox, submit
- select
- textarea
- darker mask with white/gray text
- social media icon-color
- transition when hover: color changes
- 0 <= size <= 480px : old small phone screen
- 481px <= size <= 767px : phone to tablet screen
- 768px <= size <= 1023px : bigger tablet / landscape view of tablets
- 1024px <= size <= 1200px : close to our max row width( which is set to 1140px on all browsers)
-
Add different browser and old browser supportive soluton install 3 scripts to improve css features:
•
respond.js
respond.js which enables the browser to understand and execute CSS media queries which we need for responsive web design. https://www.jsdelivr.com/package/npm/respond.js?path=dest•
HTML5Shiv
This enables us to use and style HTML5 elements in older browsers that were available before HTML5 actually existed. https://www.jsdelivr.com/package/npm/html5shiv•
selectivizr
And this allows us to use CSS3 pseudo classes like less child and first child. Or Internet Explorer 6, 7, and 8. https://www.jsdelivr.com/package/npm/selectivizr
- use jquery
- add animation when scrolling
- build responsive mobile navigation bar