*by “we’re” i mean front-end developers This is a written version of a talk from Jamstack Conf London in 2019 that I put together for attendees. Because, the day before I was to board a flight for that trip, I flew off my mountain bike and broke both my arms. I felt bad that I…Details
Elementor Pro’s built-in templates are a great way to style an individual page, but why customize your online store on a product-by-product basis, when you can use Elementor Template Kits to design your entire eCommerce site? Countless businesses use WordPress to sell their products and services, thanks to the popular WooCommerce plugin. In the previous…Details
After Effects is one of the best tools that supercharges the post-production process of video editing. And using After Effects templates is a secret trick most video editors use to make great videos. If you’re still not using After Effects templates, you’re missing out on some of the best uses of the software. We rounded…Details
Learn CSS: The Complete Guide We’ve built a complete guide to help you learn CSS, whether you’re just getting started with the basics or you want to explore more advanced CSS. CSS Selectors So you learned the base id, class, and descendant selectors—and then called it a day? If so, you’re missing out on an enormous level of flexibility. You…Details
923 days ago, it was day 1 of learning how to code.
I was consuming Pieter Level’s “How to Bootstrap a Business” presentation.
And something stopped me.
“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.”
Just Do 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 a recording of me literally doing it on day 1.
Check it out.
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!
So that’s what I did.
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.
At that point, I’d take another tutorial.
Once I’d figure out how to keep going, I’d continue coding the project.
In case you want to learn to code too, here’s the exact tutorials I took at Treehouse:
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 this Firebase tutorial playlist by The Net Ninja.
I watched each video, did the full tutorial and slowly figured out how to create, read, update and delete (CRUD) items in a database.
This was completely game-changing.
I remember feeling like I could build forever at this point.
Here’s a PNG of what the project started to look like.
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. Check it out in this GIF!
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’s a video of me explaining the end product if you want to see it.
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.
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.
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 Guillermo Rauch’s 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).
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.
Ready to Go! Well Almost…
So I had my fiance’s blog all set up (with placeholder content).
Here’s a screenshot of it.
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.
Luckily, my buddy Dylan Jhaveri saw this and told me about Knut Melvær’s Sanity.
Sanity 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 a screenshot of the Sanity Studio I set up for my fiance’s site:
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 a photo what I ended up with inside my code:
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!
My fiance’s site still has placeholder content…
But check it out in this GIF.
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. Here’s the GIF.
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
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 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 of the thread on Twitter.
That would be the most meaningful way to say, “Thanks”.
hello. i think the title is presenting a threat to web components as a means to catch attention
this article is actually accusing developers of being bad at writing components. they really are. but, expectation management: the web components ecosystem is still brand-spanking new, and is still unsteady and evolving, so what should we expect?
web components are truly a huge improvement — a revolution actually — over the current react/vue/angular paradigm. it’s surprising how few developers even notice what’s happening here in the big picture. eventually the superiority will become exceedingly obvious to everyone, and there will be a mass exodus to web components, and those formerly-popular frameworks will be seen as “icky”. that being said, they’ve got at least a good five years in primetime yet
add together es modules, import maps, shadow dom, tagged-template languages like lit-html, package cdns, deno — all of that plus a universally-interoperable web component standard? most devs fail to compute the sweeping paradigm shift this is creating. it’s a complete refactor to our workflow as web devs, so much complexity will be cut. we can finally say goodbye to so much of our clunky tooling: npm, node_modules, webpack, jsx transforms, build routines, node itself, gulp, grunt and the rest of it — yuck
ok now you’ve got me ranting.. web development is about to become much more awesome. those of us on the frontlines of web components experience web development bliss and quickly become starry-eyed evangelists, however when we spread the word, most developers reflexively respond defensively when they hear their newfound react knowledge is being threatened. i’ve learned that devs are indeed very territorial with their familiar workflows. we really do have to drag them into the future, kicking and screaming all the way XD
anyways, i thought this one point toward the end of the article, was curious
Plug and play. No dependencies, no setup beyond including one tag. If a dependency is absolutely needed (e.g. in a map component it doesn’t make sense to draw your own maps), the component loads it automatically if it’s not already loaded.
no dependencies? no, i disagree.we really need an ecosystem where components can have their own dependencies. we just need to use decent tooling that incorporates all dependencies into our app’s importmap (importly doesn’t quite do that yet, subdependencies, but it’s a necessary enhancement)
anyways. am i in with lea, on building a new standard for a web component library? hell yeah! be the change you want to see in the world!
Your brand is the key to a successful business. It’s what gives your business an identity and separates you from the competition. Your brand manual or style guide are the documents you need to help keep it consistent—they’re key to maintaining your brand identity. Whether you’re a small business, agency, or a corporation, you should…Details
Do you want to build and deploy fast, beautiful mobile apps for both Android and iOS? Then you should consider creating a Flutter app. Using Flutter, you can write apps for both Android and iOS using a single codebase. And a Flutter app template makes it easy to get started. What Is Flutter? Flutter is…Details