{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/learnHtml&Css","result":{"data":{"blog":{"frontmatter":{"title":"LEARN HTML & CSS","thumbnail":"blog05","date":"August 15, 2020","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n    If you need the roadmap for Web Dev then\n    <a href=\"./basicWebDevelopmentRoadmap.html\">click here</a> to read\n    it.\n</div>\n<div class=\"row my-2 p-2\">\n    <div class=\"col-12\">\n    <h4>HTML</h4>\n    <p>\n        HTML stands for <b>Hyper Text Markup Language</b> and it is\n        the standard <b>markup</b> language for Web Pages.\n    </p>\n    </div>\n    <div class=\"col-md-7 my-1\">\n    <h5>Topics to cover:</h5>\n    <ul class=\"pl-4\">\n        <li>Basic HTML tags</li>\n        <li>Attributes</li>\n        <li>Comments in HTML</li>\n        <li>Links</li>\n        <li>Images, Audio, Video and iFrames</li>\n        <li>Tables</li>\n        <li>List</li>\n        <li>Forms</li>\n    </ul>\n    </div>\n    <div class=\"col-md-5 my-1\">\n    <h5>Resource:</h5>\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/UB1O30fR-EE\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n</div>\n<div class=\"row my-2 p-2\">\n    <div class=\"col-12\">\n    <h4>CSS</h4>\n    <p>\n        CSS stands for <b>Cascading Style Sheets</b> and it describes\n        how HTML elements are to be displayed.\n    </p>\n    </div>\n    <div class=\"col-md-7 my-1\">\n    <h5>Topics to cover:</h5>\n    <ul class=\"pl-4\">\n        <li>Basic CSS</li>\n        <li>Text Alignment</li>\n        <li>Box Model</li>\n        <li>Layouts</li>\n        <li>Media Queries</li>\n        <li>Selectors</li>\n        <li>\n        CSS Framework- Bootstrap/ Materialize/ Tailwind (<b\n            >any one</b\n        >)\n        </li>\n    </ul>\n    </div>\n    <div class=\"col-md-5 my-1\">\n    <h5>Resource:</h5>\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/yfoY53QXEnI\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <div class=\"col-md-4 my-1\">\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/5GcQtLDGXy8\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <div class=\"col-md-4 my-1\">\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/nqT8c5OFjEQ\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <div class=\"col-md-4 my-1\">\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/UBOj6rqRUME\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <p class=\"text-muted p-2\">\n    There are many topics to learn in CSS which are probably never\n    ending. You can skip for now and these are enough if your aim is\n    to become Fullstack Dev. But if you mainly focus on being\n    Frontend Dev then you will have to comeback later and learn few\n    more important topics.\n    </p>\n</div>\n<div class=\"my-2 p-2\">\n    <p>\n    <a href=\"/blogs/html&cssProjects\">Click here</a> for projects on\n    HTML & CSS.\n    </p>\n</div>\n","html":"<div class=\"my-2 p-2\">\n    If you need the roadmap for Web Dev then\n    <a href=\"./basicWebDevelopmentRoadmap.html\">click here</a> to read\n    it.\n</div>\n<div class=\"row my-2 p-2\">\n    <div class=\"col-12\">\n    <h4>HTML</h4>\n    <p>\n        HTML stands for <b>Hyper Text Markup Language</b> and it is\n        the standard <b>markup</b> language for Web Pages.\n    </p>\n    </div>\n    <div class=\"col-md-7 my-1\">\n    <h5>Topics to cover:</h5>\n    <ul class=\"pl-4\">\n        <li>Basic HTML tags</li>\n        <li>Attributes</li>\n        <li>Comments in HTML</li>\n        <li>Links</li>\n        <li>Images, Audio, Video and iFrames</li>\n        <li>Tables</li>\n        <li>List</li>\n        <li>Forms</li>\n    </ul>\n    </div>\n    <div class=\"col-md-5 my-1\">\n    <h5>Resource:</h5>\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/UB1O30fR-EE\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n</div>\n<div class=\"row my-2 p-2\">\n    <div class=\"col-12\">\n    <h4>CSS</h4>\n    <p>\n        CSS stands for <b>Cascading Style Sheets</b> and it describes\n        how HTML elements are to be displayed.\n    </p>\n    </div>\n    <div class=\"col-md-7 my-1\">\n    <h5>Topics to cover:</h5>\n    <ul class=\"pl-4\">\n        <li>Basic CSS</li>\n        <li>Text Alignment</li>\n        <li>Box Model</li>\n        <li>Layouts</li>\n        <li>Media Queries</li>\n        <li>Selectors</li>\n        <li>\n        CSS Framework- Bootstrap/ Materialize/ Tailwind (<b\n            >any one</b\n        >)\n        </li>\n    </ul>\n    </div>\n    <div class=\"col-md-5 my-1\">\n    <h5>Resource:</h5>\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/yfoY53QXEnI\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <div class=\"col-md-4 my-1\">\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/5GcQtLDGXy8\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <div class=\"col-md-4 my-1\">\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/nqT8c5OFjEQ\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <div class=\"col-md-4 my-1\">\n    <iframe\n        width=\"100%\"\n        height=\"200\"\n        src=\"https://www.youtube.com/embed/UBOj6rqRUME\"\n        frameborder=\"0\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n        allowfullscreen\n    ></iframe>\n    </div>\n    <p class=\"text-muted p-2\">\n    There are many topics to learn in CSS which are probably never\n    ending. You can skip for now and these are enough if your aim is\n    to become Fullstack Dev. But if you mainly focus on being\n    Frontend Dev then you will have to comeback later and learn few\n    more important topics.\n    </p>\n</div>\n<div class=\"my-2 p-2\">\n    <p>\n    <a href=\"/blogs/html&cssProjects\">Click here</a> for projects on\n    HTML & CSS.\n    </p>\n</div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M297%204l-21%206c0%203%201%203%2033-4l29-6h-10c-8%200-15%201-31%204m94-2c-7%202-7%202-7%206%201%205%202%205%207%204%2010-2%209-2%209-7s0-5-9-3m-20%204l-5%202v3c0%206%200%206%208%204%209-1%209-1%208-6-1-4-2-4-11-3m-19%204c-5%202-5%202-5%205%200%205%201%205%208%204%209-2%209-2%208-6s-3-5-11-3m-16%203c-8%202-9%202-8%206%201%205%201%205%208%204%208-2%209-2%208-7-1-4-1-4-8-3m54%202c-8%201-8%201-7%209%202%207%202%208%2010%206%208-1%208-2%206-11-1-6-1-6-9-4m-75%202c-5%201-6%202-6%205%200%205%201%206%209%204%208-1%209-2%207-6-1-4-2-4-10-3m55%201c-6%202-6%202-5%209%201%208%201%208%209%207%209-2%209-2%207-10-2-7-2-8-11-6m-74%203c-5%202-5%202-5%205%200%205%200%206%208%204s9-3%208-8c-1-2-3-3-11-1m56%201c-6%201-6%202-5%209%201%208%202%208%2011%206%206-1%206-2%205-9-2-7-3-8-11-6m-73%203c-8%201-8%201-7%205%201%205%201%205%208%204%208-2%209-2%208-6%200-4-2-5-9-3m56%200c-8%202-8%202-6%2010%201%208%201%207%208%206%208-1%209-2%208-8-2-10-1-10-10-8m-20%204c-6%201-6%202-4%209%201%208%201%208%209%206s8-1%207-7c-2-10-2-10-12-8m-16%203c-8%202-8%202-7%2010%202%208%202%208%2010%206%207-2%208-3%206-11-2-6-2-6-9-5m84%202c-6%202-6%202-6%208%201%209%202%209%2010%208%208-2%208-2%207-8-2-10-1-10-11-8m-103%202c-7%202-7%202-6%209%202%209%202%208%2015%205%202%200%203-2%201-10-1-6-2-6-10-4m84%202c-6%201-6%202-5%209l2%207%204-1c11%200%2012-1%2010-11-1-6-2-6-11-4M41%2042c-2%203-3%209-1%2012%201%202%206%203%208%200%202-2%202-9%201-12s-6-3-8%200m12-1c-3%200-3%2015%200%2015l2-2%202-3c7-2%207-11%200-11l-4%201m11%202c-2%207-1%2013%201%2013s2-1%202-4%200-3%201-1c1%205%206%207%209%203%202-2%202-4%201-4l-2%201-2%201c-1%200-1-7%201-8v2l2%201c5-1%203-7-2-7-2%200-4%201-5%203l-2%204v-4c0-4-3-4-4%200m19-1c-3%203-2%204%201%207s3%204-1%203c-2%200-2%200-2%202%201%202%207%203%209%200%202-2%201-4-1-6l-2-2h2l2-2c0-4-6-6-8-2m30%200c-4%205-2%2014%203%2014s8-9%205-14c-1-3-6-3-8%200m19%201c-2%202-3%208-1%2011%201%203%206%203%208%200%203-3%201-5-2-3-2%202-2%202-3%200l1-6c1-2%201-2%202%200%200%203%204%203%204-1%200-5-6-6-9-1m13-2c-3%202-4%2011-1%2013%204%204%209%201%209-7%200-6-3-9-8-6m9%201a809%20809%200%20016%2014c1%200%202-1%204-7l1-8c-1-2-3-1-3%202-1%204-3%205-3%200l-3-3c-2%200-2%200-2%202m14%200l-1%208v6h5c4%200%206-1%206-2%200-2-1-2-3-2-5%200-5-2-1-2%203-1%203-3%200-4-4%200-3-2%201-2%202%200%203%200%203-2%200-3-9-3-10%200m12%201c-2%204-1%2013%201%2013%201%200%202-1%202-3l1-2%201%202c1%203%202%203%204%202v-6c2-2%201-8-1-8-3-2-7-1-8%202m167-2c-8%202-7%202-6%209%202%208%202%208%2010%207l7-2-1-5c0-6-1-10-3-10l-7%201m-20%204l-4%202c-1%201%201%2013%202%2014s14-2%2015-2l-1-8c-2-7-3-8-12-6m-16%203c-8%202-8%202-6%209%201%208%202%208%2010%207l7-2-1-4c0-6-2-11-3-11l-7%201m80%203c-6%202-6%202-6%208%201%209%202%209%209%208l6-1v-8c0-9%200-9-9-7m-104%202c-11%203-11%202-9%2012%201%205%201%205%204%205l21-5v-7c-2-8-2-8-16-5m84%202l-4%203c0%205%202%2012%203%2013l8-1c7-1%207-2%205-11-1-6-3-6-12-4m-16%203c-8%202-7%202-6%209%202%208%201%208%209%207%208-2%209-2%207-10-2-7-2-7-10-6m-19%204c-6%201-6%202-5%209%201%208%201%208%2011%206%206-1%206-2%205-9-2-7-3-8-11-6m-17%203c-8%202-8%202-6%209%201%208%202%208%209%207%208-2%208-1%207-7-2-11-1-11-10-9m-27%206l-12%202c-1%201%202%2014%204%2015l27-6-2-12c0-3-2-3-17%201m93%200c-6%201-6%202-5%209%201%208%201%208%2011%206%206-1%206-2%205-10-2-6-3-7-11-5M70%2073c-4%200-4%201-4%209%200%206%200%207%202%207%201%200%202-1%202-3l1-2%201%202c1%202%202%203%203%202%202-1%202-1%201-3v-4c3-5%200-9-6-8m13%200c-3%200-4%200-4%204-2%207-1%2012%201%2012%205%200%209-1%209-3%200-1-1-2-4-2l-3-1h3c4-1%204-5%200-4l-2-1%202-1%204-1c2-1%201-4-1-4l-5%201m22%200c-4%203-5%2011-2%2014%204%204%209%201%209-7%200-7-3-10-7-7m24%200c-3%200-3%200-3%207-1%208-1%209%202%209l1-2c0-4%201-4%203%200%201%202%202%202%203%201v-4l1-4c2-5%200-8-7-7m12%202c-6%206-2%2017%204%2013%203-1%204-4%203-5l-2%201c-3%202-4%200-3-4%200-3%202-5%202-3s1%202%202%202c3-1%204-2%201-5s-4-3-7%201m14-2h-4v7c-1%209-1%209%205%208%206%200%207-4%202-4-2%200-3%200-2-1l2-1c2%200%202-1%202-2l-3-1c-3%200-2-2%202-2l3-3c-1-2-1-2-7-1M47%2075l-1%203-1%204c-2%204%202%208%206%206h3c1%202%203-1%202-3l1-3c1-2%201-2-1-2l-2-4c1-3-5-4-7-1m45-1c-2%202-1%206%202%208s3%203%200%203c-4-1-5%202-1%203%206%203%2010-5%204-8l-1-3h5c0-4-6-6-9-3m22%203c-2%2010%202%2015%208%2010%203-2%204-14%201-14-2%200-2%201-3%205%200%206-1%207-2%206v-6c0-5%200-5-2-5-1%200-2%201-2%204m50-2c-2%203-1%205%202%207s3%203%200%203c-4-1-5%202-1%203%205%202%209-2%207-7l-3-2-1-2h5c0-4-7-6-9-2m204-1c-7%201-7%202-7%208%201%209%202%209%2010%208l7-2c1%200%200-8-2-13%200-2%200-2-8-1m-20%204c-6%201-6%202-5%209%202%208%202%208%2012%206%206-1%206-2%204-11-1-6-2-6-11-4m-17%203c-8%202-7%202-6%209%202%208%202%208%209%207%208-1%209-2%207-10-2-7-2-7-10-6m-30%206l-17%204c-1%201%201%2012%203%2014l37-6-1-8c-2-8-1-8-22-4m80%203l-16%204c-1%201%201%2014%202%2016%201%201%204%201%2017-2l16-3v-9c0-8%200-9-2-9l-17%203m-32%206l-7%203c-1%201%201%2015%203%2016l10-1c10-2%2010-2%208-12-2-8-3-8-14-6m-20%204l-5%202c-1%201%202%2016%202%2017%201%201%2014-2%2015-3l-1-9c-2-9-2-9-11-7m-17%204c-8%201-7%201-6%209%202%2010%202%2010%2010%209%208-2%208-2%206-10-1-10-2-10-10-8m-19%203c-6%202-6%202-5%2010%202%2010%202%209%209%208%208-1%208-2%207-11-2-8-2-9-11-7M35%20145l1%2015c2%202%2012%202%2017%201l6-2v-5l2-14v-9H33l2%2014m88-11l1%2014%202%2011%205%202c6%202%206%202%2012%200l6-2v-7l1-14%201-7h-28v3m-84%207c0%207%200%207%206%207%205%200%206%200%206%202l-2%202c-2%201-6-1-6-2l-2-1c-2%200-2%200-1%204%200%203%207%205%2011%203%203-1%204-2%204-5%202-8%202-8-5-8l-7-1c0-1%202-2%206-2%206%200%209-1%207-3l-9-1h-9l1%205m89-4c-2%201%200%203%204%203h4l-4%202c-7%203-5%206%205%206%203%200%204%200%204%202-1%202-8%203-8%201l-2-2c-2%200-2%201-2%203%200%204%206%206%2012%204%204-1%204-1%204-6v-6l-3-1h-2l3-2c2%200%203-2%203-3%200-2-1-2-9-2l-9%201m-63%209l1%209c1%200%202-2%202-5l1-3v4c0%203%200%204%202%204l1-9-1-9c-1%200-2%201-2%204l-1%204v-4l-1-4c-2%200-2%202-2%209m17%200l1%209c1%200%202-1%202-3l1-3v3l1%203%201-3%201-3v3c0%202%201%203%202%203l1-9c0-8%200-9-2-9l-2%202-1%204-1-3c0-2%200-3-2-3s-2%201-2%209'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/f4ec3c0830c6dc488531f4e67371f2a0/ee604/blog05.png","srcSet":"/static/f4ec3c0830c6dc488531f4e67371f2a0/69585/blog05.png 200w,\n/static/f4ec3c0830c6dc488531f4e67371f2a0/497c6/blog05.png 400w,\n/static/f4ec3c0830c6dc488531f4e67371f2a0/ee604/blog05.png 800w,\n/static/f4ec3c0830c6dc488531f4e67371f2a0/f3583/blog05.png 1200w,\n/static/f4ec3c0830c6dc488531f4e67371f2a0/e4d72/blog05.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"learnHtml&Css","thumbnail":"thumbnails/blog05.png"}},"staticQueryHashes":["2987289216","63159454"]}