Good resource on writing web app with plain JavaScript/HTML/CSS?

Some of these responses… wow.

Using modern HTML and CSS will get you pretty far these days.

For example, dealing with forms used to be problematic in a few different ways without JavaScript or something server-side.

Now form validation can be done with CSS [1].

For example, static site hosts like Netlify have services for dealing with the form data [2]. 100 free form submissions per month.

I agree that tooling is out of control. Jekyll [3] is great for getting started with building static sites. When using Jekyll, my build tool of choice is a Makefile [4].

[1]: https://webkit.org/blog/13096/css-has-pseudo-class/#styling-...

[2]: https://www.netlify.com/products/forms/

[3]: https://jekyllrb.com/

[4]: https://blog.mads-hartmann.com/2016/08/20/make.html

Let me share my recommended learning resources using Divio's model.

1. overview/explanation:

- https://web.dev/learn

- https://www.patterns.dev

2. (hands-on) tutorial:

- https://github.com/microsoft/Web-Dev-For-Beginners

- https://freecodecamp.org

- https://www.theodinproject.com (note: includes React)

- https://fullstackopen.com/en (note: includes React & GraphQL)

- online courses -- recommendation: CSS for JavaScript Developers and Three.js Journey

3. how-to guide:

- https://css-tricks.com

- developer blogs

4. reference:

- https://developer.mozilla.org

- https://javascript.info

Start here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fo...

Once you throw a few input elements and a submit button into an html file, you can use the network tab in your browser's "Web Developer Tools" or "Inspector" to see how the form submission looks over the network.

You will need some kind of stack on the server to interpret the submission and do something, like stash it in a database or maybe in your case just append a string to a file. I like Node and use nothing but its built-ins for creating servers and writing to my filesystem.

Speaking of built-ins, python and php can be good too, they can create and interface with sqlite databases out of the box.

So I don't have an exact direction to point you but feel for you re: crap medium articles. I found it worth paying $25 to https://teamtreehouse.com/ to choose from the many tutorials there, lots of intro content of good quality.

MariaDB/MySQL + PHP + HTML/CSS and some vainilla JavaScript if necessary. What else is needed? I deploy in production using FTP. My version control is ZIP files in some old hard drive. Of course, this won't work if you're working in a team or are developing a huge web app, but for 99% of use cases, this just works.

The only thing I focus on is valid markup, accessibility, performance, good error handling, and getting a 100% in Lighthouse. At least I'm doing better than my bank's "modern" home banking app in Angular that breaks half of the time and can't even handle multiple tabs :)

Me and other contributors are writing and maintaining "Web app from scratch" scripts for popular frameworks here:

https://github.com/no-gravity/web_app_from_scratch

The idea is to have a self-explanatory shell script for each framework, which turns a fresh Debian installation into a running web application with routing, templates and user accounts.

So far, we have Django, Flask, Laravel and Symfony. In various stages.

If you look into the scripts, you see that they are pretty much tutorials in code form. Reading one of them shouldn't take more than 10 minutes. After that, you know exactly what your web app does.

Complexity is slowly winding down with next generation frameworks like Svelte and SolidJS, but I suppose you don't want that anyway.

For the front-end you probably want at least a CSS framework. I recommend this:

https://kylelogue.github.io/mustard-ui/index.html

It looks good and doesn't have strange font-size hacks that could make it incompatible with external CSS.

IIRC it's possible to include it as a single CSS file and call it a day.

You don't need JS at all for a simple form.

As for the backend: I unironically recommended PHP. It's a whole rabbit hole of different solutions, but you can always fall back to a framework-less solution. Just be mindful of security issues.

I was in the same boat with wanting to just learn plain HTML/CSS/JavaScript.

Mozilla docs didn't quite do it for me but I swear by W3SCHOOLS website.

I also found this guy's website helpful: https://gomakethings.com/

I think the author is on HN; he swears by plain JS.

For me I just wanted to write a simple cross platform app, I decided Dart/Flutter was the way to go in the end.

I don’t want to copy and paste instructions and throw something together without a clue what’s going on

Don’t read medium. Web world has less order than MSVS world, so you have to settle on a tech stack first and read these manuals. Also don’t think “hey it’s just web, I’ll figure it out”, it’s a path to headaches.

Here is my advice, based on I avoid frameworks but still get it done.

“Just html, css, js” will get old quickly, like in half an hour or so. You want to try it much later, after feeling okay in webdev.

For frontend start with Parcel or Vite, both are zero-config bundlers (as in compile, link, autoreload). You’ll need a separate Node.js-based project for a frontend. Use Bootstrap for CSS, since you can’t css yourself from ground up and don’t really want. Use Sass for CSS (you have it out of box with Parcel/Vite).

After a week or two with pure DOM, take a look at jQuery ecosystem, Mithril.js and Vue.

Frontend runs in a browser and is limited in what it can do.

For a simple backend (it talks to files/db, basically a regular program with an http server instead of gui) there are js and non-js options. Node.js Express. Python Flask. The key idea for searches in other languages is “I want to serve few files and api routes”. Make backend a separate project, web world is not zero-config ready for all-in-one projects.

Read most relevant parts of each manual and don’t visit medium unless you’re “in context” and know what you want exactly, but forgot where it was in a manual.

References: MDN, CSS-Tricks.

Stack: Node.js, Parcel/Vite, Bootstrap.css, Sass, Express/Flask.

This will be a good starter with a straightforward setup.

To give you some perspective for where you're coming from: it's like you're inquiring whether it's possible to write a GUI app on Windows in C without all the complexity of Visual Studio tooling and WinForms Builder. You also don't want to be bothered with dependencies. That's essentially what you're looking at here. A very small standard library and you have to reinvent the wheel for a lot of things that should exist out-of-the-box.

Sure if it's a single page "app" with just a form you're gonna be fine. But what if it's expanding to two pages? Suddenly you have to maintain at the very least a separate header for two html pages including all meta and resource tags. Web Frameworks take care of that. So my advice would be to at least look at static site generators if you think this is where the project is headed.

Looking at the state of these comments, modern day front end dev is truly ridiculous. There's not one common answer or approach suggested.

You don't need framework. You can create classes, make api requests (axios), add 3rd party libraries in vanilla.

The only thing you have to watch out for if you are making a public app (but I think you are doing internal) is security- in vanilla you must implement protection yourself (xss, content secuirity policy etc.) and most modern frameworks already either implement that or make it easier to do.

I purposely wrote my home page (https://langworth.com) with plain, vanilla JavaScript, which features both WebGL and plaintext clients for a server-side text adventure game, because I wanted to remind myself that it's not that difficult to build something interactive and fun without miles of modern front-end tooling.

It started as a single page but I eventually broke it out into a few files for organization. The WebGL parts are lengthy and boilerplate-y because, well, that's GL for you. https://github.com/statico/langterm

I would advice you to at least use some kind of web component wrapper. I have used https://lit.dev/ a lot, even to build a large app and it works really well. You can get started very quickly and the experience stay true to the underlying platform.

I think lit is really a library that deserves more attention since it's so good.

Unless you simply want server rendered html, you can achieve that easily with htmx to get a bit better experience. Then you may use whatever language you want and just return html.

I am an amateur developper who codes for fun (and to make my family's life miserable though automation or a home chores app). I have a large background in IT and sysadmin-style coding.

This is not the answer you are waiting for but hear me out. If you plan to write some code beyond that single one page then I would really, really recommend investing time in a *simple* framework that does everything.

I use Quasar for any application/page I am writing. It is based off Vue3 and provides plenty of components. Anything beyond 3 lines of HTML (literally) becomes a Quasar app. Yes it is overkill. yes it creates big apps for a simple content. yes, yes yes.

But it also means that whatever problem I have, I have a solution that works everytime and I can scale up if I need to.

I have applications with a form and a button. I have applications that became PWAs. I am not a developper so I did not have a clear idea at the beginning what the effort or future would be.

Quasar helps me to not worry about that. A form and button application is 5 minutes. A 1à forms and 3 buttons and some processing is 5 minutes. Making a PWA and mobile app from that is 1 more minute.

Your form suddenly transforms into a monstrosity where users want to see the time, weather and the result of 16x34. You got it covered.

My case is a very specific one (an amateur dev who wants to have a good hammer to be able to see all apps as nails). Quasar fits the bill.

For simple web "app" like form and form processing where you are not using dynamic reload of page elements, you can drop JavaScript and go with PHP + HTML + CSS. Use vanilla procedural PHP with sane splitting in functions / files. This stack is good enough for simple web apps, but also good for a little more complicated like for example task list etc. You can optionally sprinkle it with some vanilla JavaScript for dynamic parts, like showing disappearing error messages.

PHP. One file on a shared host for not too many headaches

"Users can create a form" and "simple" are not two things I would put in the same sentence. What's happening in the forms? Where does the form go? How many users? This immediately sounds "bigger than a web page" and suggests you need _some_ tooling.

Presumably, you will need a back-end and you could do the front-end in either browser-land or server-land. If you're a back-end or systems developer by background, do it in the back-end. Get a well featured back-end tool to do most of this for you. Django, Rails etc. If you want realtime UI updates (form construction, validation hints), think about a "hot HTML loader" paradigm such as Hotwire[0]. IIRC, some/all of Hotwire is built into Rails now.

CAVEAT: I've been too deep in js-land to know if Hotwire's any good. It's the one I'd look into first from having read around a little. Svelt second, but I suspect Svelt has got too much "build time" tooling for your size project & coding preferences.

[0]: https://hotwired.dev

I recommend just starting from scratch. As a programmer at heart I find programming like playing with Legos. While I needed to understand how all the underlying parts worked, I didn't need instructions on how to build a specific larger thing.

I found MDN to indispensible in learning to make web apps. Everything from learning the basics of string/array/date/etc... objects, to modern ES6 modules.

JS/HTML/CSS - https://developer.mozilla.org/en-US/

CSS - https://css-tricks.com/guides/

As far as actually building apps? After 20+ years of programming, I found my own light weight JS code turned into a framework over time for building apps the way I wanted to. Mostly vanilla JS.

But it didn't stay vanilla JS because too many things are hard on your own. Since everything you build you have to maintain, I found it easier to use jQuery years ago with all it's extra tools. Today? I am still removing jQuery from my code, as vanilla JS does everything jQuery did for me. (I stopped using their widgets as soon as browsers supported features by default, like a proper date picker, etc...)

So, my advice, start from scratch. learn all the pieces one at a time as you need them. This will keep you from getting overwhelmed.

Are their good resources for these from scratch online? Sure, but maybe a book is a good idea here, as it forces a more basic linear learning process if you start at the beginning. Not sure I'd take this route, but it may work for some people.

To your original question - no, I don't know of single source. But no, you do not need Node. You can create an html file and load it directly in a browser, you don't need a server to get started. But this is just step one...

If you're coming from the WPF and winforms world IMHO you actually should find and use a framework. Find something that has a bunch of pre built components like cards, dialogs, buttons, etc. already styled and ready to go. You could go for something complex like react and a component library in its world, or go with something that is (mostly) CSS like bootstrap or bulma.

I say this because where you're coming from you're used to plopping down a dialog and throwing components like forms and buttons and such on it. With plain HTML and CSS it is much, much more free form and you can easily be paralyzed by choice or indecision with how to design or even just how to layout components. With a framework like bootstrap you're given layout primitives like a grid and higher level components like a navigation bar, menus, etc. which are much closer to what you're used to from C# and windows.

You said app, which means you'll likely need some sort of backend. Express is pretty simple to get started with. These examples work out of the box and give you a simple starting point: https://expressjs.com/en/guide/routing.html

Then you can layer on HTML, frontend JS, and CSS. With modern typescript you can definitely write pure JS and be "fine".

That said, after a while once you grok how it all works, I would try React.

> Do I really need Node?

As an alternative, you could look at using a vercel template with some sort of out-of-the-box cloud database. These are super simple to get started, although they go against your goal of not using frameworks for the most part. https://vercel.com/templates

Other comments have already suggested guides for creating a simple static HTML site with light CSS & JS, whereas so many other comments are suggesting absurdly more than necessary.

The one thing I haven't seen mentioned and would recommend exploring for OP's use case is: Github Pages. This would probably be perfect for serving the type of site they're describing and would eliminate numerous layers of complexity. https://pages.github.com/

Regarding sane CSS I highly recommend the following resource: https://every-layout.dev/rudiments/

Modern web is fairly complex but it doesn't have to be. What you're after is a simple form to submit that data to someplace. CSS and JavaScript in your case are only needed to improve the look and get some kind of dynamic feedback.

So you have the client webpage, this can be a really simple webpage without any style that just has several form tags (Reference: https://www.w3schools.com/tags/tag_form.asp).

Then you need to send this data to some place. You can use standard html actions to do this to a back end script, a rest api, or even to a formatted email that will be sent via the user's email client.

You may need node to code the back end if there isn't one you can use. You can also use google sheets. See example here: https://github.com/levinunnink/html-form-to-google-sheet. This is really only useful for a small prototype so at some point you would need to standup your own backend somewhere. That gets more complicated because now you need a script (could be JavaScript & node for example or PHP or anything else) which processes your form request and stores it to a database someplace else.

Good luck and happy coding.

I would start with ASP.NET Razor Pages to render HTML from the server and use a simple already done CSS framework like bootstrap or milligram.

Then focus on learning the backend as you are going to need that anyway.

Learn basic HTTP concepts if you don’t already know.

Then add JS sprinkles as needed to improve the app.

Google the things you need as you go.

Do a JS course or book if required. Then MDN and the ES spec are good references.

To make the page refreshes seem like dynamic AJAX updates you can cheat and use HTMX which is a JS library but pretty simple and you might feel at home there coming from WPF.

I’m currently early on working on a webapp/spa with no node and just some tooling I wrote myself (www.lona.so). I plan to document my process and post it at some point. My two points of advice if you’re looking to go the native route is to 1) look into web components and 2) find something to syntax highlight html strings (es6-string-html on vscode).

If you’re totally new and getting started, just throw in some code into an html file and double click it!

Try looking at my personal project: https://github.com/prettydiff/share-file-systems

* Vanilla JS (TypeScript) with tiny HTML and CSS. No frameworks and no unnecessary abstractions.

* A full OS like GUI

* Solves for decentralization

* Provides a script to toggle between support for Node’s CommonJS and standard ECMA module systems

* Easy state management that works better than anything from a large framework

* Super fast. Written for extreme performance. For example the file system search is faster than file system search from the native OS. Page loads with full state restoration in less than 0.3 seconds.

* Fast build and language compile. The full build task takes less than 3 seconds.

* Original WebSocket implementation for better performance and safety with a smart message queue

* Automated documentation management

* Fast test automation with an original test automation solution. Most of the end to end tests executing in the browser executes in about 6.5 seconds for about 280 assertions.

* The node side of the application is command driven from the terminal with interactive command documentation

Feel free to open a GitHub issue if you have any questions or would like to learn more about how I try to solve any kinds of technical challenges.

> Web app > Do I really need Node?

Do you need a back-end? If so, doesn't need to be written in JS.

React / Angular are for SPAs- single page web apps- load once and you've got the entire client.

No reason it needs to be this way. Just serve the page from the back-end.

Also perfectly fine for it to be an SPA. You can use React, which has some nice features for managing the page lifecycle.

Preact is a much lighter weight React.

Svelte and htmx are both nice alternatives.

If you're coming from wpf and friends I can really recommend razor pages or blazor. Though razor pages are probably good enough especially if you are fine with running a server.

The web is complex, but only as much as you choose it to be.

I would also stick with running a lot of the calculations server side. Unless you really need the client interaction.

I've used MDN and CanIUse.com for https://whatword.wtf (code here: https://github.com/fictorial/whatword) which is Vanilla JS, HTML, CSS, Node.js with Express.js. I haven't understood the motivation for frameworks like React. I saw the value in something like jQuery for workarounds in browser implementations of standards. It's amazing to me to see how many "web developers" don't really do web development but start with React and similar and can't go any deeper. Really wild to me but I understand how that happened... Ha, I sound old.

This article by Julia Evans shows how to "build web apps like in 2005" but use libraries from NPM, use ES6 imports and stuff.

https://jvns.ca/blog/2021/11/15/esbuild-vue/

Agreed. There should be more standalone, minimal libraries that don't require the use of NPM. Once you've added NPM, or similar, your complexity skyrockets - even if it's abstracted away from you, it's there.

Edit: it looks like the kids are calling these "javscript micro libraries" nowawadays

What you describe has two parts: creating a form and filling it in (presumably with storing the results somewhere). While the second part is relatively simple, the first one requires quite some work. And although you can do it in vanilla JS, you'll be better of using some libraries.

It also depends what you mean by "creating" a form. If you can just choose from a predefined set of templates, it would make things much easier, and you could get away without using a JS framework (or even without JS at all, if you wish - you can use a more traditional approach with RoR, Django etc). But my general impression is that people drastically underestimate the amount of work that needs to be done in order to make a complete app, with authorization, user roles, properly secured etc.

I recommend using Micronaut + Thymeleaf, its simple, easy and fast in both performance and developer productivity. Vanilla HTML, CSS and Javascript is fine. The best part by using Micronaut is that the documentation is really really good.

I do also think a single PHP file is maybe the easiest option.

You are absolutely right; web development is unnecessarily complex when you use frameworks such as React.

But there are alternatives!

Here's an example application built without heavy frameworks. It is very maintainable and easy to understand: https://github.com/wisercoder/eureka

It uses two 500-line libs:

This is the component "framework", it is 500 lines: https://github.com/wisercoder/uibuilder

This is the router, it is 500 lines: https://github.com/wisercoder/mvc-router

An example of code for a very simple web page is displayed at Step 3 of this page. https://www.c-sharpcorner.com/article/create-a-simple-webpag...

Paste that code into a text file, save it as 'simple.html' and load it into your browser. As you modify/delete/add-to the code, reload it to see the result. This MDN site: https://developer.mozilla.org/en-US/docs/Web is a very good reference.

There are lots of vanilla javascript resources on the web to learn from.

> To me, the browser is the UI framework

It's not. It's a haphazard collection of hacks and one-off solutions that first grew organically, then not at all, then got taken over by bizarre corporate interests.

> I don’t know what’s a good source to actually get a web app running locally that I can eventually deploy online.

You need the backend part for this that handles for submission. For the frontend you need a static web page with just HTML and CSS.

So I would stop looking at JS to keep your sanity, and look at a simple PHP or Python or Ruby framework/lib that will give you the scaffolding to handle form submissions and templating to create an HTML page. Like Sinatra.

Since you already do .net I presume, you can go ahead and do that in ASP.net :)

I fully agree with your sentiment. In case you need some tutoring, please don't hesitate to contact me here. I have 20+ years of experience in software engineering and webdev and I believe current state of web-development is completely screwed up.

> I find web development to be unnecessarily complex, but I refuse to believe that’s true.

Sorry, it's true. There are frameworks to make web dev "easy" in terms of less typing, but the learning curve for those is huge. There's lots of gotcha's to work around.

What's really needed is a state-ful GUI markup standard. HTML lacks about dozen GUI idioms that have to be reinvented via JS + Dom, and they rarely do it well, or at least well as a package. Part of the problem is that JS wasn't meant to implement GUI engines; it's not a systems software language.

The Django Girls tutorial is supposed to be good for beginners. It takes you through everything up to Django Forms: https://tutorial.djangogirls.org/en/django_forms/ . I don't think there's any javascript in that tutorial. That combined with the Django Documentation: https://docs.djangoproject.com/en/4.1/topics/forms/ should be fine.

With Javascript Modules[1] on the browser, you can quickly build plain HTML, CSS, JS locally without the need for pre-compiling. Just import directly from unpkg[2] locally and start building!

In terms of references and learning resources, I always go to MDN or javascript.info

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guid... [2]: https://unpkg.com

Start with Bootstrap. You will see a simple HTML page with a CSS link tag. https://getbootstrap.com/docs/5.2/getting-started/introducti...

Add some form controls. https://getbootstrap.com/docs/5.2/forms/form-control/

Then if you need server processing, use Visual Studio to create an ASP.NET API to process your form.

You could check out WebComponents, that is the closest you could ever get from WPF using only vanilla DOM (without a DOM framework).

To me all that is really missing today in the DOM is a good DOM diff algorithm. Building a DOM fragment from a stateful model is easy. The hard part is updating the DOM currently displayed. the "event ups, data down" model from React is a good architecture at the end of the day, but one needs a DOM diff library to update the DOM efficiently. The rest is classic "MVC" rather than "MVVM". So you'd have to get familiar with Event Delegation as well.

I've done a decent amount of non-trivial stuff using .NET Core MVC (not Razor Pages, which is apparently less "magic" to the uninitiated but I can't actually speak to how it feels to use), with plain JS and CSS. That environment has libman, which allows you to download libraries in a very simple manner. I make JS "classes" with IIFEs and use Bootstrap for CSS. If you're not a complete slob it's not too bad. If you ever feel like you need minimizing and compatibility transpilation, that can be added after the fact.

You only need three things and no nodejs. NodeJS is mainly needed because many CLI and preprocessing/transforming tools are written in Javascript. If you don't use them, you don't need NodeJS. The three things:

* HTML if you don't already know.

* CSS Box Model, Flex and Grid.

* Plain old JavaScript.

For CSS topics above, there are pretty short videos on YouTube under an hour or so.

If you feel like going sophisticated, encapsulate things as web components. They're mainstream now.

These three above can DO EVERYTHING and everything else boils down to these anyways. Everything else is bloatware.

I wish there was a programming equivalent as simple and visual as Excel, to prototype real apps with.

There are several 'no-code' tools that use a Google Sheet as a starting point (Glide Apps), but ultimately the code runs on their databases, and you end up not knowing what the actual business logic would look like in Javascript.

Even tools like Wappler, that offer a visual layer to build functions, and lets you export and deploy the code yourself, will use their own helper functions to abstract the complexity away from users.

Back in the old days before react and the like took off Jon Duckett's https://htmlandcssbook.com/ used to be a common recommendation for people wanting to actually grok HTML.

To be fair that's less of an quick guide and it's maybe dated in the javascript content(who uses jquery today) but it's a beautiful book that showcases how elegant html can be when attention is given to the actual markup.

I have a tiny book called How To Code that teaches the very basics of pure JS. I’m also recording a video that shows me coding up an application in pure JS this week. It is a raffle app that takes a list of names and picks one randomly. It will use HTML, CSS, and pure JS with nothing else. No frameworks, no compile or transpire step, etc.

Reach out if you’re interested. I won’t publish the video for a few weeks, but maybe you could preview it and give feedback or ask questions.

My email address is in my profile.

Check this out: https://github.com/1Marc/modern-todomvc-vanillajs

Just as an option, my staff at n0c0de.com develop pretty good Webapps with zero knowledge of HTML/JS/CSS using Bubble. The main downside is it needs to be hosted with Bubble and you need to pay a recurring subscription fee. You cannot do local development either (but the trade-off is quite worth it).

It is a no-code platform that helps create webapps using a pretty good UI driven front-end and back-end logic.

Feel free to email me. It can be a good choice for the app you want to develop.

You can create a very simple 'app' even without any javascript [0].

I had gotten this template ages ago and I've forgotten where it was from. But for me, it was a revelation how much you could accomplish with plain HTML and CSS.

Whenever I have to create something like submitting different forms, I can accomplish using this template by just adding a form 'action' in the individual divs.

[0]: https://nojs.abhij.it/

Want to make browser-only webapps without node.js, bundling, building, transpiling and all that stuff?

This experimental view library might interest you: https://github.com/jehna/longwood

It's usable with plain in-browser Javascript, no other tools needed. You can split your frontend to components and do conditional rendering logic just as with any templating library.

Agreed, the platform is not as good as Visual Basic was 30 years ago. No-code and low-code platforms do most of what you want. Unfortunately most are hosted.

I have a SaaS deployed that does just that.

Choose a back-end that includes easy handling of POST requests (Php, Django, Elixir-Phoenix) and ignore all the Javascript garbage they peddle on top.

You don't need a CSS framework or a language that compiles to CSS, you can recreate most modern responsive web-apps with 500 lines of pure CSS and a good understanding of the flex property.

You don't even need Javascript if all you want is simple forms.

I've been doing this for a couple of years, with the added requirement of Any Browser compatibility all the way back to Netscape, as a personal choice. Please feel free to skim my code for ideas.

I think it's doable and sustainable, and is less likely to break on you in the long run because you're not including a huge chunk of code you're not the primary maintainer of.

I was in a similar position. I use ASP.NET Core, works well, fine on Linux. I don't use Node but I do use TypeScript and getting that working smoothly with ASP.NET Core took some experimentation, I went down the webpack rabbithole but abandoned it as I don't have an SPA. I use Dapper in preference to Entity Framework.

You can definitely create and make a form, ala previous generation of web apps.

Sadly web components APIs are bizarre and unused by most web developers: https://dev.to/richharris/why-i-don-t-use-web-components-2ci...

It depends on the thing you want to create. The browser UI controls are limited at best, keep your expectations low.

Writing Vanilla JS is error-prone unless you are very disciplined, writing "Vanilla" CSS is OK for the most part, Vanilla HTML is fine. It's best to use some tooling, but there are dozens to choose from.

You can definitely do that, the real issue is tracking changes you made to the webpages to alter them later, like adding a new form section. Also the DOM API is not the most consistent. But if you're well-disciplined in coding, it can be done, but make sure you have designed your implementation because the language itself is very permissive. Very much not necessary, but you can use a library for a more consistent DOM manipulation, like jQuery or UmbrellaJS [1].

You'll need some kind of backend, and you can either make your web app server rendered, which means embedding your frontend inside the backend, mostly by using the backend template language. Or split the two and communicate via XHR/AJAX.

If your forms are static, something like Netlify Forms and Netlify Identity can take care of both submissions and authorizations.

[0]: https://developer.mozilla.org/en-US/ [1]: https://umbrellajs.com/

Gotta do https://scrimba.com/

Wrote this a while back to teach our team TDD building this JS todo list from scratch without any frameworks: https://github.com/dwyl/javascript-todo-list-tutorial

Great topic, long topic. I could write a book on it. Wait! I did!

https://www.amazon.com/Single-Page-Applications-end-end/dp/1...

I write Go web servers that deliver HTML, CSS, and JS. I use the template library to fill in some stuff server side. As you get more advanced with the templating you can break things out into components. Best part is you don't need to compile your Javascript.

I like to use Bootstrap for CSS, because I'm not a designer and I want a graceful experience on all devices. Plain JS can easily be thrown in there. You can also just use the default HTML form submission behavior. Bootstrap offers some helpful validation styles for client side form verification.

Unfortunately, to remove CSS bloat from your completed Bootstrap template you need to use a node based script. Check "Purge CSS", although there is another one.

No need to get into bloated SPA frameworks or JS on the backend. From my side JS is just a necessary evil for webdev. Prefer to keep it in the browser where it is required. For the backend, choose a sane language you are comfortable with.

Using a WASM blob + canvas/WebGL as a client is another option which is increasingly appealing. You still need some JS glue, but you're free from some of the browser madness. Depending on how you build your client, you maybe able to recycle it into a standalone binary.

Hey man,

I am working on framework to quickly build simple web apps/ui. http://WidgetTerminal.com

Would love to talk to you about your use case. Contact info in my profile.

The web platform was mostly piecemeal and happenstance. Not careful, coordinated design.

You'll find that it is unnecessarily and necessarily complex unless you adopt a framework that makes design decisions for you.

I remember when Java EE came about. They had something called "Petstore Demo" running, and documented in articles. Isn't there anything like that for Node.js/js/html/css ?

Just use Elm. ( https://elm-lang.org/ )

I don't have time to do a whole screed about this morning, but do give it a look-see.

Take a look at server side rendered PHP with some CSS for UI aesthetics and a sprinkling of JavaScript for client side dynamicism and Ajaxy posts to mitigate back button issues.

If I were you, I'd use Node/express with server side rendered templates. It's pretty straightforward for a simple project that needs a backend.

Read books. That's how we used to learn when those languages were invented.

PHP is your friend.

Learn JS in MDN Try Svelte, Vue3, Quasar

I don't know of a readymade resource except checking the usual places (W3Schools, MDN, LinkedIn Learning, Codecademy, Udemy, etc.), but just wanted to address some of your points...

> Coming from WPF and Winform, I find web development to be unnecessarily complex

The web is actually quite a bit lower-level than that, sadly. Winforms (at least when I last used it in the late 90s...) was actually really nice in comparison, especially when you use it with Visual Studio. Web has nothing quite like the built-in GUI editor in VS, except maybe something like Adobe Dreamweaver -- which is an approximation of a browser's renderer, not an actual pixel-perfect layout engine.

If you're looking to "compose" a web app out of UI widgets -- dropdowns, buttons, menus, etc. -- you might want to consider going one level of abstraction higher and using something like Bootstrap or UIKit or SemanticUI. These are NOT Javascript-extending frameworks the way React or Angular are, they're just collections of very useful UI primitives with sane defaults. You can typically use these just by dropping in a couple Once you have done all that, at your command prompt again, do:

  node src/index.mjs

Hopefully that gets you started. Enjoy your journey! :)

PS - I did this because I love HTML, JS, CSS and their "natural" style.

Have you thought about ruby on rails?

Let me give a quick overview of modern web dev and maybe the perceived complexity will make more sense. I'll say right right off the bat that you probably don't need to care about 90% of this stuff and you can write raw HTML/CSS/JS, but it may help things make sense.

Ultimately, everything is transformed down into plain old HTML/CSS/JS but there are a bunch of tools we use to make this easier and more stable for users.

---

Let's start with frameworks. You say that "the browser is the UI framework", but it's quite literally not a UI framework. Updating the HTML in a page is extremely tedious. You have to do things like set the innerHTML of elements.

innerHTML: https://developer.mozilla.org/en-US/docs/Web/API/Element/inn...

Frameworks provide an abstraction over these web APIs to all developers to easily update the HTML structure of the page on the fly. An important concept frameworks use is the "virtual DOM", or "vDOM", which is a representation of the DOM (E.g. the page) that is kept in memory. Using a vDOM means you don't have to traverse the DOM tree every time you want to update the page.

DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...

If you only have simple effects that only change a few co-located HTML elements a framework won't provide much benefit. However, if you have complex effects that may alter the global state and UI of your app a framework makes it infinitely easier to update UI.

Another benefit of frameworks is Developer Experience (DX). Frameworks use a component model, where you can compose your UI out of multiple components. HTML does not natively support this functionality, so it quickly becomes hard to reason about your page structure. Frameworks also allow developers to do things like selectively render a component without using CSS tricks like `display: none` which styles an element to not appear on the page.

---

Next up is tooling. The tooling ecosystem is quite complex, but luckily these days we mostly don't need to worry about the details.

One of the primary reasons for all the JS tooling is that developers want to write modern JS, but not all users have browsers which support modern JS!

Some users may be on old browsers where modern JS syntax or functions are not implemented and so the page would break. One job of JS tooling is to transpile modern JS or TypeScript (TS) into older JS that is compatible with all browsers.

Another function of tooling is to optimize the HTML/CSS/JS assets. Having large CSS and JS files is not optimal for performance, so JS tooling can automatically minify and chunk assets which makes it more efficient for the browser to load them.

Related to the above, how does our source even end up in a format that is usable for the browser? Our tooling also takes care of that by creating a dependency graph of all our files and external modules then resolving it and bundling everything together (And transpiling it!) into JS code the browser understands.

Node is often involved in tooling because the tools may be written in Node-flavoured JS (Slight differences to browser JS) or you may need a Node process to execute some JS code. However, there are tools that are written in other languages like Go and Rust.

---

Lastly is backend and full stack frameworks like Next.js. This is where Node really matters. Node lets you write JS that can run on a server. It gives you access to things like the file system that are not accessible to JS in the browser.

People often choose to have a Node backend for their JS app because it means they can write JS everywhere, but it's not required. You could have a Java or C# backend and a JS app.

Another reason Node is often used is because it has deep integrations with a lot of frameworks like Next.js so you can co-locate server and client code, and it allows you to write code which is isomorphic, meaning it can run on the server and in the browser.

Some apps require a backend to be deploy because their HTML pages are rendered on the server, like a traditional MVC framework does. Other apps may be purely rendered on the client, in which case you only need to deploy the static HTML/CSS/JS files.

Some newer frameworks will render your components to HTML/CSS/JS pages at build time, meaning you kind of get the best of both worlds. You can use frameworks and the DX that comes with them, but you also get a bunch of generated pages instead of one giant JS app.

I guess you will just end up writing your own framework in the end. There is a reason web framework exist - they all satisfy different needs in the domain of web development. Like routing, content update, state handling, event handling and so on. If you don’t need any of that, great, you can just learn and write plain html, css. So LMGTFY https://dev.to/jordanholtdev/how-to-create-a-web-page-with-h...

Cheers