Developers September 23, 2020

#006 - 923 Days Ago I Typed "How to Make a Website" into Google (My Journey Learning to Code)

Ryland King @rylandking

923 days ago, it was day 1.

I was consuming @levelsio's "How to Bootstrap a Business" 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

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

I even recorded it.

Here's the YouTube link. 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.

So that's what I did that.

Ryland King taking a Treehouse Course

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

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
CSS Basics
Bootstrap Basics
Beginning Javascript Track
jQuery Basics

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.

Firebase tutorial playlist

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

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

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 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:

Surf Trip List first Map Pins

It's worth mentioning, Brad is my favorite online teacher by far.

I’ve taken every YouTube tutorial he has online. 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 was the end product.

Surf Trip List End Product

And here's the video with sound if you're interested.

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 (three times lol) and read through the docs multiple times too.

And I took Brad’s MERN Front to Back Udemy course and all his React related courses YouTube. Here’s the best one to start with.

Brad's React Course

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 and took this tutorial (which is so good, btw).

NextJS

Learning Tailwind CSS

At this same time, I learned about Adam Wathan and Steve Schoger's Tailwind CSS.

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 I used to start.

I even bought Tailwind UI for all the pre-built components and templates, and it sped up my dev process at least 2X.

TailwindUI

Ready to Go! Well Almost...

I had my fiance's blog all set up (with placeholder content):

Here Now Body

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 saw this and told me about Knut Melvær's Sanityio.

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 to understand it and used this Next/Sanity template by Shaswat Saxena 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

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 (it's React’s version of Redux, which I had heard of before).

I took this Brad Traversy tutorial and learned the Context API. Start at 15.00.

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

Here Now Body Context API

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!

My fiance's site still has placeholder content…

But check it out:

Here Now Body V1 Final

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.

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

It looks like this so far:

Remote Dev Jobs V1

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
CSS Basics
Bootstrap Basics
Beginning Javascript Track
jQuery Basics
Firebase Course
Google Maps API
React Docs’ Tutorial
React Docs
MERN Front to Back Udemy
React Basics
NextJS Docs
NextJS Docs’ Tutorial
Tailwind Tutorial
Sanity Docs
Context API Tutorial

Summary of Learnings

Take a tutorial. Once you've learned a little, build your own project from what you learn.

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

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

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

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 thread on Twitter.

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

Yew, yew!

  1. 3

    I am bookmarking this to read when ever I think of giving up .

    1. 1

      Wow, that's the best thing I could hear from writing this. Thanks, @praneethvip!

      The biggest thing I'm learning right now is how important it is to show up, even in the tiniest bit, each and every day.

      Keep going. You got it!

  2. 3

    This is a really great story of what is possible with a little persistence. I've always loved the saying.
    People overestimate what they can achieve in the short term but massively underestimate what they can achieve in the long.
    Thank you for taking the time to share it.

    1. 1

      Thanks, Lain!

      It’s a lot harder to do then it seems. I wish I had had that quote nearby during all the low moments in the journey.

  3. 3

    Amazing. I got to the "As I went, I learned React wasn't great for SEO" stage last night! 😂 Then I discovered Netlify's pre-rendering option, about which I need to do more Googling to fully understand.........

    1. 2

      haha, So funny! Yeah, I feel like if you build website or even web apps, we all go through a super similar journey.

      I didn't know Netlify had a pre-rendering option! That's super good to know!

      If you already know React, NextJS is super easy to switch over too. I'd even argue it's easier than React. Might be worth checking out! 🤙

  4. 2

    Nice post. After some years of develop I feel to suggest you to switch from jQuery / react stack to vue JS and vanilla javascript, your projects will be more faster, jQuery is almost obsolete compared to Vue. For the backend use php/mysql. Firebase is a good cloud database solution but you need to consider that there are some projects that will need an own database server so you will need to use phpMyAdmin to create databases and tables. For Php you can learn the basic and then go deeper with a framework like laravel or if you want to create microservices, go with Slim framework.

    1. 1

      Thank you for the tip, @realrecordzLab!

      I kinda just code with the languages I know until they show constraints. I'll give all that a look, but probably will keep building just to build with the languages I know for now.

      But if I do feel React is posing a constraint on a project I'll totally give Vue/JS a look!

      Hope you're journey's going well

  5. 2

    It's such an inspiring story. In the past I learned how to code just to learn but didn't start building any projects. What you said in your summary of learnings is true. The best way to learn is to build a project. I also got inspiration to start doing my project from watching Levelsio's presentation together with being in IH community. Your story will remind me not to give up. Thanks for sharing

    1. 1

      Thanks, Namwa! Don’t give up. Do a little bit, even just 5-mins, each day. You can do it.

  6. 2

    Inspiring! I like your work, beautiful and creative designs... I think Surf Trip List would have been really successful. It's a good concept with a large and affluent market.

    1. 1

      Thanks, Novi! I really appreciate that.

      And I had thought the same thing about Surf Trip List repurposed to a larger + more affluent market.

      If you had to pick one that you think would work, what would you pick??

      1. 1

        I would start with North American middle and upper class university students interested in a trip, and package the trips into something easy for them to choose.
        When my target customers are not ready to book a trip, I would still offer them valuable information about surfing and sell them merchandise.

        There's so much to do in that area, the key is to be creative (which you are), persistent and to have a long term vision.

        1. 1

          Persistence is definitely key.

          Maybe I'll dabble back in the "SPORT_NAME travel deals" business idea once travel begins to open back up.

          Thanks for resurfacing it as something to keep considering

          1. 2

            You're welcome... There are so many good ideas that just need the right people to overcome the challenges that come with them.

  7. 2

    Love this :) Liked your tweet.

    1. 1

      Thanks, @zerotousers! Appreciate the support

Recommended Posts