Jack of All Trades #
You probably noticed the mildly ugly gradient heading this section, that was my warning to you that you’re about to walk into something that requires an interesting mixture of design and engineering skills. Making a good website requires a fair understanding of computers, some basic programming skills, and a willingness to dive into some technical topics. There’s a good reason most blogging now happens on Medium or Tumblr and that social media has boomed: The barrier to entry is significantly lower. There’s also really good reasons to want to make your own website and have your own little digital garden.
Before diving into anything, I want to level with you, teaching web development is hard for two big reasons:
- There’s just a lot of ground to cover: Multiple languages, how basic networking works, how to make something actually look good on the web, etc. In a larger organization, these things would all be done by different teams of people, who don’t worry all that much about how the layers above or below them work - designers don’t usually think about networking.
So, what will you need to know?
The Technical Stuff: #
How to write HTML - EASY
often you can actually write in Markdown which is trivial to use, and you’ll use a tool which builds the HTML from that.
text bold text more text
- list item 1
- list itcem 2
How to write CSS - MODERATE
- CSS is what stylize your website. CSS is what usually defines the colors, font sizes, arrangement of content, etc. but, strangely, now sometimes does animations and other relatively complicated things
- Unfortunately sometimes CSS can be pretty hard to work with, with things sometimes interacting in weird ways. Worse, more and more (legitimately useful) features have been added to CSS over the years, some of which are now the right way to do things, but are still hard to learn (… fucking flexbox)
- It’s really, really hard to make a website not break when viewed on both a phone and a normal monitor
- You might want to use frameworks here, like https://tailwindcss.com, https://www.bonsaicss.com, https://getbootstrap.com, https://picturepan2.github.io/spectre/index.html
- … and you might want to use something that added extra features to CSS then gets turned back into CSS, the most common of these is SCSS, but https://lesscss.org is neat too.
Here’s a neat example of using CSS to make some nice looking background stars, a fairly complex example
Code by Saransh Sinha
- So, JS is weird in that you will sometimes want to use it plain, and work with the language as is but often you’ll end up using frameworks (such as React, Angular, Vue) and libraries (Like JQuery, three.js, d3.js)
- The complexity of the thing you want to do and the libraries you’re using will make a big difference here, something like this text reveal effect is simple (Click Rerun in the bottom right corner to see the animation again)
Code by Ali Ammar
But something like this is a lot harder
Code by Yannick Brandt
How to setup a domain
- You’ll probably want to buy a domain name “mycoolsitename.com” or whatever, and you’ll need to know how to buy that and actually use it
- … and probably make it HTTPS
How to setup hosting
- Github pages, AWS, a VPS, whatever
Some general CS shit