Web Page Template

for a HTML + CSS + JavaScript static website

\n This Val Town project can help you get started with a static website that\n uses the three key parts of modern web pages: HTML, CSS, and JavaScript.\n Static means that the code for the page is always the same and\n looks the same for every user. As you will learn, static web pages can\n still have a lot of activity.\n

\n To get started:\n

Create an account on Val Town
Go to the project page for this template
\n Click the \"Remix\" button to create your own copy of this project\n
Experiment with making changes to the files described below

\n If you end up with odd results that you can't fix, remember that you can\n remix this template again to start over.\n

index.html

\n This file is the core of this basic web page. It includes all of the text\n that you see on the screen. In fact, typing some text is enough to create\n a very simple web page. Generally, though, this file is written in HyperText Markup Language\n which allows tha page to display formatting, links, pictures, and other\n elements to create a more useful layout.\n

style.css

\n This file contains a set of rules for how to style the page. \"Style\" can\n include colors, fonts, backgrounds and more. On a web page, style also\n includes the placement of the HTML elements and how to adjust that\n placement for different-sized screens. In this template, the style,css\n file is empty for you to create your own rules as needed.\n

\n script.js\n

\n This file contains the JavaScript code that will be run when the page\n loads. JavsScipt allows your page to do things - interact with the user,\n calulate results, change items on the screen, and much more. It is even\n possbile to draw large sections of the page completely in JavaScript for\n graphics or animations. This JavaScript file runs completely on the user's\n computer, so the web server does not have any extra load for doing this\n work.\n

\n main.ts\n

\n This is a small bit of code that tells the web server how to send your\n files to the user. There are more poweful things that can be done with\n this file, but for a basic website, it can be left alone.\n

\n \n","deleted","label","children",[],[162],{"_104":180,"_97":181,"_163":117,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":182,"_101":33,"_170":183,"_172":184,"_174":22,"_175":-5,"_176":185,"_100":186},"1227f11c-036d-11f1-acc8-42dde27851f2","main.ts",["D",1770390241087],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[],[181],{"_104":188,"_97":189,"_163":190,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":191,"_101":33,"_170":192,"_172":74,"_174":22,"_175":-5,"_176":193,"_100":194},"1227fb6c-036d-11f1-acc8-42dde27851f2","script.js","019c337b-413d-71bd-bfab-f231d1643c3b",["D",1770390241087],"script",[],[189],{"_104":196,"_97":197,"_163":198,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":199,"_101":33,"_170":171,"_172":200,"_174":22,"_175":-5,"_176":201,"_100":202},"1227fe0a-036d-11f1-acc8-42dde27851f2","style.css","019c337b-413d-71bd-bfab-f5c1097b3b9f",["D",1770390241087],"* {\n box-sizing: border-box; /* Ensures padding/border are included in the element's width calculation */\n}\n\nbody {\n background-color: lightcyan;\n}",[],[197],"files",[160,179,187,195],"counts",{"_207":33,"_208":145,"_209":33,"_210":211,"_214":215},"pulls","branches","forks","envVars",{"_212":33,"_213":33},"count","emptyCount","connections",{"_212":33,"_216":33},"unfilledCount","contents",[219,222,225,228],{"_104":161,"_97":162,"_163":164,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":220,"_101":33,"_170":171,"_172":173,"_174":22,"_175":-5,"_100":221},["D",1770390241087],[162],{"_104":180,"_97":181,"_163":117,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":223,"_101":33,"_170":183,"_172":184,"_174":22,"_175":-5,"_100":224},["D",1770390241087],[181],{"_104":188,"_97":189,"_163":190,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":226,"_101":33,"_170":192,"_172":74,"_174":22,"_175":-5,"_100":227},["D",1770390241087],[189],{"_104":196,"_97":197,"_163":198,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":229,"_101":33,"_170":171,"_172":200,"_174":22,"_175":-5,"_100":230},["D",1770390241087],[197],"upstreamProject",{"_104":153,"_97":233,"_112":113,"_114":-5,"_110":111,"_23":234},"html-css-js-template",{"_95":96,"_136":137},"upstreamBranch",{"_104":149,"_106":237,"_238":239,"_97":45,"_147":153,"_101":145,"_148":240,"_150":241,"_242":243,"_108":-5,"_157":22,"_110":111,"_156":96,"_16":123,"_155":233},["D",1767712128081],"updatedAt",["D",1767712128081],"70f419a8-ea65-11f0-9dd5-42dde27851f2",8,"lockfileKey","1767712129072-esm.town_v_sammyk1234_html-css-js-template@1-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_95":96,"_97":98,"_99":-7,"_101":-7,"_102":250,"_217":255,"_264":-7,"_265":266,"_269":-5,"_203":270,"_283":274,"_284":33,"_285":33,"_286":22,"_287":22},{"_104":105,"_97":98,"_106":251,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":-5,"_122":33,"_16":123,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":252,"_138":253,"_143":254,"_157":22},["D",1770390241087],{"_95":96,"_136":137},{"_95":96,"_140":137,"_14":115,"_141":142},{"_101":145,"_97":45,"_104":146,"_147":105,"_148":149,"_150":145,"_151":111,"_152":153,"_154":123,"_155":98,"_156":96},[256,258,260,262],{"_104":161,"_97":162,"_163":164,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":220,"_101":33,"_170":171,"_172":173,"_174":22,"_175":-5,"_100":257},[162],{"_104":180,"_97":181,"_163":117,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":223,"_101":33,"_170":183,"_172":184,"_174":22,"_175":-5,"_100":259},[181],{"_104":188,"_97":189,"_163":190,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":226,"_101":33,"_170":192,"_172":74,"_174":22,"_175":-5,"_100":261},[189],{"_104":196,"_97":197,"_163":198,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":229,"_101":33,"_170":171,"_172":200,"_174":22,"_175":-5,"_100":263},[197],"readme","upstream",{"_104":149,"_106":267,"_238":268,"_97":45,"_147":153,"_101":145,"_148":240,"_150":241,"_242":243,"_108":-5,"_157":22,"_110":111,"_156":96,"_16":123,"_155":233},["D",1767712128081],["D",1767712128081],"pull",[271,274,277,280],{"_104":161,"_97":162,"_163":164,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":169,"_101":33,"_170":171,"_172":173,"_174":22,"_175":-5,"_176":272,"_100":273},[],[162],{"_104":180,"_97":181,"_163":117,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":182,"_101":33,"_170":183,"_172":184,"_174":22,"_175":-5,"_176":275,"_100":276},[],[181],{"_104":188,"_97":189,"_163":190,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":191,"_101":33,"_170":192,"_172":74,"_174":22,"_175":-5,"_176":278,"_100":279},[],[189],{"_104":196,"_97":197,"_163":198,"_165":-5,"_166":146,"_167":145,"_168":119,"_106":199,"_101":33,"_170":171,"_172":200,"_174":22,"_175":-5,"_176":281,"_100":282},[],[197],"preview","ahead","behind","showHomeCustomizationHint","showHTTPPreviewSettingsHint","actionData","errors"]

sammyk1234

flex-box