HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scriptings. , HTML and CSS are the basis of building Web pages and Web Application.
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
<div class="masonry"><div class="grid-item"><h2>HTML Introduction</h2><ul><li>Introduction</li><li>Environment setup</li><li>What is LAN, WAN?</li><li>Difference btw static and dynamic page</li><li>Types of application</li><li>What is live server?</li><li>What is HTML5?</li><li>HTML “Hello” program with practical</li><li>Html, head, body, title, meta, link</li></ul></div><div class="grid-item"><h2>Css3 Introduction</h2><ul><li>What is CSS3?</li><li>Inline with practical</li><li>Internal with practical</li><li>External with practical</li><li>HTML with CSS practical</li></ul></div><div class="grid-item"><h2>Grid with div tag</h2><ul><li>What is div tag?</li><li>display, float, height, width, background</li><li>Color picker or color code</li><li>Difference btw % & px</li><li>Display – inline-block, block, table</li><li>Grid for real time web page</li></ul></div><div class="grid-item"><h2>Margin & Padding</h2><ul><li>Needs of Margin & padding</li><li>CSS3 Box Model</li><li>Box Sizing</li><li>Margin, padding with HTML</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>CSS Simple Selectors</h2><ul><li>Element Selector</li><li>ID Selector</li><li>Class Selector</li><li>Universal Selector</li><li>Grouping Selector</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Combinator Selectors</h2><ul><li>Descendant selector (space)</li><li>Child selector (>)</li><li>Adjacent sibling selector (+)</li><li>General sibling selector (~)</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Pseudo-classes</h2><ul><li>Pseudo-classes + HTML classes</li><li>:active, :checked, :disabled</li><li>:empty, :enabled, :first-child</li><li>:first-of-type, :focus</li><li>:hover, :in-range, :invalid</li><li>:last-child, :last-of-type, :link</li><li>:not(selector), :nth-child(n)</li><li>:nth-last-child(n), :only-child</li><li>:only-of-type, :visited, :root</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Background</h2><ul><li>:root, variable declaration</li><li>Parent child concept</li><li>Background color, image</li><li>Difference btw div & span</li><li>Background properties</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Position & Z-index</h2><ul><li>Fixed with practical</li><li>Absolute with practical</li><li>Relative with practical</li><li>Relative + absolute with practical</li><li>Use in real time page</li><li>Visibility hidden, visible</li><li>Opacity, overflow, box-shadow</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Pseudo-elements</h2><ul><li>::first-line Pseudo-element</li><li>::first-letter Pseudo-element</li><li>Pseudo-elements + HTML Classes</li><li>Multiple Pseudo-elements</li><li>::before Pseudo-element</li><li>::after Pseudo-element</li><li>::marker Pseudo-element</li><li>::selection Pseudo-element</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Fonts</h2><ul><li>What is external font?</li><li>Add external font</li><li>Create own font-family</li><li>External link</li><li>Google fonts</li><li>External font-icon</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>CSS Flexbox</h2><ul><li>Flexbox Layout</li><li>Flex Container</li><li>All Flex Properties with practical</li><li>Flex Items</li><li>display: flex, order, flex-direction, flex-grow, flex-wrap, flex, flex-shrink, flex-basis, flex-flow, justify-content, align-self, align-items</li><li>Use it in real time page</li><li>Real time web page design with flex</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Animation & Advance</h2><ul><li>Transition</li><li>Transform – translate, scale, skew, rotate</li><li>@keyframes Rule</li><li>Delay an Animation</li><li>Image Reflection</li><li>Gradients</li><li>Shadow Effects</li><li>Object-fit</li><li>Box Sizing</li><li>Variables - The var() Function</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Media Queries</h2><ul><li>What is media query?</li><li>Responsive</li><li>@media rules</li><li>Apply on web page</li><li>Multiple manage devices</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Bootstrap</h2><ul><li>What is bootstrap?</li><li>How use & created?</li><li>CDN links</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Grid Layout</h2><ul><li>What is display: grid?</li><li>All Grid Properties</li><li>Use it in real time page</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Remaining Tags</h2><ul><li>clip-path</li><li>nav, header, section</li><li>footer, figure, fig-caption</li><li>table, form</li><li>video, audio, iframe</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Masking image</h2><ul><li>mask-image Property</li><li>-webkit-mask-image</li><li>mask-size</li><li>mask-repeat</li><li>Use it in real time page</li></ul></div></div>
f:T402,HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scriptings. , HTML and CSS are the basis of building Web pages and Web Application.
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
<div class="masonry"><div class="grid-item"><h2>HTML Introduction</h2><ul><li>Introduction</li><li>Environment setup</li><li>What is LAN, WAN?</li><li>Difference btw static and dynamic page</li><li>Types of application</li><li>What is live server?</li><li>What is HTML5?</li><li>HTML “Hello” program with practical</li><li>Html, head, body, title, meta, link</li></ul></div><div class="grid-item"><h2>Css3 Introduction</h2><ul><li>What is CSS3?</li><li>Inline with practical</li><li>Internal with practical</li><li>External with practical</li><li>HTML with CSS practical</li></ul></div><div class="grid-item"><h2>Grid with div tag</h2><ul><li>What is div tag?</li><li>display, float, height, width, background</li><li>Color picker or color code</li><li>Difference btw % & px</li><li>Display – inline-block, block, table</li><li>Grid for real time web page</li></ul></div><div class="grid-item"><h2>Margin & Padding</h2><ul><li>Needs of Margin & padding</li><li>CSS3 Box Model</li><li>Box Sizing</li><li>Margin, padding with HTML</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>CSS Simple Selectors</h2><ul><li>Element Selector</li><li>ID Selector</li><li>Class Selector</li><li>Universal Selector</li><li>Grouping Selector</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Combinator Selectors</h2><ul><li>Descendant selector (space)</li><li>Child selector (>)</li><li>Adjacent sibling selector (+)</li><li>General sibling selector (~)</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Pseudo-classes</h2><ul><li>Pseudo-classes + HTML classes</li><li>:active, :checked, :disabled</li><li>:empty, :enabled, :first-child</li><li>:first-of-type, :focus</li><li>:hover, :in-range, :invalid</li><li>:last-child, :last-of-type, :link</li><li>:not(selector), :nth-child(n)</li><li>:nth-last-child(n), :only-child</li><li>:only-of-type, :visited, :root</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Background</h2><ul><li>:root, variable declaration</li><li>Parent child concept</li><li>Background color, image</li><li>Difference btw div & span</li><li>Background properties</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Position & Z-index</h2><ul><li>Fixed with practical</li><li>Absolute with practical</li><li>Relative with practical</li><li>Relative + absolute with practical</li><li>Use in real time page</li><li>Visibility hidden, visible</li><li>Opacity, overflow, box-shadow</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Pseudo-elements</h2><ul><li>::first-line Pseudo-element</li><li>::first-letter Pseudo-element</li><li>Pseudo-elements + HTML Classes</li><li>Multiple Pseudo-elements</li><li>::before Pseudo-element</li><li>::after Pseudo-element</li><li>::marker Pseudo-element</li><li>::selection Pseudo-element</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Fonts</h2><ul><li>What is external font?</li><li>Add external font</li><li>Create own font-family</li><li>External link</li><li>Google fonts</li><li>External font-icon</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>CSS Flexbox</h2><ul><li>Flexbox Layout</li><li>Flex Container</li><li>All Flex Properties with practical</li><li>Flex Items</li><li>display: flex, order, flex-direction, flex-grow, flex-wrap, flex, flex-shrink, flex-basis, flex-flow, justify-content, align-self, align-items</li><li>Use it in real time page</li><li>Real time web page design with flex</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Animation & Advance</h2><ul><li>Transition</li><li>Transform – translate, scale, skew, rotate</li><li>@keyframes Rule</li><li>Delay an Animation</li><li>Image Reflection</li><li>Gradients</li><li>Shadow Effects</li><li>Object-fit</li><li>Box Sizing</li><li>Variables - The var() Function</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Media Queries</h2><ul><li>What is media query?</li><li>Responsive</li><li>@media rules</li><li>Apply on web page</li><li>Multiple manage devices</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Bootstrap</h2><ul><li>What is bootstrap?</li><li>How use & created?</li><li>CDN links</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Grid Layout</h2><ul><li>What is display: grid?</li><li>All Grid Properties</li><li>Use it in real time page</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Remaining Tags</h2><ul><li>clip-path</li><li>nav, header, section</li><li>footer, figure, fig-caption</li><li>table, form</li><li>video, audio, iframe</li><li>Real time web page design</li><li>note*: Remaining CSS3 & HTML5 topics cover</li></ul></div><div class="grid-item"><h2>Masking image</h2><ul><li>mask-image Property</li><li>-webkit-mask-image</li><li>mask-size</li><li>mask-repeat</li><li>Use it in real time page</li></ul></div></div>
11:["html1","html2","html3","html4"] 13:{"module_id":"63075908becd0a8d197e0466","module_name":"Module - 1","fees":""} 14:{"module_id":"63075912becd0a8d197e046a","module_name":"Module - 2","fees":""} 15:{"module_id":"63075919becd0a8d197e046e","module_name":"Module - 3","fees":""} 12:["$13","$14","$15"] 16:["66e72625a98e9ad31fb49f79"] e:{"_id":"62e3987ac2c8e8b47ddde1fe","coursename":"HTML5 & CSS3","iconname":"HTML5","parentcourse":"Web Designing","desc":"$f","icon":"uploads/course/1668943365470.webp","photo":"","broucher":"uploads/course/1668943365472.pdf","banner":"uploads/course/1668943365480.png","certificate":"uploads/course/1659960803301.webp","shortdesc":"$10","typeofcourse":"Trending","youtubelink":"https://www.youtube.com/embed/Uzmip7oKsDo,https://www.youtube.com/embed/kZi2UOh7dkY,https://www.youtube.com/embed/u5zN14KmoWI,https://www.youtube.com/embed/b-05rBn2bE4,https://www.youtube.com/embed/Bec8JfrTBdA","other":"HN Techno offers expert web design training with real-time, hands-on experience. We cover everything from Figma to HTML/CSS conversion, custom design, animations, and frameworks like Bootstrap and Tailwind CSS, guiding learners from basic to advanced levels.","fees":"15000","createdAt":"2022-07-29T08:21:14.946Z","updatedAt":"2024-09-15T18:23:33.939Z","__v":0,"topics":"$11","showwebsite":"Yes","slug":"html-css-course-ahmedabad","moduleFees":"$12","selectedItems":"$16"} 2:[["$","$L8",null,{}],["$","$L9",null,{"courseName":{"_id":"62e3987ac2c8e8b47ddde1fe","coursename":"HTML5 & CSS3","iconname":"HTML5","parentcourse":"Web Designing","desc":"$a","icon":"uploads/course/1668943365470.webp","photo":"","broucher":"uploads/course/1668943365472.pdf","banner":"uploads/course/1668943365480.png","certificate":"uploads/course/1659960803301.webp","shortdesc":"$b","typeofcourse":"Trending","youtubelink":"https://www.youtube.com/embed/Uzmip7oKsDo,https://www.youtube.com/embed/kZi2UOh7dkY,https://www.youtube.com/embed/u5zN14KmoWI,https://www.youtube.com/embed/b-05rBn2bE4,https://www.youtube.com/embed/Bec8JfrTBdA","other":"HN Techno offers expert web design training with real-time, hands-on experience. We cover everything from Figma to HTML/CSS conversion, custom design, animations, and frameworks like Bootstrap and Tailwind CSS, guiding learners from basic to advanced levels.","fees":"15000","createdAt":"2022-07-29T08:21:14.946Z","updatedAt":"2024-09-15T18:23:33.939Z","__v":0,"topics":["html1","html2","html3","html4"],"showwebsite":"Yes","slug":"html-css-course-ahmedabad","moduleFees":[{"module_id":"63075908becd0a8d197e0466","module_name":"Module - 1","fees":""},{"module_id":"63075912becd0a8d197e046a","module_name":"Module - 2","fees":""},{"module_id":"63075919becd0a8d197e046e","module_name":"Module - 3","fees":""}],"selectedItems":["66e72625a98e9ad31fb49f79"]}}],["$","$Lc",null,{}],["$","$Ld",null,{"courseName":"$e"}]] 7:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}]] 1:null