Select Page

Instruments for Constructing Your Personal Web site (Gatsby, React, JS)

The quantity of instruments for contemporary internet growth could be fairly overwhelming, and their quantity is just rising. That is my tackle the instruments you have to construct an internet site in 2021. The video will break down the capabilities of 4 important parts for making an internet site, discover why we want them, and present how they match collectively.

The stack that I am going to go over right here is the usual React + GatsbyJS toolchain, paired with Bulma for styling and GraphQL for querying information, however I wish to make this normal sufficient that you could search for alternate options and evaluate the multitude of accessible instruments so you possibly can customise your internet growth loadout. The main target will likely be on frontend, static web sites, which is the mannequin for constructing your individual private web site, weblog, or small software.

====== Examples ===== – Preview the way forward for constructed utilizing the precise toolchain described on this video. – A minimal pomodoro timer constructed with React and Bulma. – A easy sport with an internet site surrounding it. Constructed with React, Bulma and the Phaser 3 sport engine. In case you wish to replicate the performance of, however have whole management over the show.

===== Notes =====
I apologize for this video being late, it has been a very long time coming and I did not wish to rush this video for December, what with 5 engineering exams on my doorstep. Hopefully you will discover one thing attention-grabbing on this video, although it’s totally different than my ordinary gamedev / blender content material. It’s associated although, since internet growth is related to each – You’ll be able to construct a touchdown web page to your sport utilizing React ( as an example), or a portfolio to your digital art work. I believe it is a helpful talent.

Thanks for these of you who inspired me to make a Discord! It’s now stay, right here: I am grateful to the little group that is shaped round this channel and I might be glad to speak and hang around.

===== Timestamps =====
0:00 – Intro
0:45 – Gatsby, a Static Website Generator
2:29 – GraphQL, a Knowledge Layer Software / Question Language
3:50 – ReactJS, a Frontend UI Library for JS & TS
6:00 – Recap
6:37 – BulmaCSS – A (S)CSS Framework
7:35 – Instance of the way it works on Wintermute Digital

#webdev #react #js



  1. Wintermute Digital

    Happy New Year! I will be back making videos about games soon, once I figure out a good topic. Also, my Discord is live! Join the wintermutedigital community here, and we can hang out!

  2. BOT 2034

    Happy New Years. Glad to see your still updating even with school and all

  3. Mick McCarthy

    Looking forward to running through this, stated using Angular to create a personal site a few years back which I soon realised was basically using a wrecking ball to press in a thumb tack. Switched to 11ty a year or two ago and static site generators are just so damn pleasant to work with in comparison!

  4. Jeno

    This was super helpful. The main reason that I don't have a website right now is because I'm never sure which technologies to use and end up never making a decision. Great way to start 2021!

  5. MrGhettoGurke

    Haha, i also made a color palette generator with react 😀 Great video 🙂

  6. MaximoTG98

    I once asked on a discord server what should I learn to get into web development to make it like a hobby but an useful hobby, the response I got was to learn how to use node+typescript+react+redux+saga as it is like a good toolbox. But I really don't know what each thing is or how do they compliment each other. And for what I saw on your video those 4 tools seem like a really complete package of tools to use. Could you kindly explain me what all of this do?(in a short way)


Leave a Reply


New Delhi
06:4618:20 IST
Feels like: 21°C
Wind: 2km/h NW
Humidity: 62%
Pressure: 1008.81mbar
UV index: 0

Stock Update

  • Loading stock data...


Live COVID-19 statistics for
Last updated: 8 minutes ago


Enter your email address to receive notifications of new update by email.