Imagine yourself in this context: you’ve just started to learn some programming and it is your third day. Your head is full of new concepts such as tags, attributes, containers and contents and, at least for now, they don’t seem to you to be fully related to each other. To make matters worse, you’ll have to deliver your first project (which consists of building a web page) in three weeks and you don’t have a clue about where to start working.
In light of the above, it seems reasonable to start by creating both html and css files and begin to write some code. You find yourself trying to give structure, to apply styles, to connect those concepts you thought you had learned and, as the time goes by, there comes a moment when you realize that you feel overloaded.
It may be the case that, if you find yourself in this position, you put the cart before the horse. You are facing the whole project and you didn’t stop to think that, maybe, if you split up the work into small tasks it will be easier to address.
It is a good idea to make a quick previous sketch or diagram of the whole project in order to split it into small tasks.
Perhaps you will have some previous indications to be able to do the project and it’s helpful to have an idea in mind of the end result.
We suggest that you take a blank page and turn that image of your head into a visual structure of the code that you are going to write. What has been a sketch of a lifetime.
We have started here:
It is likely that your initial sketch has failures and that when you start writing code you realize that there are parts that don’t make sense. That’s the point.
The idea is to face the code in a graphic way that allows you to understand the structure that you have to do. This makes it easier to go into detailing each part of the content without feeling that what you do is chaotic.
Each part of your sketch will correspond to labels, sections, etc. When you are clear in your diagram (what goes into what, etc.) you can put the technical name for each item and begin writing code more easily:
Throughout this process you will likely change many details that you sketched out in the beginning. Relax, this is to be expected. Coding is an iterative process and with each step, you will grow and improve in your abilities. The goal of our article is to encourage you to just get started, face that blank page with confidence!