HTML5 & CSS3
Problem with Box Model in css;
if we give the html element border/padding/margin it will be added to the current width & height of the element. ex: button has a width & height of 100px and we add padding 10px now the button width and height will be increased to 120px, this is a problem, to fix this we use "box-sizing: border-box" property, with this we can define the height and the width for an entire box, rather than just for the content.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
--------------
use the below class to clear the floating divs in a generic way
.clearfix:after {
content: "";
display: table;
clear: both; // to clear the floating
}
usage;
<div "style: width: 75%; float: left;">sldjf</div>
<div "style: width: 25%; float: left;">sldjf</div>
<div class="clearfix"></div>
---------------
Relative Position:
All the elements in html are relative elements, that means the position of an element is detarmined by other elements.
Absolute Position:
We can place the elements wherever we want inside their parent element.
To make an element with absolute position:
First the Parent element should be set as "position: reltive" and the child element should be set as "position: absolute" and we can use top right left bottom postions to adjust as per the requirement.
-----
Beautiful Typography
1. Use a font-size between 15 and 25 pixels for body text
2. Use (really) big font sizes for headlines
3. Use a line spacing between 120 and 150% of the font size
4. 45 to 90 characters per line
5. Use good fonts
6. Chose a font which reflects the look and feel you want for your website
7. Use only one font
Using Colors Like a Pro
1. Use only one base color
2. Use a tool if you want to use more colors
3. Use color to draw attention
4. Never use black in your design
5. Choose colors wisely
Working with Images
1. Put text directly on the image
2. Overlay the image
3. Put your text in a box
4. Blur the image
5. The floor fade
Working with icons
1. Use icons to list features/steps
2. Use icons for actions and links
3. Icons should be recognizable
4. Label your icons
5. Icons should not take a center stage
6. Use icon fonts whenever possible
Spacing and layout
1. Put whitespace between your elements
2. Put whitespace between your groups of elements
3. Put whitespace between you website's sections
4. Define where you want your audience to look first
5. Establish a flow that corresponds to your content's message
6. Use whitespace to build that flow
----------
inlucde Normalize.css to support HTML5 features for the older browsers.
common css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
text-rendering: optimizeLegibility; /* all fonts renders perfect way*/
}
header {
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(img/hero.jpg); /* adding two backgrounds one for transparancy with gradeint effect and one for actual background image*/
background-size: cover; /* tell the browser we want to see the whole image, it will shrink as per the screen size and always displays the full image*/
backgournd-position: center;
background-attachement: fixed; /* to make the baground look like sticky when scrolling */
height: 100vh; /* making the height 100% of view port*/
}
.hero-text-box {
position: absolute;
width: 1140px; /* same size as the parent div */
top: 50%;
left: 50%;
transform: translate(-50%. -50%); /* to make the div centered to it's parent div */
}
diff between block, inline & inline-block
https://medium.com/@DaphneWatson/css-display-properties-block-inline-and-inline-block-how-to-tell-the-difference-7d3a1e6e3051
btn animation effect
transition: background-color 0.2s, border 0.2s, color 0.2s; // css3 animations
Responsive web design:
------------------------
we need to add the below meta tag not to zoom out when using small screens/phones
<meta name="viewport" content="width=device-width, initial-scale=1.0">
/* 1024 to 1200*/
@media only screen and (max-width: 1200px) {
}
/* 768 to 1023*/
@media only screen and (max-width: 1023) {
}
/* 481 to 767*/
@media only screen and (max-width: 767) {
}
/* 0 to 480*/
@media only screen and (max-width: 480) {
}
Auto prefix selection
-----------------------
to make the css to work on all different type of browsers we need to add the css properties for different browsers, this can be easily done by "Auto prefix" plugin in brackets.
ex:
transform: scale(1.03);
-webkit-transform: scale(1.03);// for chrome and safari
-ms-transform: scale(1.03); // for IE
.one-class.two-class { /* css will be applied only if the element has both classes */
}
rem calculation
1.5 rem = 1.5 * browser default root font-size (or) root font-size
1.5 rem = 1.5 * 16px
rem (font) - root element font-size * rem val
em (font) - parent elemnt font-size * em val
em (lengths) - current element font-size * em val
We should always use rem instead of px for responsive designing.
root font-size should be given in % ex: font-size: 62.5%; (62.5/100*16px = 10px)
16px is the default browser font-size.
