When I first crafted my personal website, it was something I did to keep myself busy as well as an attempt to advertise myself to employers. I no longer want it to be that, I want it to be something for myself. Something I will come back to because I am excited about it.
I am thinking about wiping what I currently have completely. I used Next.js which is loaded with unnecessary libraries and other frameworks. From what I have read, a lot of people around here seem to like to keep strictly to HTML and CSS where possible. Would like to know what resources you all here have used and found the most helpful when webweaving!
Holy shit, it’s been so long since I first learned HTML that the resources I used are woefully outdated. I mean, you don’t need a HTML 3.2 tutorial, right?
I’d say that Mozilla Developer Network might be a reasonable start. I use their HTML and CSS references at my day job, at least.
Also, are you using Markdown for your website’s text? You can use pandoc to convert your Markdown files to HTML, PDF, etc.
I agree with starbreaker, MDN is a great resource!
If you’re just getting back into HTML/CSS after a long while, W3Schools is a nice guide for beginners. They have interactive demos you can play around with in your browser which I find really helpful for learning ^^
If you’re used to JS, something to keep a look out for is HTML elements that have their own built in interactivity, like the details element! Without any JS you can make a collapsible menu, accordion, side note, etc. It features a summary element that the user can click on to show the rest of the details. They can then click it again to hide the details. A lot of css “hacks” are done with this element, I personally made a photogallery that appears to show the selected image on its own with a revealed caption, using details/summary. Speaking of css hacks, CSS Tricks has a lot of cool articles on how to do more complicated things with CSS.
I personally use some JS on my site, but that was after learning HTML and CSS, and its basic stuff I coded myself rather than libraries. Don’t feel that you have to avoid JS at all costs on the personal web, but it is nice to find simple html/css alternatives when you can. I personally use JS for light/dark mode theme switchers, gif pausing/playing, and keeping consistent navigation on certain pages since I don’t use a static site generator, nor can i use php on my host.
These are great resources - my little addition is to check out static site generators if you haven’t already. Their output is static, but once you start making lots of pages they really help. I like being able to change my footer in a single layout/template instead of on every page. You can also use it to make static pages that would otherwise be created on a server or via JS (or created manually), like an up-to-date archive of all posts.
I actually spent quite a bit of time on your website last night just be wandering around and signed the guest book while I was there. Thanks for the shout on pandoc, I had already been looking through your sourcehut and was wondering how the HTML-based blogposts were done.
Your website, and in particular the grimoire, have already been extremely helpful so I will likely be revisiting often lol
I had done some reading last night and saw someone mention the HTML summary element. That is new to me and I will spend some more time looking into it. Thank you for all those resources!
I definitely do not feel the need to totally abandon JS, but I do certainly want to do it all by hand and get rid of bloated libraries as much as I can. Will be checking your site out very soon for inspiration!
I think this may be where I end up eventually, I looked at SSGs when creating my site initially but eventually decided on Nextjs which I mildly regret since I never really took advantage of anything that Next is good at, mostly because I never needed it lol
Oh, so that was you? I should mention that we need not be enemies just because you prefer vim and I prefer Emacs. I can and do use vim and even ed when they’re the right tool for the job, or when Emacs isn’t available.
I should also mention that while I used to use Markdown and pandoc, I’ve switched to writing raw HTML (with assistance from Emacs’ web-mode and emmet packages). I then use a shell script to handle partials and macros.
Regardless, I’m glad my website has been helpful.
Haha yes I agree, I was just being playfully competitive about it. At work we had a pretty big “battle” all in good fun in the vim vs Emacs debate. I have avoided Emacs for a while simply because I know I’ll fall into the rabbit hole and it’ll be a while before I actually build anything as a result.
Also, good to know that you switched from pandoc was it because the Emacs packages were more helpful? Will also look into that shell script now. This is all very helpful, thank you.
I would never suggest that somebody who is happy with vim switch to Emacs. Use what works for you; my preference is just that, and not a prescription.
Actually, it was because pandoc had proved a bottleneck. While I was doing parallel processing and converting multiple posts at a time, it could still take over ten minutes just to rebuild all of my site’s pages and posts.
I had also found that I was embedding raw HTML in my markdown files whenever I wanted to do something that Markdown didn’t support, like the <details> element.
For my own sites I like to keep things as simple as I can, the HTML and CSS are written from scratch - just enough for the pages to work. Some pages need JS and I have no qualms about using it, usually just small vanilla JS files.
@MillerJ mentione the details / summary tag. Last year I thought I’d take a look at it to see if I could make a horizontal menu from it. It turnd out with a little positioning you can.
A couple of days ago I started a new website and the contents menu for that uses it - no more icky hidden checkboxes.
I was excited when I found out about the experimental selectmenu tag. After four years of development the project has been dropped. The good news is that the select tag has been enhanced, but still no provision for multi-column dropdowns for long menus.
For all the enhancements made to HTML and CSS, I find it odd that one of the most important parts of any site, the navigation, still has no built-in customizable basic tag.
A little while ago, I found this guide called You Don’t Need JavaScript. It lists a bunch of visual and functional elements that tend to be added to a site via JS, then explains how to get the same/similar effect without JS.
I’m also going to second the suggestion to use an SSG. They have a learning curve, but they ultimately make coding a site so much easier.