Are you new to web development, and coding in general? I was too!
For about four months now, I’ve been learning as much ‘front-end development’ as I can. Prior to that, I knew the premise of HTML and some very basic CSS rules, learned from junior high-school attempts at myspace layout manipulation. My aim is to build web sites and web applications. They’re real similar these days, apparently.
They’re powerful too, and web development as a skill can have a major impact both on one’s career opportunities, and one’s ability to impact the world!
What tools am I using?
- HTML All the time,
- CSS/SASS SASS, or SCSS, was pretty easy to learn. I believe I should have simply learned about it when I learned CSS. SASS has many tools that become more helpful the more experienced you get, as you end up maintaining more code over time and your projects increase in quantity and size. CSS is hard, it’s Art, and looking at other people’s CSS is the fastest way to learn the best tricks.
- React ‘Components’, little packages of HTML/CSS/JS. The Heads-Up-Display, the Nav-Bar, a List or List-Item, we create a component for each, we tell them how to interact with the rest of the site/app, or the user. Suppose we intend to use the user’s name in many components. We set the user’s name to live in “State” in one of the components, which is a built-in feature of React. Now, when we update State, it updates the components who use that piece of state. This makes it easy to reuse your code from your components, to update your app/website, to control the state of your application so you (or a buddy) don’t accidentally write chunks of code all altering the same data and then later can’t figure out why everything is broken.
- Gatsby This software is called a static-site generator, but the whole notion of a static site has changed, and they can do all kinds of data manipulation without a traditional database. Gatsby gets you up and running with React very fast, and in a very empowering way. With very little work you are well on your way to creating a very robust website, with great opportunity for growth. This very blog is built with Gatsby, and I’ve only just begun to explore it. It uses GraphQL, which makes data handling a lot easier if you understand it. If you don’t (like me), then you’re just thankful for the gatsby starters that include most of the queries you need. The various plugins are awesome, allowing plenty of customization but offering so much out-of-the-box usefulness. For instance, the typography plugin can apply a beautiful font theme to your whole site and you can still fine tune it all from one file.
- Git/Github I use a windows GUI, the VSCode built in git manager, and sometimes the command line. I think that advanced project management might call for advanced git skills. But for noob projects? Noob git skills seem to be getting me by just fine.
- Text Editor You just need a code editor. VS Code, Sublime Text, Atom. This is your workbench, early on you learn a lot of tricks gradually to improve your efficiency in the text editor.
Skills to hone
- Keyboard Skills Get comfortable with hotkeys, learn to edit text a little more rapidly with shortcuts, even if they feel hard at first. This is so important, if you’re crunched for time and need efficiency (who doesn’t?), and I can honestly tell you I work WAY faster than I did at first. I move text like a bulldozer moves dirt and I bet I look awesome but nobody is watching.
- Command Line Basics We gotta do stuff from inside directories(files). It’s not scary. You type little snippets, or copy/paste them from the web, and this lets you
npm install or
sass --watch scss:css or
git commit or
gatsby develop or
netlify deploy. You’ll notice I just told
git and gang all to do something. The command line, ;)
Little websites made up of HTML and CSS are absolutely adorable, like Wall-E, and sturdy like him too. I’m not experienced enough to say you can’t do web development without HTML/CSS, but I am experienced enough to say that you can probably learn them while you learn the more robust part, the part that’s gonna take a good long minute to make sense.
There’s probably a lot of great mini-projects out there. I know I found a bunch.
Now, I’m still quite a noob I assume, but I’ve come a long way. These are things that 6 months ago I had no clue what they were, nevermind what they did. SASS, React.js, Node.js, Webpack, GraphQL. I’m still overwhelmed on some level, but I’m using all these tools now. Do I understand them completely? No, but that’s the beauty of programming. You don’t have to understand it completely to use it and build off of it.
The human behind the keyboard