923 Days Ago I Typed "How to Make a Website" into Google (My Journey Learning to Code)
Tags: career, webdev, showdev, beginners
Published: 2020-09-24 22:59:17

923 days ago, it was day 1 of learning to code.

I was consuming Pieter Level's [How to Bootstrap a Business](https://youtu.be/6reLWfFNer0) presentation.

And something stopped me.

He said, 

>"To build your idea, you should learn to code yourself.
>
>Just open Google and write, "How to make a website."
>
>The biggest thing in coding and business is learning how to learn. Or learning how to figure things out yourself."

![levelsio Makebook presentation](https://i.imgur.com/9tR0xOZ.png)

## Just F—in' Doing It
I'd never considered that. 

Back then, I wanted to build a map of the world's best surf spots and provide cheap flight and beachfront hotel discounts to them.

So 923 days ago, I did what Pieter said.

I literally typed "How to build a website" into Google and began learning to code.

Here's me literally doing it. 

![Ryland King First Day Learning to Code](https://i.imgur.com/P8X1HpT.png)

I even recorded it. 

Here's the [YouTube](https://youtu.be/bbKAEmdOZtA). Check it out.

## Getting Stuck Meant I was Doing It Right
I did this for 3-4 days. But I began to feel constrained or stuck.

Like, I didn't know what to learn next. 

So I asked a friend.

She was so excited about what I was doing!

She told me to learn HTML, CSS, Bootstrap, Javascript and Jquery. And to do it using [Treehouse](https://teamtreehouse.com/).

So that's what I did that.

![Ryland King taking a Treehouse Course](https://i.imgur.com/hbL3BEo.png)

I’d take a tutorial. 

Then I’d code on my project for as long as I could and slowly I'd become completely stuck.

Like here.

I couldn't figure out how to show multiple surf spots without the code being un-godly long (Javascript loops!).

![Day 4 of Surf Trip List by Ryland King](https://i.imgur.com/i7n5yRA.png)

At that point, I'd take another tutorial. 

Once I'd figure out how to keep going, I'd continue coding the project.

Rinse. Repeat.

In case you want to learn to code too, here's the exact tutorials I took at Treehouse:

>[HTML Basics](https://teamtreehouse.com/library/html-basics-2)
>[CSS Basics](https://teamtreehouse.com/library/css-basics)
>[Bootstrap Basics](https://teamtreehouse.com/library/bootstrap-4-basics-2)
>[Beginning Javascript Track](https://teamtreehouse.com/tracks/beginning-javascript)
>[jQuery Basics](https://teamtreehouse.com/library/jquery-basics-2)

## Learning How to Use a Database
After getting stuck because I my code was getting crazy long

my friend told me to check out Firebase for my first database. 

I Googled around and found the tutorial playlist below by [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg).

>[Firebase tutorial playlist](https://www.youtube.com/playlist?list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB)

I watched each video, did the full tutorial and slowly figured out how to create, read, update and delete (CRUD) items in a database. 

![Ryland King taking The Net Ninja's Firebase Course](https://i.imgur.com/459r51O.png)

This was completely game-changing.  

I remember feeling like I could build forever at this point.

Here's what the project started to look like:

![Day 20 of Surf Trip List by Ryland King](https://i.imgur.com/1LJOhEG.png)

I still needed to Google how-to's for almost everything, but I could build and build and build. 

It was so empowering. 

## Learning How to Use APIs
A few weeks from here, I wanted to add a map with pins to my site.

This was my first time engaging with an API. 

I learned how to do this from this [YouTube tutorial](https://youtu.be/Zxf1mnP5zcw) by Brad Traversy.

From that one tutorial, I added a map with surf spots and places to stay right next to the waves.

I was so amped on it. I remember wanting to show everyone I know.

Here look:

{% youtube LPO0e9aVEsU %}

>It's worth mentioning, Brad is my favorite online teacher by far.
>
>I’ve taken [every YouTube tutorial he has online](https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA). And I've bought multiple of his Udemy courses. 
>
>Any course Brad makes is worth its weight in gold.

## Feeling Unstoppable, Then Getting Stopped
Once I figured out how to plug into APIs I felt unstoppable. 

With all the knowledge above, I coded and built Surf Trip List for 9 months.

Here's me describing the end product.

{% youtube rkqGGcp448I %}

It’s a story for another time, but life changed and I gave up on Surf Trip List.

If I’m honest, I got pretty depressed at this point too. 

I felt like a total failure.

I kept starting other projects, but I couldn’t finish them.  

I remember wanting to build a project with the languages I knew. 

But I felt constrained. 

Like it'd be super hard to build a large project with only Javascript.

## When Stuck, Build for Someone Else
Finally, I decided to build a project for someone else (a blog for my fiance) as a forcing function to learn React.

At this point, I had a full-time job.

So I'd learn for an hour here or an evening there.

I took the [React Docs tutorial](https://reactjs.org/tutorial/tutorial.html) (three times lol) and read through [the docs](https://reactjs.org/docs/getting-started.html) multiple times too.

And I took Brad’s [MERN Front to Back Udemy course](https://www.udemy.com/course/modern-react-front-to-back/) and all his React related courses YouTube. Here’s [the best one to start with](https://www.youtube.com/watch?v=sBws8MSXN7A).

![Brad's React Course](https://i.imgur.com/lSSQaR9.png)

>I should have filmed some of this. 
>
>But like I said, I just needed to complete something here. I wasn't in the mind space to share the journey then.

As I went, I learned React wasn't great for SEO.

So I did some research and found NextJS.

## Learning NextJS
NextJS is incredible.

It's a React framework for static sites.

It's server-rendered, so it's crazy fast and optimized for SEO. 

I read [the docs](https://nextjs.org/docs/getting-started) and took [this tutorial](https://nextjs.org/learn/basics/create-nextjs-app) (which is so good, btw).

![NextJS](https://i.imgur.com/eobGWB9.png)

## Learning Tailwind CSS
At this same time, I learned about [Adam Wathan](https://twitter.com/adamwathan) and [Steve Schoger's](https://twitter.com/steveschoger) [Tailwind CSS](https://tailwindcss.com/). 

It’s basically Bootstrap on steroids. 

It’s a CSS library that you can customize as much or little as you want.

Here’s [the tutorial](https://youtu.be/UBOj6rqRUME) I used to start.

I even bought [Tailwind UI](https://tailwindui.com/) for all the pre-built components and templates, and it sped up my dev process at least 2X.

![TailwindUI](https://i.imgur.com/Eu5vYEK.png)

## Ready to Go! Well Almost...
I had my fiance's blog all set up (with placeholder content):

![Here Now Body](https://i.imgur.com/qvi67Ba.png)

But... 

My plan was to convince her to write the blog in Markdown.

(And push it up to Github with git CLI commands. lol)

Which yeah... would never have happened.

## Learning Sanityio
Luckily, my buddy [Dylan Jhaveri](https://twitter.com/dylanjha) saw this and told me about [Knut Melvær's](https://twitter.com/kmelve) [Sanityio](https://www.sanity.io/).

Sanityio is a customizable CMS (like Wordpress) that serves up content to the DOM with the perfect amount of flexibility.

I worked through [their docs](https://www.sanity.io/docs) to understand it and used [this Next/Sanity template](https://github.com/sanity-io/example-frontend-next-js) by [Shaswat Saxena](https://twitter.com/shaswatsaxena) to re-start my project with Sanity.

Here's the Sanity Studio I set up for my fiance's site:

![Here Now Body's Sanity Studio](https://i.imgur.com/W2wEjhB.png)

## React's Context API
As always, I built until I got stuck.

I hit a place where I needed a tool to help manage semi-complex interactivity on the site (in coding terms this is the ability to more easily manage state).

>In Lehman terms: If you click on this button, have the code change these elements inside these four different files.
>
>Changing the state of elements inside numerous files gets messy. So you need a state manager.

After some Googling, I found [React's Context API](https://reactjs.org/docs/context.html) (it's React’s version of Redux, which I had heard of before).

I took this [Brad Traversy tutorial](https://youtu.be/XuFDcZABiDQ?t=900) and learned the Context API. Start at 15.00.

Here's what I ended up with inside my code:

![Here Now Body Context API](https://i.imgur.com/pxlcYml.png)

## Ability to Build Forever
After this point, I felt like I could build and build and build again.

I’d still Google simple things (and always will), but I could flow.

And after many nights and weekends (since I have a full-time job) I finished my first React project, [Here Now Body](https://herenowbody.com)!

My fiance's site still has placeholder content…

But check it out:

{% youtube e_ehYSNI02E %}

But I'm super stoked on how it looks and works anyways.

After that, I built my most recent project — a whole other site called [Remote Dev Jobs](https://remotedevjobs.tech). 

This is totally under construction, but it's been amazing to hack on a project again.

It looks like this so far:

{% youtube e1fkSBNXTTc %}

And with all that, I feel empowered to take on projects that seemed too big previously.

So to sum my journey learning to code!

## Summary of Tutorials
>[HTML Basics](https://teamtreehouse.com/library/html-basics-2)
>[CSS Basics](https://teamtreehouse.com/library/css-basics)
>[Bootstrap Basics](https://teamtreehouse.com/library/bootstrap-4-basics-2)
>[Beginning Javascript Track](https://teamtreehouse.com/tracks/beginning-javascript)
>[jQuery Basics](https://teamtreehouse.com/library/jquery-basics-2)
>[Firebase Course](https://www.youtube.com/playlist?list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB)
>[Google Maps API](https://youtu.be/Zxf1mnP5zcw)
>[React Docs’ Tutorial](https://reactjs.org/tutorial/tutorial.html)
>[React Docs](https://reactjs.org/docs/getting-started.html)
>[MERN Front to Back Udemy](https://www.udemy.com/course/modern-react-front-to-back/)
>[React Basics](https://www.youtube.com/watch?v=sBws8MSXN7A)
>[NextJS Docs](https://nextjs.org/docs/getting-started)
>[NextJS Docs’ Tutorial](https://nextjs.org/learn/basics/create-nextjs-app)
>[Tailwind Tutorial](https://youtu.be/UBOj6rqRUME)
>[Sanity Docs](https://www.sanity.io/docs)
>[Context API Tutorial](https://youtu.be/XuFDcZABiDQ?t=900)

## Summary of Learnings
>1. Take a tutorial. Once you've learned a little, build your own project from what you learn. 

>2. Build until you feel a constraint, then learn more. Don’t learn just to learn.

>3. Once you understand a language’s keywords, you’re set. Code until you're stuck. Then Google keywords for whatever you need.

>4. I’ve been stuck for 7 days on one problem multiple times. Ask people online. They will help.

>5. You can do it.

## Thank You
Thank you for reading! I’m not going to lie. This took a while to put together.

If you’d like to say, "Thank you" please retweet the first tweet on the thread on Twitter below.

{% twitter 1308833542735093761 %}

That would be the most meaningful way to say, "Thanks".

Yew, yew!

– Ryland