Table in HTML :-

• As we drow a normal table to maintain our data so html also provide a table like structure.
• is the main tag of HTML table.
• inside html table we have
- table row (HTML table is a row wise structuring).
• inside
tag we have ->

- table heading

- table data ex. emp. id emp name emp salary 1 hari 42,000 2 bihari 54,000 3 dash 67,000 List in HTML :- As our day to day life, when we store some data inside a proper format that called our list of data. HTML also provide a list to store some data inside it. In HTML there are 2 types of list are there.. Unordered List :- when we store that data in a un-organized form that called our unordered list. it is denoted by inside tag, we have means list item to store one by one element inside the list. Ordered List :- when we store that data in a organised form that called ordered list. it is denoted by . We also used tag for store the data inside the list. - ordered list - unordered list - list item Block-Level Element in HTML :- We used block level element in HTML because we need to structure the whole website in a single frame so we configure the whole frame in a small small block structure. there are more than one block level elements are present but we are using only 2 types of block. div - division p - paragraph Form in HTML :- An HTML form is used to collect some user input for the data storage purpose. tag is the main tag of HTML Form. inside tag, we have level & input tag for take the user input. there are some imp. input types are there like... ... etc... practice task :- (15 min) write a code that to create a portfolio page for your self.. put your name on h2. give your proper description (About You). give your photo Give your all educational details starting from LKG.(in table form) give your strength & weakness in by list tag. attach your all social media links(facebook, insta, twitter, linkedin) create signin page.. CSS :- CSS stands for Cascadding style sheet. Basically CSS works for the designing and styling of our web page. CSS is not a programming language, it's a styling language. syntax :- h1 { color : red; } in this above example h1 is our selector, color is our property & red is our value of that property. There are 3 types of css we used.... inline css :- we used inline css inside a tag name. inline css have highest priority by compare with other types of css. we can put our styling by creating a <style> attribute inside the tag. internal css :- We used internal css inside head tag, by creating a <style> tag inside it. Internal CSS used many cases for small codebases. external css we used External CSS by creating a separate CSS file and link that file in our HTML page. we can link the external css file by tag. it is most popularlly used because everyone wants to see clean code so all files have to be separated. Selector In CSS :- we used css selectors for selecting an html element for the shake of designing. there are 5 types of css selector are there... ID selector :- Id selector is a type of selector that used for unique design. it is denoted by "#". Class Selector :- Class Selector is a type of selector that used for similar design in multiple element. class selector is denoted by "." Group Selector :- Group selector is a type of selector that used for design more than one element by creating a group. Universal Selector :- Universal selector is a type of selector that can used to design whole html element in one style(universally design). it is denoted by "*" Element Selector :- element selector is used to design one by one element. (by their tag name) practice task :- (5 min) create a simple div with an id "box". add some text content inside the div. set its background color to blue. create 3 headings with h1, h2 & h3. give them all a class "heading" & set color of heading to red. Proiperties of CSS :- color : red/black... background-color : red/black... text-align : left/right/center text-decoration : underline/overline/line-through font-weight : normal/bold/bolder/100/400/.... font-family : san-sarif/monospace/roboto... line-height : 1/3/4/5/.... text-transform : uppercase/lowercase/capitalize... Box-Model in CSS :- Box-model is used for properlly placed the element in right direction. it major all the size of that particular element and place them. there are 5 types of box-model are there.. Height Width Border -> (border-radius) Margin -> (left, right, buttom, top) Padding -> (Left,right,buttom,top) Display Property :- we use display property to showcasing our element in a proper form to display. Basically there are 4 types of display property are there like.. display-inline -> takes only the space required by the element display-block -> takes full space available in width. display-inline-block -> similar to display-inline. display-none -> to remove element from document flow. Flex-Box in CSS :- we can use css flex-box to create one dimentionaldesign in a single page. flex-box have some properties like.. display: flex; flex-direction: row/ row-reverse/ column/ column-reverse; justify-content: center/space-between/space-evenly/space-around; align-item: center/top/buttom flex-wrap: wrap/no-wrap Grid-Layout in CSS :- Css grid layout is a two dimentional layout system for the web. A grid is a collection of horizontal & vertical lines creating a pattern against which we can line up our design element. They help us to create designs where element don't jumps arround or change width as we move from page to page. some imp. properties of grid layout ... display: grid; grid-template-column: repeat(4,1fr)/ 3 4 5; grid-gap : 20px/ 30px... grid-auto-rows: 100px/ 200px... CSS units :- Basically there multiple units in css but we will discuss some important units. px (pixel) - fixed % (percentage) - percentage is fully depends upon their parent element ex. bikash -> 100 -> 50% = 50 asirbad ->10,000 -> 20% = 2000 vh (viewport height) & vw (viewport width) - it will increases or decrease their size as per the screen size. vmax - if the screen size can be sqized to a phone screen so our content can be small it breake that and create a new line of content. em & rem (root units of CSS) em - we can handle all tag by a root element/tag so that it would be fesiable for our content. (relative units, relative to any one) rem - (1rem = 16px) Animation (Transition) :- (to change the state) transition enables you to define the transition between two states of an element. some important transition properties are.. transition-property: property you want to transition(font-size, color, bg color) transition-duration: 2s/3s/10s ...etc transition-timing-function: ease-in/ease-out/linear/steps(5) transition-delay: 2s/3s/10s ...etc transition shorthand (property name/duration/timing-function/delay) :- transition: font-size 2s ease-in 0.2s Animation (Transform) :- Used to apply 2D & 3D transformation to an element. Transform (Rotate) ->> transform: rotate(45deg); rotate: 45deg; rotateX: 45deg; rotateY: 45deg; rotateZ: 45deg; Tranform (scale) ->> transform: scale(2); transform: scale(0.5); transform: scale(1,2); transform: scaleX(0.5); transform: scaleY(0.5); Transform (skew) ->> Animation (media-qiery) :- Position Property in CSS :- the position CSS property sets how an element is positioned in a document. there are 5 types of position property are there. static - default position relative - element is relative to itself absolute - positioned relative to its closest ancesters fixed - positioned relative to browser sticky - positioned based on user scroll position