Becoming a Web Developer

8 min November 23, 2017

When I was starting with web development, I had completely no idea, what to learn, where should I start, which technologies should I use and so on. Now, when I know at least that there are more tags then head and body and notepad is not an IDE, I decided to wrote this "tourist guide" that could help others with the same problem.

Where should I learn?

Bellow is the list of sources I have been using for learning

Where should I start?

From scratch. Somebody could say "Go ahead, learn frameworks and already-made solutions immediately, it saves time!" but if you don't know the basics, technology used behind these tools and problematic that goes side by side with that all you will probably not be able to understand to the advantages / disadvantages when using it and what more matters, you will probably not be able to fix issues caused by frameworks or by already-made solutions.

Starter pack

When I said start from scratch, I meant totally. Download some IDE from the list bellow, create your first index.html, add "Hello World!" into the documents body and explore the browser console. Try to change text colors, background and design & style some simple layout. Create another files and connect them via link tags. Add some javascript with click / mouseover events calling javascript alert function, export the script and style into external files and link them to the document properly. I think that is a solid "workout" for the beginning.

Intermediate pack

Static pages are great when you don't want to create nothing complicated. Imagine you want to have a text like "Hello {DayName}". It wouldn't be wise to change it manually each day and therefore advanced technologies comes to the scene. Install XAMPP (or other server tools), create your first index.php, add php code with array containing day names, iterate over it using cycles, add some conditions to avoid "Hello Monday" (because nobody says that), move the array into the database and get it out through SQL called from PHP. Download some large image with the sizes 1920x1080, optimize this large beast via Tiny Png, create webp image format and load it through a source element in a picture tag. Cherry on a cake for "Back End" could be a code separated into single methods (with appropriate visibility) wrapped in the PHP class. For "Front End" it could be lazy loaded images and data from database received through ajax request 👌.

Advanced pack

If you have wrote some code already you probably found out that it is not so easy to write a "good" code. That is the right time to look for the production ready, tested and useful tools, standards, services and so on. These tools (for example frameworks for php, js and css ) can be installed via package managers. If you plan to create some blog for example, you will probably want to know, if there are some visitors (SEO, analytics tools). Simplifying your work is also very important. It saves time and mostly nerves so you will be probably looking for preprocessors and task tools. Loading CSS and JS must be fast and well optimized and assets bundlers can do it for you. "You have been hacked 🤘!" is not the text you want to see on the main page of your website, so you should learn something about security.

What to learn next

There is always a room for improvement. I don't know exactly where to put the technologies and tools below so I put them into this extra section in case you are thinking what to learn next