It was a boring night at the university library. While working on an important document for a project, I start looking around Google Docs, and come across a funny-looking button : "Download as webpage (.zip archive)" . Naturally my curiosity was sparked, since I'm already quite experienced with web developement and design. So could Google Docs be used to create stunning websites, essentially invalidating all the training I've gone through?
Well no, the reality is a bit more complicated, so I took some time to test out this "website builder" to see for myself what can it acheive.
Test Cases
For my first test, I downloaded the very document I was working on (which I can't show), and I was met with a zip file containing the "website". I was surprised to see that it looked pretty close to what it looked in Google Docs. This is when I got more curious. I attempted to put toghether a document with an arrangement of basic styles, and ended up with this:
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url(https://themes.googleusercontent.com/fonts/css?kit=dpiI8CyVsrzWsJLBFKehGpLhv3qFjX7dUn1mYxfCXhI);ol{margin:0;padding:0}table td,table th{padding:0}.c10{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:26pt;font-family:"Roboto";font-style:normal}.c1{padding-top:0pt;padding-bottom:16pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c2{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c12{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c6{color:#000000;text-decoration:none;vertical-align:baseline;font-size:20pt;font-style:normal}.c9{color:#000000;text-decoration:none;vertical-align:baseline;font-size:11pt;font-style:normal}.c8{color:#666666;text-decoration:none;vertical-align:baseline;font-size:15pt;font-style:normal}.c7{-webkit-text-decoration-skip:none;text-decoration:underline;text-decoration-skip-ink:none;font-style:italic}.c0{font-family:"Roboto";font-style:italic;font-weight:400}.c11{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c13{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration:underline}.c5{font-weight:400;font-family:"Roboto"}.c3{font-weight:700;font-family:"Roboto"}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c11 doc-content"><p class="c10 title" id="h.vrdkew492fff"><span class="c4">Website Title</span></p><p class="c1 subtitle" id="h.66112negqu7i"><span class="c5 c8">Desc</span></p><h1 class="c2" id="h.2a5rnjbk5zp6"><span class="c5 c6">Website Subtitle</span></h1><p class="c12"><span class="c5">The </span><span class="c3">following</span><span class="c5"> content </span><span class="c0">is</span><span class="c5"> for </span><span class="c5 c13">testing</span><span class="c5"> the functionality of </span><span class="c3 c7">Google Docs</span><span class="c5 c9"> as a website builder tool.</span></p></body></html>
Yes, the entire document was formatted to be as unreadable compressed as possible, maybe to save space. In my next attempt, I tried including more styles, even URLs and images. Because I included an image into the document, when I extracted the zip file , I was met with a new folder containing the image:
In any case, here's the spagetti HTML generated by Google Docs:
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url(https://themes.googleusercontent.com/fonts/css?kit=dpiI8CyVsrzWsJLBFKehGj7cmV9Mv51eWkfzN59WO6SqFfA22cXsXWI1Ih-t7ioy);.lst-kix_77ngjtnr4xy0-8>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-8}ol.lst-kix_77ngjtnr4xy0-8.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-8 0}.lst-kix_77ngjtnr4xy0-2>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-2}ul.lst-kix_9krdbto0mf6t-7{list-style-type:none}ul.lst-kix_9krdbto0mf6t-8{list-style-type:none}ul.lst-kix_9krdbto0mf6t-3{list-style-type:none}ul.lst-kix_9krdbto0mf6t-4{list-style-type:none}ul.lst-kix_9krdbto0mf6t-5{list-style-type:none}ul.lst-kix_9krdbto0mf6t-6{list-style-type:none}ul.lst-kix_9krdbto0mf6t-0{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-3}ul.lst-kix_9krdbto0mf6t-1{list-style-type:none}ul.lst-kix_9krdbto0mf6t-2{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-1 0}ol.lst-kix_77ngjtnr4xy0-5.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-5 0}.lst-kix_77ngjtnr4xy0-5>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-5}.lst-kix_9krdbto0mf6t-1>li:before{content:"\0025cb "}ol.lst-kix_77ngjtnr4xy0-2.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-2 0}.lst-kix_9krdbto0mf6t-0>li:before{content:"\0025cf "}.lst-kix_9krdbto0mf6t-2>li:before{content:"\0025a0 "}.lst-kix_9krdbto0mf6t-3>li:before{content:"\0025cf "}ol.lst-kix_77ngjtnr4xy0-3.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-3 0}.lst-kix_9krdbto0mf6t-4>li:before{content:"\0025cb "}.lst-kix_77ngjtnr4xy0-6>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-6,decimal) ". "}.lst-kix_77ngjtnr4xy0-7>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-7,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-8>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-8,lower-roman) ". "}.lst-kix_9krdbto0mf6t-5>li:before{content:"\0025a0 "}.lst-kix_9krdbto0mf6t-8>li:before{content:"\0025a0 "}.lst-kix_77ngjtnr4xy0-0>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-0}.lst-kix_77ngjtnr4xy0-1>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-1,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-2>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-2,lower-roman) ". "}ol.lst-kix_77ngjtnr4xy0-6.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-6 0}.lst-kix_77ngjtnr4xy0-6>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-6}.lst-kix_9krdbto0mf6t-6>li:before{content:"\0025cf "}.lst-kix_9krdbto0mf6t-7>li:before{content:"\0025cb "}ol.lst-kix_77ngjtnr4xy0-2{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-5>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-5,lower-roman) ". "}ol.lst-kix_77ngjtnr4xy0-4{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-3{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-3,decimal) ". "}.lst-kix_77ngjtnr4xy0-4>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-4,lower-latin) ". "}ol.lst-kix_77ngjtnr4xy0-0{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-7{list-style-type:none}.lst-kix_77ngjtnr4xy0-7>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-7}ol.lst-kix_77ngjtnr4xy0-4.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-4 0}.lst-kix_77ngjtnr4xy0-4>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-4}.lst-kix_77ngjtnr4xy0-0>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-0,decimal) ". "}.lst-kix_77ngjtnr4xy0-1>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-1}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}ol.lst-kix_77ngjtnr4xy0-0.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-0 0}ol.lst-kix_77ngjtnr4xy0-7.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-7 0}ol{margin:0;padding:0}table td,table th{padding:0}.c2{margin-left:36pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c0{padding-top:0pt;padding-bottom:16pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Ubuntu";font-style:normal}.c16{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c18{color:#ff9900;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c17{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c14{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:13pt;font-family:"Arial";font-style:normal}.c20{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c5{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c19{color:#666666;text-decoration:none;vertical-align:baseline;font-size:15pt;font-style:normal}.c8{color:#000000;text-decoration:none;vertical-align:baseline;font-size:20pt;font-style:normal}.c10{color:#000000;text-decoration:none;vertical-align:baseline;font-size:11pt;font-style:normal}.c21{color:#000000;text-decoration:none;vertical-align:baseline;font-size:26pt;font-style:normal}.c6{font-family:"Roboto";color:#1155cc;font-weight:400}.c13{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration:underline}.c11{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c7{font-weight:400;font-family:"Roboto"}.c1{padding:0;margin:0}.c22{color:inherit;text-decoration:inherit}.c12{font-weight:700;font-family:"Roboto"}.c23{font-weight:400;font-family:"Ubuntu"}.c15{font-style:italic}.c9{background-color:#ff9900}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c11 doc-content"><p class="c17 title" id="h.vrdkew492fff"><span class="c7 c21">Website Title</span></p><p class="c0 subtitle" id="h.66112negqu7i"><span class="c7 c19">Desc</span></p><h1 class="c20" id="h.2a5rnjbk5zp6"><span class="c7 c8">Website smaller title</span></h1><p class="c5"><span class="c7">The </span><span class="c12">following</span><span class="c7"> content </span><span class="c7 c15">is</span><span class="c7"> for </span><span class="c7 c13">testing</span><span class="c7"> the functionality of </span><span class="c13 c12 c15">Google Docs</span><span class="c7"> as a </span><span class="c6"><a class="c22" href="https://www.google.com/url?q=https://document10.github.io/&sa=D&source=editors&ust=1707524280306009&usg=AOvVaw2C764UhzrtEpuO2DqycjHD">website builder</a></span><span class="c7 c10"> tool.</span></p><h2 class="c16" id="h.8pk3e87o5cuv"><span class="c4">Even smaller title</span></h2><ul class="c1 lst-kix_9krdbto0mf6t-0 start"><li class="c2 li-bullet-0"><span class="c18">List</span></li><li class="c2 li-bullet-0"><span class="c3 c9">List</span></li><li class="c2 li-bullet-0"><span class="c14">List</span></li></ul><ol class="c1 lst-kix_77ngjtnr4xy0-0 start" start="1"><li class="c2 li-bullet-0"><span class="c3">List</span></li><li class="c2 li-bullet-0"><span class="c10 c23">List</span></li><li class="c2 li-bullet-0"><span class="c3">List</span></li></ol><p class="c5"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 313.33px;"><img alt="" src="images/image1.png" style="width: 601.70px; height: 313.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p></body></html>
You can try these codes out for yourself, but note that the images won't work, since it needs an image stored at a local path.
For my final test, I tried putting everything and the kitchen sink in that document,and i ended up with this:
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">@import url(https://themes.googleusercontent.com/fonts/css?kit=dpiI8CyVsrzWsJLBFKehGj7cmV9Mv51eWkfzN59WO6SqFfA22cXsXWI1Ih-t7ioy);ol.lst-kix_77ngjtnr4xy0-8.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-8 0}.lst-kix_77ngjtnr4xy0-2>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-2}.lst-kix_zedufsgekgex-0>li{counter-increment:lst-ctn-kix_zedufsgekgex-0}ul.lst-kix_9krdbto0mf6t-7{list-style-type:none}ul.lst-kix_9krdbto0mf6t-8{list-style-type:none}ul.lst-kix_9krdbto0mf6t-3{list-style-type:none}ul.lst-kix_9krdbto0mf6t-4{list-style-type:none}ul.lst-kix_9krdbto0mf6t-5{list-style-type:none}ol.lst-kix_zedufsgekgex-8.start{counter-reset:lst-ctn-kix_zedufsgekgex-8 0}ul.lst-kix_9krdbto0mf6t-6{list-style-type:none}ul.lst-kix_9krdbto0mf6t-0{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-3}ul.lst-kix_9krdbto0mf6t-1{list-style-type:none}ul.lst-kix_9krdbto0mf6t-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5.start{counter-reset:lst-ctn-kix_zedufsgekgex-5 0}ol.lst-kix_zedufsgekgex-2.start{counter-reset:lst-ctn-kix_zedufsgekgex-2 0}ol.lst-kix_77ngjtnr4xy0-5.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-5 0}.lst-kix_zedufsgekgex-1>li{counter-increment:lst-ctn-kix_zedufsgekgex-1}.lst-kix_77ngjtnr4xy0-5>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-5}ol.lst-kix_77ngjtnr4xy0-2.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-2 0}.lst-kix_9krdbto0mf6t-0>li:before{content:"\0025cf "}ol.lst-kix_zedufsgekgex-3.start{counter-reset:lst-ctn-kix_zedufsgekgex-3 0}ol.lst-kix_77ngjtnr4xy0-6.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-6 0}.lst-kix_77ngjtnr4xy0-7>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-7}.lst-kix_77ngjtnr4xy0-4>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-4}ol.lst-kix_zedufsgekgex-4.start{counter-reset:lst-ctn-kix_zedufsgekgex-4 0}.lst-kix_77ngjtnr4xy0-1>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-1}ol.lst-kix_77ngjtnr4xy0-0.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-0 0}.lst-kix_zedufsgekgex-2>li{counter-increment:lst-ctn-kix_zedufsgekgex-2}.lst-kix_zedufsgekgex-8>li{counter-increment:lst-ctn-kix_zedufsgekgex-8}.lst-kix_zedufsgekgex-5>li{counter-increment:lst-ctn-kix_zedufsgekgex-5}ol.lst-kix_77ngjtnr4xy0-7.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-7 0}.lst-kix_sjfi6gnc81zt-2>li:before{content:"\0025a0 "}.lst-kix_77ngjtnr4xy0-8>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-8}.lst-kix_sjfi6gnc81zt-1>li:before{content:"\0025cb "}.lst-kix_sjfi6gnc81zt-5>li:before{content:"\0025a0 "}.lst-kix_sjfi6gnc81zt-4>li:before{content:"\0025cb "}.lst-kix_sjfi6gnc81zt-3>li:before{content:"\0025cf "}ul.lst-kix_sjfi6gnc81zt-1{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-0{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-5{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-4{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-3{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-2{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-1 0}.lst-kix_sjfi6gnc81zt-6>li:before{content:"\0025cf "}ul.lst-kix_sjfi6gnc81zt-8{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-7{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-6{list-style-type:none}.lst-kix_sjfi6gnc81zt-8>li:before{content:"\0025a0 "}.lst-kix_zedufsgekgex-6>li{counter-increment:lst-ctn-kix_zedufsgekgex-6}.lst-kix_sjfi6gnc81zt-7>li:before{content:"\0025cb "}.lst-kix_zedufsgekgex-8>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-8,lower-roman) ". "}.lst-kix_zedufsgekgex-4>li{counter-increment:lst-ctn-kix_zedufsgekgex-4}.lst-kix_zedufsgekgex-7>li{counter-increment:lst-ctn-kix_zedufsgekgex-7}.lst-kix_zedufsgekgex-5>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-5,lower-roman) ". "}.lst-kix_zedufsgekgex-7>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-7,lower-latin) ". "}.lst-kix_zedufsgekgex-6>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-6,decimal) ". "}ol.lst-kix_zedufsgekgex-6.start{counter-reset:lst-ctn-kix_zedufsgekgex-6 0}.lst-kix_sjfi6gnc81zt-0>li:before{content:"\0025cf "}.lst-kix_9krdbto0mf6t-1>li:before{content:"\0025cb "}ol.lst-kix_zedufsgekgex-0{list-style-type:none}.lst-kix_zedufsgekgex-3>li{counter-increment:lst-ctn-kix_zedufsgekgex-3}.lst-kix_9krdbto0mf6t-2>li:before{content:"\0025a0 "}.lst-kix_9krdbto0mf6t-3>li:before{content:"\0025cf "}ol.lst-kix_77ngjtnr4xy0-3.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-3 0}.lst-kix_9krdbto0mf6t-4>li:before{content:"\0025cb "}.lst-kix_77ngjtnr4xy0-6>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-6,decimal) ". "}.lst-kix_77ngjtnr4xy0-7>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-7,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-8>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-8,lower-roman) ". "}.lst-kix_9krdbto0mf6t-5>li:before{content:"\0025a0 "}.lst-kix_9krdbto0mf6t-8>li:before{content:"\0025a0 "}.lst-kix_77ngjtnr4xy0-0>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-0}.lst-kix_77ngjtnr4xy0-1>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-1,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-2>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-2,lower-roman) ". "}.lst-kix_77ngjtnr4xy0-6>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-6}.lst-kix_zedufsgekgex-1>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-1,lower-latin) ". "}.lst-kix_zedufsgekgex-3>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-3,decimal) ". "}.lst-kix_9krdbto0mf6t-6>li:before{content:"\0025cf "}ol.lst-kix_zedufsgekgex-7.start{counter-reset:lst-ctn-kix_zedufsgekgex-7 0}.lst-kix_9krdbto0mf6t-7>li:before{content:"\0025cb "}.lst-kix_zedufsgekgex-0>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-0,decimal) ". "}ol.lst-kix_zedufsgekgex-0.start{counter-reset:lst-ctn-kix_zedufsgekgex-0 0}.lst-kix_zedufsgekgex-4>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-5>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-5,lower-roman) ". "}ol.lst-kix_zedufsgekgex-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4{list-style-type:none}ol.lst-kix_zedufsgekgex-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-3{list-style-type:none}ol.lst-kix_zedufsgekgex-2{list-style-type:none}ol.lst-kix_zedufsgekgex-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-3,decimal) ". "}.lst-kix_77ngjtnr4xy0-4>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-4{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-0{list-style-type:none}.lst-kix_zedufsgekgex-2>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-2,lower-roman) ". "}ol.lst-kix_zedufsgekgex-3{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-4 0}.lst-kix_77ngjtnr4xy0-0>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-0,decimal) ". "}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}ol.lst-kix_zedufsgekgex-1.start{counter-reset:lst-ctn-kix_zedufsgekgex-1 0}ol{margin:0;padding:0}table td,table th{padding:0}.c32{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:0pt;border-top-style:solid;background-color:#f1f3f4;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c0{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;background-color:#f1f3f4;border-left-style:solid;border-bottom-width:1pt;width:100pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c22{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:0pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;background-color:#f1f3f4;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c33{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:0pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c11{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:112.9pt;border-top-color:#000000;border-bottom-style:solid}.c23{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:0pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:125.7pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c24{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#bdc1c6;border-top-width:1pt;border-right-width:1pt;border-left-color:#bdc1c6;vertical-align:top;border-right-color:#bdc1c6;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:100pt;border-top-color:#bdc1c6;border-bottom-style:solid}.c25{margin-left:36pt;padding-top:0pt;padding-bottom:16pt;line-height:1.0;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c15{color:#ff9900;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Roboto";font-style:normal}.c34{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:13pt;font-family:"Arial";font-style:normal}.c35{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Ubuntu";font-style:normal}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c6{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:19pt;font-family:"Arial";font-style:italic}.c28{padding-top:18pt;padding-bottom:6pt;line-height:1.0;page-break-after:avoid;orphans:2;widows:2;text-align:center}.c13{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c19{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Ubuntu";font-style:normal}.c26{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c36{margin-left:36pt;padding-top:20pt;padding-bottom:6pt;line-height:1.0;page-break-after:avoid;text-align:left}.c20{color:#000000;text-decoration:none;vertical-align:baseline;font-size:26pt;font-style:normal}.c21{color:#666666;text-decoration:none;vertical-align:baseline;font-size:15pt;font-style:normal}.c37{padding-top:0pt;padding-bottom:3pt;line-height:1.0;page-break-after:avoid;text-align:left}.c30{color:#000000;text-decoration:none;vertical-align:baseline;font-size:20pt;font-style:normal}.c2{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c8{margin-left:36pt;padding-left:0pt;orphans:2;widows:2}.c31{border-spacing:0;border-collapse:collapse;margin-right:auto}.c39{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c3{font-family:"Roboto";color:#1155cc;font-weight:400}.c17{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration:underline}.c5{padding:0;margin:0}.c16{margin-left:36pt;padding-left:0pt}.c10{font-weight:400;font-family:"Roboto"}.c18{font-weight:700;font-family:"Roboto"}.c29{orphans:2;widows:2}.c38{color:inherit;text-decoration:inherit}.c27{color:#0000ee}.c14{background-color:#ff9900}.c12{font-style:italic}.c7{height:11pt}.c9{height:0pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c39 doc-content"><p class="c29 c37 title" id="h.vrdkew492fff"><span class="c10 c20">Website Title</span></p><p class="c25 subtitle" id="h.66112negqu7i"><span class="c10 c21">Desc</span></p><h1 class="c29 c36" id="h.2a5rnjbk5zp6"><span class="c10 c30">Website smaller title</span></h1><p class="c2 c29"><span class="c10">The </span><span class="c18">following</span><span class="c10"> content </span><span class="c10 c12">is</span><span class="c10"> for </span><span class="c10 c17">testing</span><span class="c10"> the functionality of </span><span class="c17 c18 c12">Google Docs</span><span class="c10"> as a </span><span class="c3"><a class="c38" href="https://www.google.com/url?q=https://document10.github.io/&sa=D&source=editors&ust=1708111620537886&usg=AOvVaw3wTPsFTTDqNdooSIbaXEw0">website builder</a></span><span class="c4"> tool.</span></p><h2 class="c28" id="h.8pk3e87o5cuv"><span class="c35">Even smaller title</span></h2><ul class="c5 lst-kix_9krdbto0mf6t-0 start"><li class="c2 c8 li-bullet-0"><span class="c15">List</span></li><li class="c2 c8 li-bullet-0"><span class="c1 c14">List</span></li><li class="c2 c8 li-bullet-0"><span class="c34">List</span></li></ul><ol class="c5 lst-kix_77ngjtnr4xy0-0 start" start="1"><li class="c2 c8 li-bullet-0"><span class="c6">List</span></li><li class="c2 c8 li-bullet-0"><span class="c19">List</span></li><li class="c2 c8 li-bullet-0"><span class="c1">List</span></li></ol><p class="c2 c29"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 313.33px;"><img alt="" src="images/image3.png" style="width: 601.70px; height: 313.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c26" dir="rtl"><span class="c1">Some text contained here.</span></p><a id="t.b4d587ff15870bee40efb646351b1aba88ca1acc"></a><a id="t.0"></a><table class="c31"><tr class="c9"><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">11</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">12</span></p></td><td class="c11" colspan="1" rowspan="1"><ol class="c5 lst-kix_zedufsgekgex-0 start" start="1"><li class="c2 c16 li-bullet-0"><span class="c1">13</span></li></ol></td><td class="c11" colspan="1" rowspan="1"><ul class="c5 lst-kix_sjfi6gnc81zt-0 start"><li class="c2 c16 li-bullet-0"><span class="c1">14</span></li></ul></td></tr><tr class="c9"><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">21</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">22</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">23</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">24</span></p></td></tr><tr class="c9"><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">31</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">32</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">33</span></p></td><td class="c11" colspan="1" rowspan="1"><p class="c2"><span class="c1">34</span></p></td></tr></table><p class="c26"><img src="images/image1.png"></p><a id="t.4988a7a6e0ce213ad52679ac1afa2db5ffc0b62e"></a><a id="t.1"></a><table class="c31"><thead><tr class="c9"><td class="c32" colspan="1" rowspan="1"><p class="c2"><span class="c13">Proiect</span></p></td><td class="c0" colspan="1" rowspan="1"><p class="c2"><span class="c13">Stare</span></p></td><td class="c0" colspan="1" rowspan="1"><p class="c2"><span class="c13">Fișiere asociate</span></p></td><td class="c22" colspan="1" rowspan="1"><p class="c2"><span class="c13">Note</span></p></td><tbody></tbody></tr><tr class="c9"><td class="c33" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span class="c17 c27">Neînceput</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span>Fișier</span></p></td><td class="c23" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td></tr><tr class="c9"><td class="c33" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span class="c17 c27">În desfășurare</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span>Fișier</span></p></td><td class="c23" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td></tr><tr class="c9"><td class="c33" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span class="c17 c27">Lansat</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c2"><span>Fișier</span></p></td><td class="c23" colspan="1" rowspan="1"><p class="c2 c7"><span class="c1"></span></p></td></tr></thead></table><p class="c26"><span class="c17 c27">Neînceput</span><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 292.00px; height: 260.00px;"><img alt="" src="images/image4.png" style="width: 292.00px; height: 260.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 372.00px;"><img alt="" src="images/image2.png" style="width: 601.70px; height: 372.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title="Points scored"></span></p></body></html>
This time around, quite a lot of things were broken, since there was more interactivity going on. I suggest not to look at the code too hard as it's really messy.
Actually trying to build a website
Enough messing auround now it's time to actually build a functional website and see how useful it is. My first idea was of a blog post about the 5 cutest dog breeds, but since I'm not an expert in dogs, I asked ChatGPT Microsoft Copilot to give me the text for this post using this prompt:
You are the writer for a blog related to nature and lifestyle. Your job is to create a post about the 5 cutest dog breeds in the world. The post should contain a good introduction that instantly catches the readers' attention, and it should be well organised into multiple sections.
Right away, the AI generated the text and organised it in the typical blogpost style. It also attempted to add images but those seem to be broken so I had to look for images myself.
Another problem was that the post was provided in Markdown.This makes sense since most posts (including this one) are written in this way, but for my usecase I just needed plain text, because I would add the formatting afterwards. Also Google Docs's markdown support doesn't seem to work when pasting large walls of text at once, so I had to convert the code to regular text and apply styling manually.
Next, I needed some images (some that are actually working), so I went on Google Images and grabbed the first image that made sense, and placed it in the document.
Of course, if I want to be a good blog writter, I would also need to fact-check the information given by the AI (better yet not use AI at all), as well as ensure that none of the images aren't copyright protected, but since this was just a demo, I will skip on these steps.
Lastly, I downloaded the page, opened it and it actually ended up looking great. There was of course a lot more things I could've done to make the page look better, but the initial result ended up looking pretty nice.Here's the source code of the website, minus working images:
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">ol.lst-kix_77ngjtnr4xy0-8.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-8 0}.lst-kix_77ngjtnr4xy0-2>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-2}.lst-kix_zedufsgekgex-0>li{counter-increment:lst-ctn-kix_zedufsgekgex-0}ul.lst-kix_9krdbto0mf6t-7{list-style-type:none}ul.lst-kix_9krdbto0mf6t-8{list-style-type:none}ul.lst-kix_9krdbto0mf6t-3{list-style-type:none}ul.lst-kix_9krdbto0mf6t-4{list-style-type:none}ul.lst-kix_9krdbto0mf6t-5{list-style-type:none}ol.lst-kix_zedufsgekgex-8.start{counter-reset:lst-ctn-kix_zedufsgekgex-8 0}ul.lst-kix_9krdbto0mf6t-6{list-style-type:none}ul.lst-kix_9krdbto0mf6t-0{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-3}ul.lst-kix_9krdbto0mf6t-1{list-style-type:none}ul.lst-kix_9krdbto0mf6t-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5.start{counter-reset:lst-ctn-kix_zedufsgekgex-5 0}ol.lst-kix_zedufsgekgex-2.start{counter-reset:lst-ctn-kix_zedufsgekgex-2 0}ol.lst-kix_77ngjtnr4xy0-5.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-5 0}.lst-kix_zedufsgekgex-1>li{counter-increment:lst-ctn-kix_zedufsgekgex-1}.lst-kix_77ngjtnr4xy0-5>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-5}ol.lst-kix_77ngjtnr4xy0-2.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-2 0}.lst-kix_9krdbto0mf6t-0>li:before{content:"\0025cf "}ol.lst-kix_zedufsgekgex-3.start{counter-reset:lst-ctn-kix_zedufsgekgex-3 0}ol.lst-kix_77ngjtnr4xy0-6.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-6 0}.lst-kix_77ngjtnr4xy0-7>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-7}.lst-kix_77ngjtnr4xy0-4>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-4}ol.lst-kix_zedufsgekgex-4.start{counter-reset:lst-ctn-kix_zedufsgekgex-4 0}.lst-kix_77ngjtnr4xy0-1>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-1}ol.lst-kix_77ngjtnr4xy0-0.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-0 0}.lst-kix_zedufsgekgex-2>li{counter-increment:lst-ctn-kix_zedufsgekgex-2}.lst-kix_zedufsgekgex-8>li{counter-increment:lst-ctn-kix_zedufsgekgex-8}.lst-kix_zedufsgekgex-5>li{counter-increment:lst-ctn-kix_zedufsgekgex-5}ol.lst-kix_77ngjtnr4xy0-7.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-7 0}.lst-kix_sjfi6gnc81zt-2>li:before{content:"\0025a0 "}.lst-kix_77ngjtnr4xy0-8>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-8}.lst-kix_sjfi6gnc81zt-1>li:before{content:"\0025cb "}.lst-kix_sjfi6gnc81zt-5>li:before{content:"\0025a0 "}.lst-kix_sjfi6gnc81zt-4>li:before{content:"\0025cb "}.lst-kix_sjfi6gnc81zt-3>li:before{content:"\0025cf "}ul.lst-kix_sjfi6gnc81zt-1{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-0{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-5{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-4{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-3{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-1 0}ul.lst-kix_sjfi6gnc81zt-2{list-style-type:none}.lst-kix_sjfi6gnc81zt-6>li:before{content:"\0025cf "}ul.lst-kix_sjfi6gnc81zt-8{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-7{list-style-type:none}ul.lst-kix_sjfi6gnc81zt-6{list-style-type:none}.lst-kix_zedufsgekgex-6>li{counter-increment:lst-ctn-kix_zedufsgekgex-6}.lst-kix_sjfi6gnc81zt-8>li:before{content:"\0025a0 "}.lst-kix_sjfi6gnc81zt-7>li:before{content:"\0025cb "}.lst-kix_zedufsgekgex-8>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-8,lower-roman) ". "}.lst-kix_zedufsgekgex-4>li{counter-increment:lst-ctn-kix_zedufsgekgex-4}.lst-kix_zedufsgekgex-7>li{counter-increment:lst-ctn-kix_zedufsgekgex-7}.lst-kix_zedufsgekgex-5>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-5,lower-roman) ". "}.lst-kix_zedufsgekgex-7>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-7,lower-latin) ". "}.lst-kix_zedufsgekgex-6>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-6,decimal) ". "}ol.lst-kix_zedufsgekgex-6.start{counter-reset:lst-ctn-kix_zedufsgekgex-6 0}.lst-kix_sjfi6gnc81zt-0>li:before{content:"\0025cf "}.lst-kix_9krdbto0mf6t-1>li:before{content:"\0025cb "}ol.lst-kix_zedufsgekgex-0{list-style-type:none}.lst-kix_zedufsgekgex-3>li{counter-increment:lst-ctn-kix_zedufsgekgex-3}.lst-kix_9krdbto0mf6t-2>li:before{content:"\0025a0 "}.lst-kix_9krdbto0mf6t-3>li:before{content:"\0025cf "}ol.lst-kix_77ngjtnr4xy0-3.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-3 0}.lst-kix_9krdbto0mf6t-4>li:before{content:"\0025cb "}.lst-kix_77ngjtnr4xy0-6>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-6,decimal) ". "}.lst-kix_77ngjtnr4xy0-7>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-7,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-8>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-8,lower-roman) ". "}.lst-kix_9krdbto0mf6t-5>li:before{content:"\0025a0 "}.lst-kix_9krdbto0mf6t-8>li:before{content:"\0025a0 "}.lst-kix_77ngjtnr4xy0-0>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-0}.lst-kix_77ngjtnr4xy0-1>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-1,lower-latin) ". "}.lst-kix_77ngjtnr4xy0-2>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-2,lower-roman) ". "}.lst-kix_77ngjtnr4xy0-6>li{counter-increment:lst-ctn-kix_77ngjtnr4xy0-6}.lst-kix_zedufsgekgex-1>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-1,lower-latin) ". "}.lst-kix_zedufsgekgex-3>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-3,decimal) ". "}.lst-kix_9krdbto0mf6t-6>li:before{content:"\0025cf "}ol.lst-kix_zedufsgekgex-7.start{counter-reset:lst-ctn-kix_zedufsgekgex-7 0}.lst-kix_9krdbto0mf6t-7>li:before{content:"\0025cb "}.lst-kix_zedufsgekgex-0>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-0,decimal) ". "}ol.lst-kix_zedufsgekgex-0.start{counter-reset:lst-ctn-kix_zedufsgekgex-0 0}.lst-kix_zedufsgekgex-4>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-2{list-style-type:none}ol.lst-kix_zedufsgekgex-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-5>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-5,lower-roman) ". "}ol.lst-kix_zedufsgekgex-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4{list-style-type:none}ol.lst-kix_zedufsgekgex-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-3{list-style-type:none}ol.lst-kix_zedufsgekgex-2{list-style-type:none}ol.lst-kix_zedufsgekgex-1{list-style-type:none}.lst-kix_77ngjtnr4xy0-3>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-3,decimal) ". "}.lst-kix_77ngjtnr4xy0-4>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-4,lower-latin) ". "}ol.lst-kix_zedufsgekgex-4{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-0{list-style-type:none}.lst-kix_zedufsgekgex-2>li:before{content:"" counter(lst-ctn-kix_zedufsgekgex-2,lower-roman) ". "}ol.lst-kix_zedufsgekgex-3{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-6{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-5{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-8{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-7{list-style-type:none}ol.lst-kix_77ngjtnr4xy0-4.start{counter-reset:lst-ctn-kix_77ngjtnr4xy0-4 0}.lst-kix_77ngjtnr4xy0-0>li:before{content:"" counter(lst-ctn-kix_77ngjtnr4xy0-0,decimal) ". "}ol.lst-kix_zedufsgekgex-1.start{counter-reset:lst-ctn-kix_zedufsgekgex-1 0}ol{margin:0;padding:0}table td,table th{padding:0}.c6{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c7{padding-top:0pt;padding-bottom:16pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c9{color:#666666;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:15pt;font-family:"Arial";font-style:normal}.c5{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:26pt;font-family:"Arial";font-style:normal}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c4{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:20pt;font-family:"Arial";font-style:normal}.c0{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c1{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c8{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c2{height:11pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c8 doc-content"><p class="c6 title" id="h.6i5d3wx1cbp0"><span class="c5"> 🐾 The Top 5 Cutest Dog Breeds That Will Melt Your Heart! 🐾</span></p><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 600.00px; height: 400.00px;"><img alt="" src="images/image2.png" style="width: 600.00px; height: 400.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">Are you ready to embark on a delightful journey through the world of adorable canines? Look no further! In this post, we'll introduce you to the five most charming and endearing dog breeds that will leave you grinning from ear to ear. From fluffy furballs to pint-sized companions, these pups are guaranteed to steal your heart. So, grab your favorite mug of cocoa, snuggle up, and let's dive into the world of irresistible cuteness!</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.57dtw4qh0c15"><span class="c4">1. Cavalier King Charles Spaniel</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image4.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">The Cavalier King Charles Spaniel is the epitome of elegance and sweetness. With their expressive eyes and silky, feathered ears, they look like they stepped straight out of a fairy tale. These little charmers are affectionate, gentle, and thrive on cuddles. Whether they're perched on your lap or chasing butterflies in the garden, their regal demeanor and wagging tails will make you swoon.</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.2ki5f5b14m84"><span class="c4">2. Pomeranian</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image5.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">Don't let their small size fool you—Pomeranians pack a punch of cuteness! These fluffy balls of energy have a lion-like mane and an attitude to match. Their vibrant personalities and playful antics will keep you entertained for hours. Plus, their fox-like faces and plume-like tails make them irresistible Instagram models. Prepare for daily doses of "aww" as you watch your Pomeranian conquer hearts wherever they go.</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.hx7fh0kcir6r"><span class="c4">3. French Bulldog</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 600.00px; height: 400.00px;"><img alt="" src="images/image6.png" style="width: 600.00px; height: 400.00px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1"><span class="c3">Meet the French Bulldog, the pint-sized powerhouse of charm. Their bat-like ears, wrinkled snouts, and stocky bodies exude charisma. Despite their comical appearance, Frenchies are loyal, affectionate, and downright adorable. Whether they're snuggling under blankets or attempting yoga poses, their quirky expressions will leave you grinning. Warning: Owning a French Bulldog may lead to spontaneous laughter fits.</span></p><h1 class="c0" id="h.bxfs9949oong"><span class="c4">4. Shiba Inu</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image3.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1 c2"><span class="c3"></span></p><p class="c1 c2"><span class="c3"></span></p><p class="c1"><span class="c3">Shiba Inus are the embodiment of "small but mighty." These Japanese treasures have a fox-like appearance, with plush coats and a confident strut. Their independence and mischievous nature add to their charm. Picture a Shiba Inu perched on a hill, surveying the world with those soulful eyes—utterly captivating! Just be prepared for their sassy attitude and occasional bursts of zoomies.</span></p><p class="c1 c2"><span class="c3"></span></p><h1 class="c0" id="h.pcklpf9cjfl1"><span class="c4">5. Dachshund</span></h1><p class="c1"><span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 601.70px; height: 401.33px;"><img alt="" src="images/image1.png" style="width: 601.70px; height: 401.33px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><p class="c1 c2"><span class="c3"></span></p><p class="c1"><span class="c3">Last but not least, we have the Dachshund, also known as the "wiener dog." Their elongated bodies and short legs make them look like hot dogs with tails. But don't be fooled—these little sausages are bursting with personality! Dachshunds are playful, curious, and fiercely loyal. Whether they're burrowing under blankets or chasing squirrels, their determination and cuteness will win you over.</span></p><p class="c1 c2"><span class="c3"></span></p><p class="c7 subtitle" id="h.h1keun3cqdyy"><span class="c9">So there you have it—the fabulous five dog breeds that redefine cuteness. Which one stole your heart? Let us know in the comments below! 🐶❤️</span></p><p class="c1 c2"><span class="c3"></span></p></body></html>
Advantages and Disadvantages
Now that I played around enough with this "website builder" , it's time to talk about the ups and downs of this tool. There are lots of nuances with Google Docs so let's go through them:
Advantages
Easy to use
By design, Google Docs is made to be very easy to understand, even by someone who never had any experience with word processors and such. And if you do, then even better. This means that building a website is pretty straightforward (with some caveats that we will discuss later).
Made by Google
This can be a double-edged sword and we'll talk about this later, but because this is made by Google, you don't need any extra accounts or login details since pretty much everyone owns a Google account at this point. You can take advantage of syncing across devices, collaboration, extentions, and the list goes on.
Markdown support
I did test Google Docs' markdown support too, and it's basically what you would expect from a markdown editor. Markdown makes posts so easy to make, so it's a great tool to have for your website
Disavantages
While Google Docs as a website builder can be quite useful, there are enough downsides to using it that i wouldn't recommend this tool for anything serious.
Lack of advanced styling/elements
The Achille's heel for this tool, there is no way to create advanced designs, like the ones we see in modern websites. Also, there is no way to add fancy interactive elements by default, which makes this only useful for basic blog posts, and even there its better to just build it yourself.
And sure, Google Docs has a wide extentions ecosystem, but it;s unlikely they'll actually work on the web, since they were designed with viewing the document normally in mind, and this also adds unnecesary overhead.
Spagetti code
You probably noticed that the code given out by Google Docs is a one liner mess, and it's hard to navigate. This structuring of the code makes sense, since the document could be stored on some flash drive or could be sent on the internet, where file sizes do matter. But even then it's more practical to export the document as PDF or DOCX, and if you need to look through the document to make changes, something you will have to do if you want the website to look good, you're going to have a tough time.
Owned by Google
I mentioned previously that this tool being owned by Google is a great advantage, but it can also be a bad thing, for multiple reasons. Putting any privacy concerns to the side, the big problems come once your Google account gets banned or restricted. This can be especially bad if you're using an account controlled by an organisation, which was the case for the account I used to edit the project document I mentioned at the begining. Having your organisation view your website endeavours can be a pretty awkward conversation starter.
Finally, if your Google Drive space is full, you won't be able to edit your website, and the 15 GB we get for free can be filled up really fast if you also have a phone using the same Google account to back up photos.
No hosting provided
Finally, with Google Docs you don't have a direct way to host the website. Instead you're provided with the source code of the website, and you need to figure out how to host it yourself. This might not be an issue for some people. In fact, I could figure out how to set up Nginx or some other HTTPS server in one weekend, but not everyone has the time or knowledge for doing this. This is one of the main selling points of automatic website builders like Wix or Squarespace, they not only make building the website easier, but they also deal with the annoying backend stuff for you, like hosting the website, server maintenance and sometimes even make getting a domain name easier.
Should you use this tool?
The short answer is no. There are better tools to build websites that offer similar, if not better features compared to Google Docs, and they may not be too pricy either. However I still see this as a useful learning tool, if you're just getting started in web developement. You can see how the web works, but also what bad developer practices to avoid.
Top comments (0)