{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/html&cssProjects","result":{"data":{"blog":{"frontmatter":{"title":"HTML & CSS PROJECTS","thumbnail":"blog06","date":"August 16, 2020","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n<p>\nKnowing the basics of HTML and CSS is must and then all projects\nwould be easy. <a href=\"/blogs/learnHtml&Css\">Click here</a> to know\nthe topics to be covered in HTML and CSS.\n</p>\n<p class=\"m-2 lead\">\n<b\n    >Check these projects to improve your Frontend Designing\n    techniques.</b\n>\n</p>\n</div>\n<div class=\"row my-1 align-self-center align-items-center p-2\">\n<div class=\"col-md-4 my-3\">\n<h4>1. Portfolio</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/videoseries?list=PLIY8eNdw5tW85F-TuX65zYinmTnPUGzXw\"\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-3\">\n<h4>2. Blog Page</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/vpAJ0s5S2t0\"\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-3\">\n<h4>3. Simple Music Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/RZ-Oe4_Ew7g\"\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-3\">\n<h4>4. One Color UI Responsive Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/2IjyqauKumE\"\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-3\">\n<h4>5. Design & Build A Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/wmEc9HeQV7Q\"\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-3\">\n<h4>6. A Professional Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/5bMdjkfvONE\"\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-3\">\n<h4>7. Responsive Website with Flexbox</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/Wm6CUkswsNw\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n</div>\n<div class=\"col-12 my-2 p-2\">\n<p class=\"text-muted m-2\">\n    You need not do all the projects but any 3 or 4 are enough to\n    understand how a website can be design. No problem if you want\n    to design all these websites, it improves your creative\n    skills.\n</p>\n</div>\n","html":"<div class=\"my-2 p-2\">\n<p>\nKnowing the basics of HTML and CSS is must and then all projects\nwould be easy. <a href=\"/blogs/learnHtml&Css\">Click here</a> to know\nthe topics to be covered in HTML and CSS.\n</p>\n<p class=\"m-2 lead\">\n<b\n    >Check these projects to improve your Frontend Designing\n    techniques.</b\n>\n</p>\n</div>\n<div class=\"row my-1 align-self-center align-items-center p-2\">\n<div class=\"col-md-4 my-3\">\n<h4>1. Portfolio</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/videoseries?list=PLIY8eNdw5tW85F-TuX65zYinmTnPUGzXw\"\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-3\">\n<h4>2. Blog Page</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/vpAJ0s5S2t0\"\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-3\">\n<h4>3. Simple Music Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/RZ-Oe4_Ew7g\"\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-3\">\n<h4>4. One Color UI Responsive Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/2IjyqauKumE\"\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-3\">\n<h4>5. Design & Build A Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/wmEc9HeQV7Q\"\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-3\">\n<h4>6. A Professional Website</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/5bMdjkfvONE\"\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-3\">\n<h4>7. Responsive Website with Flexbox</h4>\n<iframe\n    width=\"100%\"\n    height=\"200\"\n    src=\"https://www.youtube.com/embed/Wm6CUkswsNw\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n    allowfullscreen\n></iframe>\n</div>\n<div class=\"col-12 my-2 p-2\">\n<p class=\"text-muted m-2\">\n    You need not do all the projects but any 3 or 4 are enough to\n    understand how a website can be design. No problem if you want\n    to design all these websites, it improves your creative\n    skills.\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='M23%2014c0%2011%206%2063%207%2064l13%204%2012%203%2013-3%2014-4a787%20787%200%20006-63v-4H23v3m290-1l3%2036%204%2034%2014%204%2014%204%2014-4%2015-4%203-32%204-36v-4h-71v2M46%2025H35v8l2%2013v4h28v5c-1%205-2%206-7%207-7%201-12-1-12-5%200-3-1-3-4-3h-4v6c0%207%200%206%209%209l9%202%208-2c9-3%209-2%2010-17V41H44v-8h31l1-3c1-7%202-6-30-5m280%204c0%206%201%206%2011%206l9%201-8%203c-11%204-11%204-10%209v4h31v3c0%207-1%209-6%2010-7%202-14%200-14-5-1-3-1-3-6-3-4%200-4%200-4%203%200%2010%200%2010%2010%2013l9%203%2010-2%209-3v-6l2-14v-8h-18l9-4%2010-4v-9l-22-1h-22v4M211%2066c-2%203-3%208-1%2014v7c-6%209%201%2020%209%2014%202-2%203-2%204%200%202%202%204%201%204-2l-1-3V86c-1-2-4-1-4%201-1%202-1%202-3%200-1-3-1-3%202-8%205-10-2-20-10-13m28%200c-2%203-2%203-2%2017%200%2015%201%2018%205%2019%205%202%2010-2%2010-10%200-3%200-3-3-3s-3%200-3%204l-1%204c-2-1-3-27-1-27%201%200%202%201%202%204s1%204%203%204c3%200%203%200%203-3%200-10-7-14-13-9m19%200c-3%202-4%205-3%2010l4%208c4%207%206%2013%203%2013l-2-3c0-2-1-3-3-3-3%200-3%200-3%203%200%208%207%2011%2013%207%204-4%204-10-2-19l-5-10c1-2%203-2%204%201%200%202%201%202%203%202%205-1%201-11-5-11l-4%202m16%200c-4%205-3%2011%204%2021%203%205%204%2010%201%2010l-2-3c0-4-6-4-6-1%200%206%205%2011%2010%209%207-1%208-10%201-20-4-7-5-12-2-12l1%203c0%202%200%202%203%202s3%200%203-4c-1-7-8-9-13-5M126%2084v18h6v-8c0-6%200-8%202-8l1%208v8h6V65h-6v8l-1%207c-2%200-2-1-2-7v-8h-6v19m17-16c0%203%200%203%203%203h2v31h6V71h3c2%200%202%200%202-3v-3h-16v3m18%2015v19h6V84l2%208%201%209%201%201c2%200%204-9%204-15l1-4v19h6V65h-3c-3%200-4%200-4%202l-2%209-2%206-1-8-2-8-3-1h-4v18m25%201v18h7c6%200%206%200%206-2%200-3%200-3-3-3h-4V65h-6v19m-52%2033l-4%201v6l-1%2012v6h3c3%200%204-1%204-4s1-4%203-4c7-2%2010-7%208-13-2-5-5-6-13-4m19%200h-3v8c-2%2016-1%2017%202%2017s3%200%203-4c0-5%202-5%205%200%202%205%202%205%205%202l2-2-2-3c-2-3-2-3%200-6%203-3%203-8%200-11-2-2-4-2-12-1m20%201c-6%207-5%2022%202%2024%208%202%2014-9%2011-20-2-6-9-8-13-4m26-1l-1%209c0%206%200%208-2%209-1%201-1%201-2-1l-2-2-3%201c-2%200-1%205%201%207s7%203%2010%200c3-2%205-7%205-16v-8h-3l-3%201m10%200c-2%200-3%204-3%2016v9h3l9-1c5%200%205%200%205-3s0-3-5-3l-5-1%202-2c4%200%206-1%206-4%200-2%200-2-4-2l-4-1c0-2%201-2%203-2%206%200%208-1%208-4v-3h-6l-9%201m22%201c-4%203-6%208-6%2013%200%2011%208%2015%2015%207%203-3%203-3%201-5l-1-2-2%202c-3%204-5%204-6%201l2-11c2-2%203-1%203%202-1%202-1%202%202%202s4-1%204-2l4-2h3v19h3l4-2v-18h3c3%200%203%200%203-3v-3h-18v3l-1%204-1-2c0-5-8-7-12-3m39-1c-6%203-6%2010%200%2014l3%204c-1%202-1%202-5%200-2%200-3%200-4%202-1%206%2014%206%2016%200%201-3%200-6-4-10-3-2-4-3-3-5l1%201c0%202%201%203%204%203%202%200%202-1%202-4%200-5-4-8-10-5m-88%2084l-24%2024h12l24-23%2023-24-6-1h-6l-23%2024m0-22c-4%201-6%203-27%2024l-22%2022h12l23-24c25-25%2025-24%2014-22m24%2023l-23%2023h12l21-21%2022-22-9-3-23%2023m22%203l-20%2020h13l18-18%2018-19-3-1-5-2c-1%200-11%209-21%2020m-80-14c-16%209-32%2024-33%2030%200%208%203%206%2023-14l17-19-7%203m101%2018l-16%2016h13l13-14%2014-14-3-2-5-2-16%2016m20%205l-11%2011h13l8-8%208-9-3-2-4-3-11%2011'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/4a19e16a1b06e7792940ead91316ef13/ee604/blog06.png","srcSet":"/static/4a19e16a1b06e7792940ead91316ef13/69585/blog06.png 200w,\n/static/4a19e16a1b06e7792940ead91316ef13/497c6/blog06.png 400w,\n/static/4a19e16a1b06e7792940ead91316ef13/ee604/blog06.png 800w,\n/static/4a19e16a1b06e7792940ead91316ef13/f3583/blog06.png 1200w,\n/static/4a19e16a1b06e7792940ead91316ef13/e4d72/blog06.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"html&cssProjects","thumbnail":"thumbnails/blog06.png"}},"staticQueryHashes":["2987289216","63159454"]}