My first steps building static web pages with Free Code Camp

Yesterday, I explained what Free Code Camp is in my own words. Today, I’m going to detail my experience going through the very beginning of their front-end course, where the goal is to build some simple static web pages.

To start with, here is the detailed front-end curriculum, with the expected duration for each section:

The first 4 sections — from HTML to jQuery — are straightforward interactive tutorials, quickly covering the basics necessary to build a webpage. If you’ve already followed tutorials on websites like CodeAcademy or CodeSchool, you’ll see that it’s very similar. On each page, you’re given some teaching element, an instruction, a code editor, and a way to test and display your input.

Here is an example:

For those with already some programming experience, going through these tutorials should only take a few minutes. For those new to programming, the rapid visual feedback given by these exercises can provide an exhilarating feeling. In a few minutes, a complete newbie can start seeing how updating the HTML, CSS and JS impacts the structure, design or behavior of a webpage.

So far, it’s very easy, and many beginners start to have the feeling that learning web development will be a breeze the whole way through.

But this is terribly wrong.

After having covered these basics, the camper needs to build 2 basic static web pages to apply what he’s learnt so far. And it can get quickly hard for those who don’t expect it. You don’t have detailed step-by-step instructions anymore. You’re kind of left to fend for yourself, as in any real-world project where the solution is yet to be found.

Here’s how projects present themselves (below the first project, which consists of building a Tribute Page using Bootstrap):

You have some basic instructions on the left, a video providing more details on the right, and that’s it. The camper is encouraged to use CodePen, a website allowing anyone to create webpages in a few minutes by entering directly their HTML/CSS/JS code in the online editor.

Here’s my CodePen link for the first project. And here’s CodePen’s basic display, with code on top and result below:

The great thing with CodePen is that you can see live the result of your updates, allowing you to quickly and gradually improve your code until you’ve got something good enough for you.

Once you’re done, you simply enter your CodePen link in Free Code Camp’s project page and move on to the next exercise. The link is simply used by Free Code Camp’s moderators to check whether you’ve fulfilled the required user stories in order for you to claim your certificate at the end of the curriculum.

If you want feedback on your project’s design and code (and you should, really), you can share it on your various social media accounts. And by adding Free Code Camp’s handle (@freeCodeCamp on Twitter and @freecodecamp on Facebook), you can have your tweet/post shared with the community for added exposure. Another good way to get relevant feedback is to share your project on Free Code Camp’s very active and welcoming forum. See that page for instance as a good example of a camper asking for feedback and getting useful results. As you can see, this is a very good way to obtain feedback from other members in the community, on user interface design and technical parts.

Once you’re done with the first project, you can move on to the second one, which goal is to build a personal portfolio webpage. It’s already a little more complex than the tribute page, but still doesn’t require any JavaScript. Here is my project.

As you can see, my projects are not really polished. I just did the minimum required to make sure I understood the main points of the exercise and then moved on. This way, I made sure not to get bogged down in details and to keep momentum.

During these first 2 projects, many campers give up. These projects are not very complex, but complete newbies can oftentimes get stuck, and if they’re not prepared, it can quickly get very demoralizing.

Now here is the great thing about Free Code Camp: when you are stuck, you are not alone. Thousands of other people have been stuck at the exact same place, and many others are currently stuck with you. So here is Free Code Camp’s recipe to get unstuck: Read-Search-Ask. Once it gets too hard, you can get help on FCC’s live chat room dedicated to those needing help or on their forum. You’ll get helping and encouraging hands for sure, and this will help you carry on.

If you’ve never built a basic static webpage, check out these tutorials and little projects. I’ve seen that even many software students and engineers have never actually built a web page from scratch. So in a few hours, you can get the basics of the structure and design behind web pages.

After getting a first grasp on HTML and CSS, time to move on to JavaScript. In a coming article, I’m going to share how Free Code Camp leads you to build this vital skill and my experience with it.

Originally published at www.samuelpath.com on April 3, 2017.