I want to share my experience with an interview I had a few weeks back. Out of respect I will not name the company, and I will keep some details very generic. I found a listing on a job board and applied directly to the company site on their careers page. The company has been around for a few years. They are building out a software that is focused on helping other companies retain their customers and close more sales by having a good feedback loop and good communication across all departments.
I was initially contacted by the CTO and we had a phone screen for about half an hour talking about our backgrounds, the needs and direction of the company, and some of my technical skills. A few days later I was invited to come in for a technical interview/meet the team. The technical interview lasted about 45 minutes. The goal was to figure out how I would design a code a survey. This part of the interview was all whiteboard.
The scenario was this: You are a developer and you have to come up with a survey to help your company sell more granola bars. What questions would you put on the survey? Why? How would you code a database to accommodate for the survey questions? What tables will you need? Write out what the tables look like and how they connect with one another. How would you display this information on the front-end. How will you combine multiple elements and display it on a graph? Write out a SQL query that retrieves that information. It is important to note that most of the whiteboarding session was all pseudo-code with the exception of writing specific tables and SQL queries.
I think I did alright on most of the parts and I did struggle a little with the SQL query as I am not writing those all of the time and I should have done a little more review on that beforehand. After the technical portion I met with the owner and a few other team members. They asked some questions about things I was looking for in place to work and talked about what the things they were doing.
After my interview I was invited to complete a take-home coding test. I was told the test was fairly straight forward and would take me 2 to 4 hours. It ended up taking me quite a bit longer than that and the test did have some twists in it. My task was to access a specific API and then build out the front-end with react and the back-end with node. I was to make my calls to the API from the back-end to mimic having a database. I needed to access a list of 7000 users and display the information to the front-end. It also needed to be performant. The main issue was that the API would not return consistent data whenever you accessed it. It generated random users every time you requested information, even when you used a seed. So if you wanted to grab just a user, even a seeded user, you had to get ALL the information you needed to access in one go. You have no way of just accessing a first and last name, and an ID, and then later making a request for that specific user. The API was randomuser.me .
What I ended up doing was requesting just the information I needed for 1000 users at a time. Basically every time you went to a new page you would grab a 1000 users with all the info that was needed and then store it in state on the front-end. Doing it this way, I felt I made it as efficient as I could, and I only ended up needing to make 1 route on the back end to accomplish what I needed. Again, I want to reiterate that there is no way of going back and requesting more information for 1 specific user. I really had to play around with this API a lot and scour the docs to figure that out, which is why this project took me as long as it did, which I’ll talk about in a moment.
After I submitted my completed project I had a follow up interview online for about 20 minutes with another developer to go over my code. They seemed pleased with my solution and said it was almost identical to the solution they came up with. I asked how long it took most other participants to complete the project and I was told 7-8 hours, which is about how long it took me. Another important thing to ask as well in interviews is for proper expectations such as how many hours you will be expected to work. This was for a salaried position but the expectation was that 60 hour work weeks might be required often. You need to be your own judge and decide if that is something that is worth it to you when choosing an employer to work for. Remember that you are choosing your employer as much as they are choosing you.
I ended up hearing back a few weeks later that the company would be moving forward with someone more senior and that’s fine. I learned some things and gained some experience from this interview process that I will take with me. I hope you have gained some insight into what a developer interview process might look like. Good luck in your journey!
A year ago I finished FreeCodeCamp by completing all of the sections and projects that they had at the time. I wish an article like what I am sharing now had existed when I had first started FreeCodeCamp. It would have helped greatly to determine what I would actually be getting out of completing it. My goal for doing it was to gain the skills necessary to get employment as a developer. Some things I want to share are: What did I really learn?, Did it prepare me for the job market?, What did I get out of the projects?, Was it worth it?
If you’re not aware of what FreeCodeCamp is; it’s an open source learning platform for learning to code, kind of like a traditional coding bootcamp, but it’s all self taught. It was not easy by any means, but it was doable to finish the projects. There were 30 projects to complete to get your full-stack developer certification. Those 30 projects were split up into 6 sections. All you get for the projects is a user story(a list of requirements for what your project should do). When it comes to the projects there are no tutorials, no code along sessions, etc. You have to read the project requirements and build the projects to spec. There are some learning modules to help you learn certain technologies, but they are optional to get your certifications. The estimated time to complete all of these sections was a whopping 1800 hours. Based on my experience, and especially if you are new to coding, that is realistic. Since I have completed FreeCodeCamp, they added 3 new sections for Python/Data Analysis, but I won’t cover those here.
TLDR: Now that you have an understanding of the structure and time involved you can skip to: “Was it Worth it?”, if you are not interested in the details of the sections and projects.
Sections and Projects
Here is a breakdown of the sections and projects. I will highlight and go into detail on just one project from each section since the others in each section will be similar. Please note that I have left these projects and my code as the originals, many of these were done when I was brand new to coding, but I left them as they were so you can see my actual coding journey and progression.
Responsive Web Design Certification: HTML and CSS
This is the first section of FreeCodeCamp. This section only comprises of HTML and CSS. The optional learning modules are quite good for understanding how to use HTML and CSS together.
Time Estimation: 300 hours
Projects:
Tribute Page
Survey Form
Product Landing Page
Technical Documentation Page
Personal Portfolio
Technical Documentation Page: Build out a page like something similar to what you might see on MDN(Mozilla Developer Network) or W3schools.
JavaScript Algorithms and Data Structures Certification: JavaScript
This section has you working with ONLY JavaScript. So you won’t be using JavaScript to manipulate HTML and CSS just yet. The optional learning modules can be difficult if you are new to coding. The projects are 5 algorithms that you need to complete. 100% JavaScript code. Please note this was my original code when I was brand new to coding and does not reflect my current skills, try not to judge me to harshly eh?
Time Estimation: 300 hours(if you go through all the learning modules) if you already know JavaScript you can complete just the algorithms quickly.
Algorithms:
Palindrome Checker
Roman Numeral Converter
Caesars Cipher
Telephone Number Validator
Cash Register
Caesars Cipher: Values of letters are shifted 13 places.
function rot13(str) { // LBH QVQ VG!
let alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y","Z",];
let normalIndex = 0;
let rotIndex = 0;
let shiftIndex = 13;
let negShiftIndex = -13;
let arr = [];
for (let i = 0; i < str.length; i++) {
if(str[i] == "A" || str[i] == "B" || str[i] == "C" ||str[i]== "D" ||str[i] == "E" ||str[i] == "F" ||str[i]== "G"||str[i]== "H"||str[i] == "I"||str[i] == "J"|| str[i] == "K"||str[i]== "L"||str[i] == "M"){
normalIndex = alphabet.indexOf(str[i]);
rotIndex = normalIndex + shiftIndex;
arr.push(alphabet[rotIndex]);
}
else if (str[i] == "N" ||str[i] == "O" ||str[i] == "P" ||str[i] == "Q" ||str[i] == "R" ||str[i] == "S" ||str[i] == "T" ||str[i] == "U" ||str[i] == "V" ||str[i] == "W" ||str[i] == "X" ||str[i] == "Y" ||str[i] == "Z") {
normalIndex = alphabet.indexOf(str[i]);
rotIndex = normalIndex + negShiftIndex;
arr.push(alphabet[rotIndex])
}
else{
arr.push(str[i])
}
}
let joined = arr.join("");
return joined;
}
// Change the inputs below to test
rot13("SERR CVMMN!");
In this section you will learn about creating some front-end projects. No databases, no servers etc. This section has you jump right into working with React and Redux as well as introducing you to jquery. The projects are not geared towards being like traditional websites(like a company landing page), but rather they are projects that have some type of a function like a calculator etc. FreeCodeCamp completely skips building websites with Vanilla JavaScript, HTML, CSS being used together. So you never learn about DOM manipulation(huge mistake in my opinion). You just jump right into using React to build your projects, and you never get to learn the fundamentals unless you look elsewhere. The projects you build don’t have anything to do with solving a business problem(also not good if you are trying to get a job), but they will get your feet wet with React and I did have a lot of fun building them.
Time Estimation: 300 hours
Projects:
Random Quote Machine
Markdown Previewer
Drum Machine
JavaScript Calculator
Pomodoro Clock
Markdown Previewer: Use something called Markdown that uses a simple formatting syntax to accomplish the same thing as HTML.
Data Visualization Certification: D3.js a data visualization library
This section has you jump right into data visualization by building charts and graphs. The D3 library is well suited for this. You will be using Vanilla DOM manipulation for this section. The learning module for D3 is good and will teach you the basics. You will need to find other sources to teach you about DOM manipulation. Based on my area if I were to look up software developer jobs there might be 1200 on indeed. Only 5-10 will be looking for D3…. although other forms of data visualization might have a few more positions. I think data visualization is important, but that is something to keep in mind.
Time Estimation: 300 hours
Projects:
Bar Chart
Scatterplot Graph
Heat Map
Choropleth Map
Treemap Diagram
Choropleth Map: Build a map that uses differences in shading or coloring to represent differing values or averages.
API’S And Microservices: Servers, API’s, Databases
This section is where you start working with the back-end of web development. The optional learning modules are lacking in my opinion and I had to go elsewhere to understand how the back-end works. The projects are all geared towards performing a few simple tasks. The cover some of the basics with Databases and doing Create, Read, Update, Delete. The projects are not flashy.
Time Estimation: 300 hours
Projects:
Timestamp Microservice
Request Header Parser Microservice
URL Shortener Microservice
Exercise Tracker
File Metadata Service
URL Shortener: Visiting a shortened URL will redirect you to the original link.
Quality Assurance and Information Security: Servers, Databases, Testing, Advanced Node.js/Express, Helmet.js, and more
This section was combined when I went through FreeCodeCamp, but now the Quality Assurance and Information Security are split up. The learning modules are optional for this section as well. The topics covered in the module section are are all important, but in my opinion you need exponentially more knowledge and context than what is provided. I had to go elsewhere to understand these topics. For the projects: you will build the projects and then you will build your own unit and functional tests to make sure all of your back end routes are working correctly. You will also take security measures to start making safe applications. The projects are not flashy. For the Quality Assurance Section 3/5 projects are still the same. For Information Security 2/5 are the same.
Time Estimation: 300 hours for the old certification, now with them being separate, that figure is 600.
Projects:
Metric Imperial Converter
Issue Tracker
Personal Library
Stock Price Checker
Anonymous Message Board
Personal Library: Manage a list of books. You’ll need a database, the server code, and yep you guessed it… testing code as well.
After Completing all 30 projects which take an estimated 1800 hours to complete I earned the full-stack cert.
Was it Worth It? Did it prepare me for the job market?
My entire goal for learning to code was to gain employment. So I am going to share my experience through that lens. Some of the advantages of FreeCodeCamp are that it has structure, a good community, and it’s a free resource for people who may not have good access to learn otherwise. So if you are just wanting to learn how to code or get your feet wet, and you don’t need a job anytime soon, then it is a good resource. I appreciate everything that FCC is doing in the world, but if you want to get a job…. buckle up, because I’m going to be brutally honest. I’m assuming that 99% of people learning to code would like to eventually get a job. For me to get the full-stack certification, it no joke took at least 1800 hours to do that(learning and projects). That is basically 1 year full time. 1 year! FreeCodeCamp has on their front page that 40,000 of their students who graduated from their setup have gone on to get jobs. That is good, but the question that needs to be answered is: Was that directly because of FreeCodeCamp or was there more involved?
In my experience, FreeCodeCamp is very time heavy, and at the end of the day, the projects that you build are not suitable to impressing employers, solving business problems, or building websites like you actually do out in the wild. I finished the Full-Stack cert because I believe in finishing things, and I also thought that just by fighting through and finishing it would prepare me for the job market. Imagine spending a year to realize that none of the projects are suitable to show on my portfolio(not even close to being suitable). I know this by comparing the projects to my own personal projects and also seeing other portfolios of developers that are out there on the market. When I first started my journey, I had no idea that this would be the case. I was under the impression(From the picture FCC paints as well as other sources on YouTube, etc) that if I finished then I would just automatically be prepared to get employed. Nope, not in my experience. I can’t speak for anyone else. I know FCC is not being underhanded or anything, I am just giving my experience.
In my experience the things that have been helping me get interviews are having a good looking portfolio and good personal projects(not FCC projects) plus good skills/knowledge. I feel that whether you do FCC or not, that you STILL need good personal projects. These projects might take you months to build. They should be visually impressive and should be solving some type of a real world problem(ideally a business problem). My time spent on working on my own personal projects has been very well spent. So if you want to get a job, why spend a YEAR(yikes) working on FCC and then afterwards still need to spend months or longer building personal projects? Why not just start working on your own personal projects right away? You will be building something relevant to put on your portfolio and learning the direct skills you need to get a job. If you still need to learn, there are courses you can get online(Udemy, etc) that can teach you way faster and in more depth than FCC can. That was the case for me. FCC gets you right into working on modules projects and modules and projects and so on…, but the way it is done is time consuming and will take you right down the rabbit hole into things that don’t translate well into the job market and projects that won’t help your portfolio.
I have done a LOT more than just FreeCodeCamp. FCC has only taken up a portion of my overall development. I’ve done an 8 month internship, I am close to getting my Associate’s in Applied Technology, I spend a ton of time teaching myself, and I have spent a lot of time working on my own personal projects. For me, software development has been a lot more involved than I had originally thought, but it has also been more rewarding. So whether it’s been an online course, FreeCodeCamp, a degree, or something else, the thing that has helped me understand the most how to actually do development has been working on my own projects. It has helped me the most to get interviews and in the interviews themselves by giving me chances to do demos and giving me things to talk about. It took me going through FCC, getting close to achieving my Associate’s degree, getting internship experience, and much more for me to realize that building my own projects is actually what matters. In my experience, all that other stuff is just brownie points.
I hope what I have shared has been of service to you. Good luck out there on your coding journey.
In my own words I would describe it as making sure that your code works the way you intend it to. There are methods for doing this such as code review and planning, but mostly this is referring to writing tests for your code that validate the functionality and correctness of the code. This section of FreeCodeCamp covers understanding the basics of writing tests and how to use them. There are libraries such as Chai that are used to make writing tests to check your code very straight forward.
Module Section
The learning section (module section) has just 2 topics that it covers. QA testing with Chai, and Advanced Node/Express. Both sections are quite short. The QA section is good and will help you learn the basics so that you can later tackle the projects. The Advanced Node section covers some things that are valuable for working on your own personal projects but have nothing to do with the QA section or the QA projects. The topics the Advanced Section covers are essential to building your own projects down the line but in my opinion other than having these topics introduced this section it did not bring me any value and was actually super confusing as I didn’t understand the relevance of any of it at the time.
Projects
There are 5 projects to complete and all you get is a user story(list of requirements) to build them. Sorry, no tutorial or code along here. You are on your own. FCC estimates it will take 300 hours to build these projects. It took me less but that was only because I completed this section after spending a ton of time on my own learning about back-end development. You will build the projects that include a working back-end node server and then you will also build tests to validate your code. The tests will also be for your back-end code. You will not need to create a front-end for these projects as it comes with some boilerplate(starter code) and it will serve up an html file that has the structure you need for the front end(nothing fancy). This section has changed since I completed it. It used to be QA and Information Security, but now they have split those up. They did keep 3/5 of the projects the same, so I will share those with you.
Is it worth it?
Lastly, I would like to share what I feel like I got out of this section. The projects themselves are not flashy. An employer (especially if it is someone who doesn’t code) would have a hard time understanding what they are/do. I personally don’t have these projects as my main portfolio pieces on my website. I use personal projects that I came up with on my own for that. I have these QA projects listed as side projects if someone wanted to look them up. I found the process of actually building the projects and then building the tests to go along with it valuable, and I have sometimes talked about that when I have interviewed. I also found that building my own full-stack projects is so different than working on the FCC projects that it feels (almost) worlds apart. In my experience, despite all the learning I had done, and all of the FCC projects and school I had completed, nothing came remotely close to building my skills as working on my own projects has. So the way I look at it is this: Whether I did FCC or not, I’ve still had to build my own projects and understand all of the pieces.
Here are the projects:
Metric Imperial Converter: Build the back-end for converting different units of metric to imperial units and then build the tests out.
Issue Tracker: Track and Manage Tickets. This has the basics of what is called CRUD(Create, Read, Update, Delete) for databases. You will also create the server code and all of the test code.
The last two projects are a Sudoku Solver and an American British Translator. I haven’t completed these projects as they were added after I finished this section, but the gist is still the same.
I hope my experience has been of some value to you. Good luck out there!
API stands for application programming interface. Without getting technical let’s put this in practical terms. What does this mean for you in regards to FreeCodeCamp, or you building you own websites? It just means that there is another website or server where you request information and it sends that information back to you so you can use it in your website. You could get a list of hikes, stock prices, anything really. A microservice for our purposes is just a website that does something really simple for you. It has a backend/server that processes some information and sends the data back. The first project in this section is just a really simple microservice website that sends back a timestamp.
What you need to know
FreeCodeCamp estimates that it will take you about 300 hours to get through this section and complete the 5 projects. Like the rest of FCC all you get is a user story(list of requirements). You have to write all the code and figure it all out. You do get a little boilerplate(starter code) but that’s it. In this section you will start using databases. The learning modules are for MongoDB which is a noSQL database. You do not have to use MongoDB to do the projects. I did not. I used Postgres which is a relational database. At least 85% of the industry uses relational databases. I built my server and my database on my local computer and once I got it working I used Heroku to host them. I had one dyno for the database and another dyno for the server (Not all the projects in this section needed a database). You will not need a separate front-end website. The boilerplate FCC gives you actually includes the front-end code with a simple html file. It will get served up when you access the website. The learning module section is super lean and I had to learn from other sources for how the back end works. There are a lot of little things that can stump you and hold you up such as needing a certain library to help you do certain things and the list goes on. I had to be patient, learn to use lots of things I didn’t know would be required, and go through a lot of trial and error.
What is the value?
This section will teach you the basics of sending requests and working with databases. The knowledge that the projects will give you is valuable. You can use this knowledge to start building back-ends for your own websites(I did). If you are going to use these projects to get hired I am going to be super blunt and give you my 2 cents, but I will let you be the judge. I think in regards to showing a potential employer these projects as your main projects that may not be ideal for you. I think they are good to show as side projects if you so choose, but not your main projects. Someone who is not a programmer will likely not understand what these projects do. They do not look very visually impressive. On the other hand I have had good success with showing my own websites and projects that I came up with of my own accord. You can use the knowledge that you gain from this section to build your own personal projects. Again, you be the judge.
Projects
Here we get to the projects and what they do! I will include my code and a brief description of the projects.
Timestamp Microservice. Submit a request and get a timestamp back in JSON format.
What is the Data Visualization section of FreeCodeCamp all about? It’s about taking sets of information and displaying them in charts and graphs in different forms. This FCC section takes an estimated 300 hours to complete if you do all of the learning modules and complete the 5 projects it sets out for you. The projects are no tutorial. All you get is a list of requirements for your project and a data set. You have to do all of the code on your own. The D3.js library is used to do all of the graphing and charting. So you’ll just be using that, vanilla JavaScript, and DOM manipulation to complete your projects.
Is it worth it?
I have mixed feelings about this one. If I were to do a search on Indeed or another job hunting site for needed skills, I might find 700-900 jobs in my area wanting JavaScript, or for WordPress around 90-120. For companies looking for D3.js knowledge, the number is between 5-10. So you really need to be the judge and decide if it’s worth it to you to go through and learn this section. I think that the first 2-3 projects that you do are good because they are simple. I was able to knock these out fairly quickly. The skills are useful for creating dashboards in your projects. For example, if you have a finance application you could chart out how much someone spent. The last 2 projects are where I spent 70% of my time. They are a choropleth map and a treemap diagram. They were drastically more complicated than the first 3 projects.
How to approach
I started by going through the module section of FCC where you can learn about D3.js. I believe they may be changing that up in the near future but either way you’ll need to spend some time getting the basics before you tackle the projects. I was able to get through basics in a few days and got started on the projects right after. I felt that I pretty much had all of the knowledge I needed for the first 3 projects. They took some time and effort and before I knew it they were done. The last 2 projects were… quite difficult and there was information that was not clear in the instructions(at least for project 4.) After a ton of headache I figured out that I needed to use a topoJSON version of D3 to get project 4 to work. There was not a substantial amount of code involved, but understanding all of the pieces necessary was a challenge. The biggest issue I had was not knowing I needed that topoJSON version, as it was not in the project requirements/user story. For project 5 there was a good amount of work involved and a few things were a little tricky, but pushing through got me to the finish line.
Here are what all 5 of my projects look like and my source code in case you hit a snafu and need to look at a line or two.
To sum up, the D3 projects are useful however, there are not many employers looking for this skill. The first 3 projects will give you the most bang for your buck. Thanks for reading and good luck out there!
Are you wanting to learn how to code and make websites do amazing things? Keep Reading. If you haven’t heard of FreeCodeCamp it’s a free website where you can learn how to code for web development. JavaScript is the Second Section. The first Section talks about HTML and CSS so if you’re new you should probably start there. Having gone through this rodeo already I’d like to share my personal experience with you to get you going or moving forward if you’re feeling stuck. We’re going to cover: what JavaScript is and why it’s so important, why you should do FCC’s JavaScript section, how to approach learning the language, and additional things you’ll need to know that the section is missing(very important so you can avoid the “now what” and “coding overload” moments).
JavaScript is like the verb or brain of the website. It lets you actually do things like make buttons clickable and send information to somewhere else on the web, store the information that people type and other cool things. Heck you can even make video games with just JavaScript and there are machine learning libraries like TensorFlow.js. JavaScript is the language of the web and runs in browsers like Chrome, Firefox, etc. You can also use JavaScript on what’s called a server which is the back-end of a website and make full-stack applications using just JavaScript. This is actually the track that FreeCodeCamp is teaching right now. JavaScript is very powerful.
The JavaScript section is split up into a series of learning modules where you will learn a specific feature of the language or solve a problem. At the end there are 5 master algorithms where you get to prove your skill and if you are able to complete these 5 algorithms you will earn the JavaScript certification. All of the exercises before this build you up in knowledge and skill so that you will be able to solve them.
Here is an example of one of the final challenge algorithms.
The time
estimation to complete all of the exercises and the 5 master
algorithms is 300 hours. It actually took me closer to 400 hours to
get through it as I had never learned a programming language with the
exception of doing FreeCodeCamp’s previous section of Responsive
Web Design which was HTML and CSS. Some of the challenges are very
simple and you can work through them and understand the material in a
few minutes. Other times it is not so straightforward and much more
difficult. There were times when I thought that there was absolutely
no way that I was going to be able to figure out the
challenges/exercises. I would literally spend hours, maybe even up to
10 hours trying to work through a single challenge. I made a
commitment to myself to not look up solutions as much as possible
because I wanted to actually learn the material. There were very few
times I had to look up a solution and it would normally be because I
understood 90% of the problem and was missing some small piece that I
could not figure out on my own yet. Some of the challenges increase
in complexity very quickly and it can go from “Hey calculate the
mass of this orange” to “What is the mass of the known
universe”(that’s not one of the challenges I’m just trying to
make a point). My advice to you is to put in the time and do your
best. Don’t give up.
FreeCodeCamp does
a great job of teaching you the basics of JavaScript and I’m going
to tell you right now it’s only just scratching the surface. You
will still need to build up your knowledge and you will likely need
additional skills to help you get through FCC challenges. I’m going
to list the most valuable resources that helped me personally.
One of the best resources to help you learn JavaScript is this website! I would actually start here as it is very thorough and there are some great explanations. This was my number one go to for figuring out how JavaScript works. There is a TON of material so don’t think that you have to memorize or know everything, I found it best to just read through some of the basics and then look up particular things as needed. You won’t need to know everything to get through FreeCodeCamp’s JavaScript section as it covers the more basic things. I do advocate for gaining a deep understanding of JavaScript and all of its inner workings. That deep or expert understanding comes with time and I personally am still working on it. So, don’t be hard on yourself and focus on progression and building up your skills one concept at a time. There’s no pressing the fast forward button so just put your head down and get to work.
Other good sites
that I use in no particular order
In my opinion it would be better to read the series AFTER you have finished the FCC JavaScript section as the books are better read when you have the basics down. WHY should you read this? So you don’t show up to job interviews and end up looking silly. For example, you will get to avoid thinking that JavaScript is like a traditional object-oriented language just because it has syntax for a Class data structure. Even after many months of programming I had no clue how JavaScript actually worked until I read this. Don’t skip out on this one! Really!
Tying it together
The JavaScript section does a very good job of getting you through the basics and helping you test your knowledge as you work through the challenges one at a time. It will teach you loops, data types, algorithms, and so forth. What it does not teach is doing vanilla DOM(Document Object Model) manipulation. FreeCodeCamp jumps straight to using frameworks/libraries like React. A framework is something that helps you build websites easier and React is one of the most used frameworks. Going back to the DOM and why it’s so important. The DOM is everything you see inside your browser window. When I say DOM I’m basically referring to the webpage itself. The HTML is the building block of any webpage and the CSS is the styling. JavaScript and DOM manipulation let you actually do things on the page like store information a user types in, make things clickable, and a million other things. You can think of DOM manipulation as having your JavaScript code talk to your HTML code. HTML and CSS are like 20% or less of what you need to know and JavaScript is like 80-90%.
Let me show you a
simple example.
Here we have a
very basic page that just displays a question to a user. There is an
input element where the user can type things in and a button next to
it.
Here is the HTML
code. We want to focus on the input element and the button. Notice
how the input has an id=”weather”. The button has a reference to
a function called getShoes().
We type in a
value such as “hot” into the input and then we click the button.
This will
activate our getShoes() function in our JavaScript code below.
Notice how the
JavaScript sits between what are called <script> tags. This
code will output what type of shoes the user should wear depending on
the weather that you typed in earlier. Without explaining all of the
code I just want to focus on one thing. That is how the JavaScript is
connecting to the HTML. We see the const weatherValue is grabbing the
HTML input element with the id=”weather” and getting it’s
value. This is what I mean by DOM manipulation, it’s the JavaScript
and the elements on the page working together. The code ultimately
uses more DOM manipulation to display the text to the user via
another element that has an id=”output”.
FreeCodeCamp does not have an in-depth explanation of how all of these things are combined together and how the DOM works, so you will need to learn these elsewhere. Don’t worry I have two really good recommendations to learn these! They are:
This is a free course you can sign up for. You have to sign up with your email but it shouldn’t cost you anything. It covers 30 exercises that you can do in 30 days to level up combining HTML, CSS, and JavaScript without using a framework.
Without understanding how the DOM works when you aren’t using a framework you won’t have any context for why frameworks are even needed. Frameworks are always coming and going. Vanilla JavaScript and DOM manipulation are the basic building blocks so they will always be around. Build up your foundation and learn how these things work; let your roots grow! Then you can move onto the next section of FreeCodeCamp, which is using Front-End libraries like React.
I hope you found
some valuable insight and gained some motivation to level up your
coding skills and good luck out there!
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.
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.
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.
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.
