January 2020 – Coding with Colton

The FreeCodeCamp Responsive Web Design Certification is a great way to get your feet wet in the coding world and you will learn the basics of building a static website. A static website is a page that just displays text, images and so on to the user. FreeCodeCamp(yes, it really is free) is a website that teaches you the foundations of coding. The Web Design section is absolutely AMAZING as you’ll get to code along at the beginning and solve challenges to improve your coding skills. You’ll get to build 5 projects (yes websites) that you build yourself and earn your certification. The Web Design section will allow you have some starter projects and even build a basic portfolio if you want to get into web development. If you just want to learn to build a basic website then FCC is a great way to get started and build something personalized.

Get started by going to https://www.freecodecamp.org/ and go to the Curriculum Section and you’ll see this :

What’s really cool is that you don’t need to download anything for this section and you can do all of the coding inside the website itself. You’ll level up and complete exercises by going through them one at a time. Each section progressively makes you better and you’ll get to do more things. Here is an example for the first exercise:

Here you’ll learn the basics of HTML(Hypertext-markup-language) and CSS(Cascading-style-sheets). To give an analogy let’s say that you are building a house. HTML is like the building material and structure of the house. You have a foundation, walls, roof, windows for the structure. You also have materials that you use to make the house like wood, concrete, nails etc. HTML lets you put the basic layout with structure like the title going the top, then paragraphs, and so on. The materials that you can put in your structure such as text, images, videos are also part of HTML. The CSS helps with styling and positioning your HTML. The CSS is like the designer who gets the house looking all nice and spiffy with fancy colors, backsplash, and positioning things in the right place so they work together.

All you need to do in FCC for these learning sections are follow the instructions on the left. You put your code in the middle and you get the output of what it will look like on the right. This is GREAT because you get immediate feedback and you can see if you are doing wrong and it’s all on one page.

The last section is the projects which is where the real important stuff begins. There are a total of 5 projects that you will build by yourself. They are basic web-pages that only need to use what you have learned so far. You can actually build some really cool stuff with just that knowledge. The projects give you a list of instructions called a user story. This set of instructions are just a loose guideline for what the functionality of your website should be. YOU’LL BE DOING ALL OF THE CODING which is the BEST FEATURE of FreeCodeCamp because YOU will get REAL EXPERIENCE and knowledge. That means you won’t be forever stuck relying on someone else to do everything for you. Each project has a test-suite(a series of computerized tests) that you can include and it will check it you have done your project correctly. This will give you a huge confidence boost as you realize that you can code things all by yourself with out being shown step by step what to do.

Here is an example of a project I did:

https://codepen.io/Codemaster45/full/WymRvP/

Once you have completed 5 projects you should be proud of yourself! Web development is not easy and getting these web pages finished is a huge milestone. FreeCodeCamp gives an estimate of about 300 hours to get to this point and I believe it is definitely worth it. With this knowledge you can get going on building your own static sites or you can keep learning if you want to be a front-end or even full-stack developer. Some people may be wondering if you know enough to get a job at this point and I would say that you still likely need additional skills to be able to get a job as a front-end developer. The great news is that the next two sections of FreeCodeCamp deal with gaining the skills to do just that. The other two sections are JavaScript(this makes websites do cool things like if a user clicks or types in something) and Front-end Libraries(you will learn a Framework like React that makes combining the HTML/CSS with JavaScript easier).

What’s the FCC front-end Cert and why should you care?

If you want to become a web developer, the front end is a great place to start (front end means the code on the website that is inside your web browser). If you have never even written a piece of code in your life then fear not because FreeCodeCamp has you covered and can get you (YES YOU) started TODAY! Even if you already have a little experience FCC can help you gain more skills or break out of tutorial after tutorial wasteland.

The FCC front-end curriculum is an experience set up to teach you the basics of coding. There are a series of lessons and coding challenges that you complete as you progress and gain more skills. The grand prize is that along the way you’ll create 10 projects and complete 5 master Algorithms. Don’t worry though you’ll be prepared to tackle these projects which come at the end of the learning sections. What is AMAZING is that YOU can have PROJECTS that YOU built to show employers to HELP YOU GET A JOB and get PAID! With these projects there is no copying code or having a tutorial show you what to do. You will get a user story which just a list that details what your projects should do and how they should function. As you complete projects you will build confidence that you can code and create things. You will gain real experience and you will actually understand the process.

Why is this for you?

If you are just starting out or if you have been stuck in so called tutorial purgatory(doing tutorial after tutorial) then this is for you. Real projects that YOU code mean REAL progress. In real life you can’t just watch a tutorial and automatically know everything. There are just too many factors in play. You need to actually understand the process and write your own code. If you find yourself watching too many tutorials then you never break out of this and that’s why doing your own projects can be so difficult. Having a guideline for what the functionality should be and then you figuring out how to create it will break you out of tutorial abyss. Yay!

How do I start?

Go to https://www.freecodecamp.org/, and create an account. Go to the curriculum section and start from the beginning.

What cool stuff do I get to build?

You’ll make some awesome projects like a JavaScript Calculator, A Pomodoro Clock, Random Quote Generator(this one was fun and my personal favorite) and more. https://coltonhibbert.github.io/random-quote-machine/

What cool stuff do I get to learn?

By the time you’re done you’ll know a good deal of HTML, CSS, JavaScript. You’ll also get to learn a front-end framework like React.(React makes building web-pages easier)

How long will it take me?

The front-end certification is broken up into 3 sections.

Each section takes about 300 hours to learn.

Section 1 is Responsive Web Design. It will Teach you HTML and CSS and you’ll also build your own (yes your very own) projects.

Section 2 is Algorithms and Data Structures Certification. You will learn JavaScript(it’s the language that tells websites how to run and do cool stuff when users type and click on things). JavaScript is SUPER powerful and can do so much more than that but you get the idea. You’ll get to go through problems that you solve with JavaScript. At the end as a mark of showing that you know your stuff you will complete 5 master algorithms. This is where you get to prove to yourself and others that you( yes YOU) know how to solve problems.

Section 3 Is the front-end Libraries Section. You’ll learn React or another front-end Framework of your choice and build those cool projects like the JavaScript Calculator we talked about earlier.

You’ll get to build 5 projects that you(yes YOU) will be proud of because you made them. All of the projects from section 1 to section 3 have a test suite(a set of tests) that check to make sure your project is functioning the way it should. That is one of the best features because you can gauge your progress on these projects.

How hard is it?

The FCC front end certification can be challenging at times because web development is a challenging field. With that challenge comes satisfaction from leveling up and becoming better. It took me roughly 9ish months to get through all of the challenges and projects. It is all about putting in the time and effort. FreeCodeCamp wasn’t the only thing that I worked on during period but I do feel the time estimation that FCC gives is fairly spot on, especially if you are newer to programming.

Will FreeCodeCamp teach me everything?

FCC is a great resource and will make up half of your learning curriculum and most importantly provide a clear path and structure. You will still need to work on additional resources to supplement your learning. I recommend Andrei Neagoie’s Complete Web Developer:Zero To Mastery https://www.udemy.com/the-complete-web-developer-zero-to-mastery/. Since that course is on Udemy I would wait until there is a sale so you don’t pay an arm and a leg. Instead of scouring endless hours on what to learn you can get the most important things you need from these resources right here and get started today!

In conclusion FreeCodeCamp is an awesome way to develop your programming skills and I hope you gained some insight into how beneficial the material and especially the projects are.