My Favorite Coding Websites


Show Notes

When deciding to learn how to code, there are so many options available. Where do you start? In this episode, I go over the sites I've used in my journey, with free and paid options. Also, the design of the She Builds With Code website is up! Check out the link in the show notes!


Show Links

She Builds With Code - Github Repo

She Builds With Code - Demo Site

Hugo

Building Websites with Hugo - Book

Tabbed Content in HTML - a Tutorial

Free Code Camp

Codecademy

The Odin Project

Treehouse

Udemy

Web development Zero to Mastery - Andrei Neagoie

Web Developer boot camp - Colt Steele

The Complete Web Developer boot camp - Dr. Angela Yu

Thinkful



Transcript

Noelle: What’s up everybody! Welcome back to another episode. I’m your host, Noelle Anderson. And in today’s episode, we’re going to talk a bit about my favorite websites that you can learn to code with. First, I do want to start off with an update on the She Builds With Code website. That has been the project that I’ve been working on for the past several episodes and building that site entirely from scratch and giving updates as I go and I am proud to announce that the static design is completely finished.

[00:00:32] And by completely finished. I mean, it’s good enough to get up on the web. Anybody that’s worked on any kind of creative project for a while will tell you that nothing’s ever really finished and I’m sure I’m going to continue to tweak it, but it has basic styles done. I’ve got all of my templates and pages up.

[00:00:51]You can check out the Github repo, which there’s a link to that in the show notes as well as the Github. Pages hosted site. So you can see exactly how the site works in its current iteration. The challenge that I got to work on this past week was learning how to do a tabbed view.

[00:01:11]If you go to the sample website and you click on episodes and then click on an individual episode down in the middle, there’s a section for show notes and then a section for the transcript of the episode. And I’m sure you’ve seen this, you know, on the web where you see a section of content and then there’s another header right beside it.

[00:01:30] And there are tabs, you know, like Excel or, or any kind of spreadsheet where you just click over and it reveals the information underneath of that heading without, reloading the page or anything like that. I wanted to do that, but I wanted to do it in a way that wasn’t dependent on JavaScript.

[00:01:49]What I found when I was looking up tutorials on how to do it as a lot of people were depending on JavaScript. And I am trying to avoid reliance on JavaScript for functionality of the site. I’ll be honest. I’m, haven’t gotten there a hundred percent yet. My mobile menu right now is dependent on JavaScript to work.

[00:02:10] And that’s nothing to say that that’s wrong. But there can be some accessibility issues that come into play. If you have, you know, people that have sites that have either sites. There are some accessibility issues that can come into play. If you have folks that have disabled JavaScript in their browser, or they have slightly slower computers.

[00:02:30] And I just wanted to make sure that at least the content section of the website was as accessible as possible. So I went looking for a tutorial on doing tabs with just CSS and HTML. I’m happy to say that I found several. And so I kind of mashed up what I learned in a video with what I learned in an article and then put my own twist on it to make it look the way I wanted to. I’m including a link in the show notes to my favorite tutorial that I found that was the one that gave me the most clear picture and helped me get where I was going.

[00:03:00] So I was very happy to have gotten that figured out. So right now, in the development process of the site, I am learning Hugo, which is a static site generator that is built in the language go. So lots of terms there. To review, a static site generator is simply a script that takes regular text files, be them markdown or even HTML, and combines them with templates that have your preferred design and basically generates all the pages of your site for you.

[00:03:35] So it kind of does the exact same job that a regular Content management system would do like WordPress, but there’s no database. Everything is just HTML files, which you know, can make things run a lot faster. Obviously, there are no security issues because you don’t have a database that can be hacked.

[00:03:51] And for developers that really like to write in markdown, it’s wonderful. Well, cause you write your content in a markdown, you run the script, and boom, there you go. Your site’s up and running with whatever workflow you’ve put into it. So I’ve been learning Hugo partially because people have been talking about how fast it is as a static site generator.

[00:04:12] If you want to check out my current progress in building my site in Hugo, if you go to the GitHub repo link you can actually switch branches to the Hugo build and you can kind of see how the layout of that works and kind of poke around in that so the majority of the site is actually already set to be generated by Hugo.

[00:04:32] The biggest issue I’m running into right now is figuring out how I want to add new episodes to the site. So Hugo’s extremely powerful. However, it currently doesn’t support dynamically, creating new pages. And what do I mean by that? It integrates, it has a direct integration with APIs, super simple to pull an API, and my podcast host Buzzsprout has a public API. I can pull information about my episodes automatically from the website after I upload them.

[00:05:04] A couple of problems are one, Buzzsprout doesn’t support transcripts in their API. So regardless of whatever solution I come up with, I still will need to manually paste my transcripts into my website every time I post a new episode. Problem number two is, while I can pull the information from the API automatically, right now the only thing I can do with it in Hugo, as it’s built, is to create the listing page. Those are the page that lists all of my individual episodes can automatically be updated.

[00:05:41] Unfortunately, creating individual pages for each one of those episodes is currently not supported. So I have to make a decision about whether or not I want to spend more time writing a custom solution within this to make it work, or if I just get a minimal viable product up so I can get the site up and running manually paste these new episodes for a little while until I find something.

[00:06:05]I think I’m leaning more that way while the education of, you know, trying to figure this out will be great. I don’t want to get so caught up in the fun of building the project that I forget that the main goal of this is to make sure that I have my website up online. And there’s no reason to wait, just because I’m trying to make something a little bit easier for myself.

[00:06:28] So that’s where the site lives right now. I’m super excited. My hope is that by the time I bring you another episode, I will have a fully functional website up and running. And you guys can give me all your thoughts on that.

[00:06:39]The meat of today’s episode is going to be based around websites that help you learn how to code. I have gone through my fair share of websites, books, resources, courses, the whole nine yards. And so I’d like to share a little bit about what I learned from each one of them, how they did or didn’t work for me, who they might be ideal for, and what you can expect from them. And we’re going to start with free tools because that is the price that I think everybody can agree on is really awesome.

[00:07:07]Top of that is Free Code Camp. That’s found at FreeCodeCamp.org. You can find a link to this in the show notes. The cool thing about Free Code Camp, aside from the fact that it’s free, is that it is a huge ecosystem of aspiring developers. So in addition to the curriculum, they’ve got a forum that’s extremely active. They have a blog where people write a lot, they have an extremely active YouTube channel where they offer video courses on things that are covered in the main curriculum, as well as, you know, outside coding topics.

[00:07:44] And when I first found Free Code Camp, actually it was, it didn’t look the way it does right now. It was a site that basically curated different resources together to teach you how to code and then offered some projects at the end. And what it does now is it gives you little bite-size lessons in web development. If you start from the very beginning with the front-end development training, you’re going to learn HTML, you’re going to learn CSS, you’re going to learn JavaScript and jQuery in these really super short lessons. There’ll be a paragraph about what you’re going to learn. It’ll describe what it does, and then you’ll get these little instructions on what to do. And you’ll have a very small coding problem that you’ll need to type into the entire site has a browser-based editor.

[00:08:32] So you never have to do anything outside of that when you’re just working through the exercises where they teach you the core topics. The entire curriculum is broken down into multiple certificates that you can earn, you know, there’s front end development, you know, there’s backend there’s APIs and microservices.

[00:08:52] It’s a whole host of things. In each section, as I just described for the end of the front end, the same works for the rest of them. There are many problems that you do. And then at the end of each section, each certificate, there are, you know, a minimum of four to six projects that you have to build on your own and submit for automatic grading in order to get your certificate.

[00:09:14]Now the individual exercises are optional. You don’t have to do them in order to get your certificate. The only thing you have to do is submit the projects in order to get your certificate. And, you know, they’re nicely challenging. What I love about Free Code Camp is. It’s very interactive. Everything’s broken down pretty small.

[00:09:33] And like I said, the community is huge and extremely supportive. For me, I eventually got away from Free Code Camp because I found that the short exercises while they were great as an introduction, weren’t really giving me enough substance for things to stick. You know you’d kind of work on one thing for a lesson and then you would immediately build on that, which works for some people.

[00:09:55] It didn’t work for me. Additionally, I kind of fell out of interest in JavaScript, exclusively and Free Code Camp, like a lot of sites that are trying to get people job-ready, focus on the most in-demand skills in JavaScript right now is still very much in demand for people that are looking to get developer jobs.

[00:10:18] I wasn’t looking for a developer job. I was looking more for the skills to build my own business. So for that reason, I kind of deviated away from Free Code Camp. . But if anyone is ever looking to start to learn how to code, I always direct them there because of the wealth of knowledge that is available to you. And it’s a great place to start and, you know, kick the tires and see if this web development thing is really for you.

[00:10:43] My second favorite free tool is Codecademy. This is also one that I found pretty early on it’s. Another site that does an in-browser code. Editor. So you get lessons that you code directly within their browser, within your browser, and in their online editor.

[00:11:02]So with Codecademy, you get a lot more practice time. The topics are a little more in-depth, which is to say, you spend a little bit more time working your way through a topic instead of just doing really quick one-off exercises, just to see how they work.

[00:11:20] And then at the end you get a walkthrough project, like a mini project where they kind of step you through how to build it. So you get to see, you know, kind of a full workflow there.

[00:11:28] a Few years ago. And by a few, I mean, like at least five they launched Codecademy pro, which goes a little more in-depth that gives quizzes. It gives more in-depth projects. I couldn’t bring myself to buy it mainly because it was just a little too pricey for the monthly fees for me. And I found that while it was great for the extra hands-on practice, it also felt a little too handholding for me. So I wasn’t retaining my lessons very well when I got away from Codecademy.

[00:12:01] And I think in both cases in both Free Code Camp and Codecademy, I was a little bugged by the in-browser editor. It’s great to get you started really quick and really fast. And especially for people that are like starting from complete zero, it’s best to be able to kind of dive in and get some early wins, and setting up your own programming environment can be a bit of a struggle, depending on what it is you’re trying to set up, what instructions you’re finding, how tech-savvy you already are, to begin with.

[00:12:32] So I appreciate what these guys have done with these, you know, in-browser editing because it allows you to quickly start to write code without having to worry about a lot of the details there. So you get those early wins and then you feel more motivated to continue on.

[00:12:47] For me, however, just wasn’t enough. It just wasn’t clicking. And that led me to the Odin project and the Odin project is another free site. It is project-based. They teach Ruby and JavaScript web development and the thing that differentiates the Odin project from the rest of them is you have to set up your own environment right off the bat.

[00:13:09] They don’t have any kind of a structure in place where you’re going to be coding in the browser on their site or anything. And the reasoning is, you know, if you’re going to do this job, you need to dive right in and do it. It’s not something, again, I’d necessarily recommend for super, super beginner beginners, unless, you know, you’re really either already extremely tech-savvy or you like the challenge right off the bat.

[00:13:32] Because as I’ve mentioned, setting up an environment can be extremely frustrating. I will say that the Odin project was great, giving very clear instructions on how to get your environment set up. In fact, to this day, I will still go back and refer to it any time I need to install Ruby on a new machine.

[00:13:48]What I loved about the Odin project is how project-based it was so right from the start after you get your environment set up, you go through a curated list of articles, blog posts, and videos for the learning. So they start, you know, their, their curriculum is very much the way Free Code Camp was and their beginning where they didn’t have a completely built-in curriculum.

[00:14:14] However, what they do is, you know, they send you off and they say, okay, go and learn this from this, go read this. This is an optional video. If you want to get in-depth on this and then they’ll come back and kind of sum it up and they’ll give you questions. To think about after you’ve read to make sure that the material is really sticking for you, and then you get a project to work on and you get several small ones throughout, and then it always culminates in a huge one at the end, but they walk you through enough of it that you have the confidence to figure it out and finish it.

[00:14:41] So they’re not giving you the answer, but they’re kind of giving you a map and telling you. And giving you a map on a compass actually, and saying, okay, cool. This is the rough path you want to follow, to get to where you want to go. Have at it! And I really loved the flexible nature of the whole thing.

[00:15:00] I loved being able to kind of, you know, figure things out, but I had enough confidence from working on the other exercises through it to get through larger projects. And it was, it was a rush honestly, and it’s kind of really what kicked me off there. So the Odin project is great if you are cool with setting up your environment from the beginning if you are really big into projects, which as I’ve mentioned so many times in this podcast is entirely the way I love to learn. And you want a challenge. It can be extremely challenging. Of the three of these, this is definitely the least handholding option. There is on the free spectrum, but if you’re ready for the challenge, the Odin project is definitely one I’d highly recommend.

[00:15:50] And now going into paid tools. So at the top of the list is Treehouse. This site was actually the first subscription site that I invested in for my coding education. They really have a very bright and engaging style about them. It’s highly produced and you get videos that, you know, kind of look like TV shows and they’re, they’re really big on kind of gamification of their learning.

[00:16:18] So when you get in there, you can choose different courses and each one has its own section. And in each section, you have a series of videos, quizzes, and little mini breakdowns. This is another site that has a built-in code editor. It’s a little more advanced than a Free Code Camp or Codecademy because the editor isn’t directly tied to exercises.

[00:16:43] You can actually go in and start to build your own projects using their code editor online. And it’s literally just an online code editor which was pretty cool. The videos, as I mentioned are extremely, really engaging. They’re super short, you know, they’re not like, you know, five to 15 minutes and they’re focused on one very specific things.

[00:17:00] So you kind of code along, you listen to the instructor, and then you immediately get a quiz after that. And then you immediately get a little exercise to work through in sometimes in multiple steps. The entire process was very well thought out and, you know, like I said, it’s very engaging and colorful.

[00:17:17] I fell off when I started to notice an inconsistency in the teachers. Some of the teachers in Treehouse are amazing teachers. You can just tell that they are, you know, really into their subjects. They know them well, and they know them well enough to be able to teach them. And then unfortunately there were some others that clearly knew coding like they knew what they were doing, but they weren’t necessarily the best teachers. And unfortunately, it can be really frustrating in your early coding education when you’re following along or you feel like you’re following along. And then when you go to work on a project, right after a lesson, you’re like, wait a minute, did we talk about this? How do I, how do I do this? And unfortunately, there were a couple of teachers in there that I think just took some subjects or took their, their own personal knowledge, a little for granted. It kind of derailed me, you know, I actually kind of had an off again on again, relationship with Treehouse where I saw they had made updates and so I came back to see if maybe they’d gotten rid of some of the videos that I knew I couldn’t follow along with. And some had, and some hadn’t in the end.

[00:18:24]It is a great learning tool, for sure. Like the overall structure of what they’ve built at Treehouse is definitely one I recommend when you’re ready to invest a little bit of money to just see if that’s something that you want to do.

[00:18:37]Next on the list is Udemy. Udemy is not technically a coding website per se. Udemy is an online marketplace where teachers can sell their courses on anything. It just so happens that web development is one of their hugely popular topics. So you will find a ton of web development courses, a ton of coding courses, I mean the whole nine yards you can find just about anything you want to learn on Udemy.

[00:19:07] I’ll share a few links on my favorite Udemy courses in the show notes. The biggest thing you have to keep in mind with Udemy is you have to do your research before you go and buy a course. There are ratings for every course. So make sure you take a look at those ratings, read through them, do some Google searches. Unfortunately not every course is built equally and that’s cause Udemy doesn’t really have a huge vetting system. Because again, this isn’t a web development learning site. This is an online marketplace for teachers to be able to bring their subjects to students. But there are a lot of really wonderful gems there and they frequently have sales and discounts.

[00:19:51] I know they frequently have them for new years. So if you never checked out Udemy and you got about 13 to 15 bucks to link down into a course, I definitely recommend checking it out. And again, I’ll link some of my favorites down in the show notes.

[00:20:04]My last and my most expensive venture was in Thinkful’s online boot camp.

[00:20:10]So Thinkful actually bought the Odin project. And I had mentioned earlier and they had a little advertisement for it down at the bottom of most of their pages. I had gone back to the Odin project. I was working through some things and I realized that I kind of wanted something to kind of give me a little kick in the butt.

[00:20:30] I needed to kind of step myself up a bit. And I hadn’t really considered an online boot camp. For one, they are crazy expensive where they can be, and I just don’t roll in money like that. So it was something that never even crossed my mind as a viable path for me. For too, a lot of boot camps, actually most boot camps are training people again for the workplace.

[00:20:55] So they’re teaching in topics that I may or may not be interested in. However, I was at a point where I just wanted to get the confidence to just build more. I just wanted to build more and I wanted to build more in web development. And if you’re working in web development, you can’t avoid JavaScript. Even if you just use it for the tiniest of things, it is ingrained in the workflow so you might as well get in it.

[00:21:18] At the time I was looking into this, this was the summer of 2020. This is dead smack in the middle of the COVID-19 pandemic. And they were running this little special, well, first of all, they gave you a seven-day free preview to check out what they called their flex program.

[00:21:35] This was basically kind of an elevated a paid course, if you will, it was a learn on your own terms. So instead of being more of a traditional boot camp where you’re in a cohort from nine to five, and you’re working with the same people and you have an instructor, that’s just throwing information at you like a water hose.

[00:21:55]This was lessons available as on-demand, which made it cheaper right off the bat. And you still got to have a mentor that you got to speak with one-on-one, which was awesome and was really the biggest selling point for me. And they had this special, like I’d mentioned, you know, where things were a bit more cheap than they normally were that you could sign up for.

[00:22:19]So I took the plunge, I got a loan and I started working in Thinkful. And the coolest thing, honestly is I got to meet my mentor. It was a black man named Tim and I was super excited for one to see someone that kind of looked like me in this industry that was a teacher and a mentor that I got paired with.

[00:22:38] And it was amazing to be able to have a conversation with somebody and speak in regular web development terms without having to explain them, my husband, my friends, they are all very supportive of what I do, but I am an oddball in our group. I am friends with artists. I have been working for years as an artist in a theater, and so my nerdy side has always been something that has been a little quirk and a bit of a joke. So I’m always having to explain what I’m talking about if I go off on an excited tangent about something. However, talking to Tim and being able to just, talk about my code editor or ask questions about a language without having to go into any explanation was so freeing.

[00:23:25] It was wonderful. And I gained a lot of confidence from being able to talk to him. I built the project Frizzcast, which I’ll put a link to in the show notes. That was just a, it was a fun project that I got to work on. It was required for the course. And I got to build it entirely from scratch, coming up with the idea and figuring out the workflow, the patterns, the whole nine yards.

[00:23:50] And I felt so accomplished when I got that done. Unfortunately, I got lost when the curriculum switched to React. Now to be fair, my advisor and my mentor both told me that the React program has been a long problem for them. And they were in the middle of a complete rewrite of the curriculum while I was in the cohort.

[00:24:13]The unfortunate thing is while the earlier lessons were broken down really well, and you had multiple steps to get through them. When we got to React, React was just one big block. Things weren’t really broken down very well. It moved very quickly and I kind of felt like I was back in another Treehouse course where I had a teacher that understood the material but didn’t quite understand how a beginner was going to understand the material.

[00:24:42] And I got really fast and I got frustrated and I got depressed. Honestly, it wore on me because I first felt that I was doing something wrong that I clearly did not have the grip on this than I thought I did because if I did, I wouldn’t be struggling like this.

[00:24:59] It took a lot of soul searching and it took a lot of struggling in it to realize two things. One, I was never looking to get a job in web development. My goal was to learn the skills in order to build whatever I wanted to build for my own business ventures. Not necessarily to work for somebody else. Two, the bigger thing is that React didn’t have to be a part of my workflow. It kind of came to a head when I was speaking out outside resources to try to understand React because the curriculum was just not clicking for me.

[00:25:31]I dropped the boot camp and it wasn’t until actually that I started to develop the idea for this podcast that I got out of the funk that I put myself in from quitting, because I thought that I had failed. I felt like I had failed. And the reality is it just wasn’t for me. That style wasn’t for me, this particular language wasn’t for me, and it wasn’t contributing to my goals. So there was no point in beating my head up against the wall to try to learn this stuff. When I wasn’t planning on using it for what I wanted to do.

[00:26:05] And that’s the biggest takeaway that I’d like to give to you is that all of these options, all of them have success stories. Like each one of them has a, you know, a plethora of people that say, you know, I wouldn’t be where I was. If it wasn’t for Treehouse, I wouldn’t be where I was. If it wasn’t for Codecademy, for Free Code Camp for the Odin project for Thinkful.

[00:26:27] The reason that there are so many is because everybody doesn’t learn the same. Everyone doesn’t learn at the same pace, they don’t learn with the same tactics. They don’t learn what the same styles and each one of these sites has its own strengths for the right people. And when you’re learning the code, there’s a lot of experimentation that you have to do. It’s kind of baked into the entire experience. Like nobody’s going to know everything about a subject.

[00:26:56] It’s just not possible. The way that technology moves is so fast, that keeping up with anything, if you drive yourself crazy and you know, most of the new hotness that you just learned is probably obsolete already by the time you get a grip on it. So it’s important to make sure that you’re focusing on what you want.

[00:27:16] What do you want to do with this coding thing? Do you want a job? Do you want to be a freelance web developer? Do you want to get into mobile development? Do you want to get into machine learning? Do you want to be a data analyst? There are so many options that are available and because you are uniquely who you are, you may have to play around a bit before you find your fit.

[00:27:38] They build these kinds of tools for the masses, for the most reach possible. And what you have to do is you kind of have to pick and choose what parts work for you. And if you find one whole curriculum that does it for you, congratulations, that is awesome. Stick with it and do it, but don’t get frustrated if it doesn’t work out that way.

[00:27:58] It doesn’t mean that you can’t do it. It just means you need to find another way, read it in a different way or step away from it for a minute and come back to it. Find an audiobook. If you’re feeling like this, this blog post that you read, is it hitting it for you or look up a video to see if you can, you know, if watching somebody do it helps you click a little bit better.

[00:28:17]But don’t give up. It’s well worth it. The feeling of euphoria that you can get when you figure out something and whether it’s, you know, something as large as launching a mobile app or a smallest figuring how to print hello world in a new language, can’t be beat. And it is definitely worth the effort.