When most people fantasize about the idea of starting a web development hobby (or career) they get eventually frustrated. Hard. I will change that destiny for you in 5 minutes. Right now. I started my developing career 3 years ago, I had at first to swallow frustration through my innards in my journey. I didn’t know what to do, or what to stick to. Eventually, I was lucky enough to get taught by professionals so finally, I found out what I was missing. Now, after almost 1000+ hours of coding, I implore you to please do this: 1. Get familiar and start using Git and GitHub. This is the single most important step. A version control system will give all the work you do form, organization, and a way to go “back in time” in case you mess up your code. It will also provide a sense of joyful accomplishment and organization for your achieved progress. THIS will put you on the same playing level of the pros. Starting now, GitHub will be your shop window, your gallery, and your portfolio, so you better make sure it looks professional. And every great project includes a great file: readme https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project Also, if you are an (aspiring) developer of any kind I suggest you learn the real git command line workflow in the terminal, not a graphical front end. You only need about 10 commands: git clone, git add, git commit, git push, git pull, git branch, git checkout, git status, git merge and git history. Learning it takes about 2 hours (or less) of your time because it is super easy. Also, since your local git connects to the remote, GitHub will take care of the graphic stuff (like checking your commit history). Having the ability to master git (the real command line git), in the software industry as a whole that once you get used to it could open you lots doors and it is also a big-time saver… In exchange for 2 hours of your time. is a very well regarded skill This tutorial takes less than 2 hours, it’s one of the best and also teaches you GitHub. Do it. You will thank me later: 2. Set up your work environment. You will need a text editor. One that works for coding. Examples are Atom, Sublime Text, and VsCode. I’ll recommend and focus on the latter for this guide. Here is a link to get started: https://code.visualstudio.com/docs#vscode Now that you are familiar with VsCode, you can start playing with extensions. A lot of them are super useful and will help a lot, but DON’T overdo it and install them like crazy. When your code gets big you (and your machine depending on your configuration) will pay the price with big slowdowns. I can tell you that because I’ve been there and suffered the consequences already so you don’t have to get the same war scars. You’ve been warned. 3. Start with HTML. The last 2 steps were the foundation, the . If you did them, you are now on track. entrée Now comes the thing that you came for. The juicy and flavorful meat. The code. HTML is the “what” of your page. It stands for and the whole web is built with it. You don’t believe me? Ok. Press now (on desktop Chrome and Firefox). Great, now that you believe me we can continue. Hypertext Markup Language F12 HTML is a stacked list of elements that could be text, images, forms, videos, you name it. These said elements are laid out with like <section>, <article>, <aside> and <form>. tags As you can notice, those are meaningful names. You need to learn to use them in a way that is organized and semantic: https://www.w3schools.com/html/html5_semantic_elements.asp I can’t stress this enough: When learning and practicing HTML, please use semantic tags in your code, so the browsers understand what you are trying to present. You can get familiar and start using HTML in a day (or maybe just a few hours). This is a good place to start (you can just do the free part for now so you can consider their paid content later): https://www.codecademy.com/learn/learn-html Also the Lessons 2, 8, 9 and 10 of the brilliant Shay Howe book: https://learn.shayhowe.com/html-css/getting-to-know-html/ Get used to reading. Don’t procrastinate. Don’t skip steps. Do it . now 4. Follow up with CSS Now that you are familiar with HTML: the “what”, you will follow up with CSS: The “how”. You see, HTML by itself gives you as I said a stacked list of stacked elements, like a list. That is why a lot of HTML documents are named . Makes sense right? “index.html” Now you need to learn how to style each of those elements, and for that, you need another file with a extension. .css CSS stands for It is easy to understand, but not to master just like anything worthwhile in life. It is a very powerful language but with power comes responsibility so there is a lot to learn here. Cascading Style Sheets. Complete this tutorial (again, if you don’t have the budget you can do the free steps, or if you can go ahead and subscribe for the complete course): https://www.codecademy.com/learn/learn-css Then, continue with the Shay Howe book (lesson 3 up to lesson 7): https://learn.shayhowe.com/html-css/getting-to-know-css/ After that, you need to learn CSS Flexbox. You will love it. Put special attention to this topic, because it makes positioning elements a lot easier: https://www.w3schools.com/csS/css3_flexbox.asp Mastering this one will be your first great achievement, but if you are this far already there is no turning back. This will need some discipline and commitment. Ohh and of course reading. You will need a schedule for every day. I know how I can convince you: Trust me, your efforts will bring food to your table. After getting familiar with this step and HTML, money can be made for the first time. 5. Now DO something. And do some more Congratulations on getting this far. Hat tip to you. Now that you are familiar with Git and GitHub, you have a nice work environment and learned the basics of HTML and CSS, you need to start doing projects. I’ll tell you what to do: Choose a webpage that you like, but one that is not very complex. One prime example would be . Now, using what you have learned, go ahead and do the mentioned page on your own. Google.com You need to imitate the same layout, background, colors, and forms. Skip any animations for now. Tip: Use F12 in the browser to view the code of the page if you get stuck. Write yours. DON’T COPY THE CODE. Start by creating a new repository for the project on GitHub and cloning it to your local Git. While doing this project, be sure to commit often, write meaningful Git commit messages, and use semantic HTML. While you are at it, follow what is written in these 2 guides: https://www.w3schools.com/html/html5_syntax.asp https://speckyboy.com/good-bad-css-practices/ After finished, use this validator for your HTML file and correct all the mistakes it finds: https://validator.w3.org/ Be sure to build a professional and descriptive readme file in your GitHub repository. Consider all the reading you did in the last steps now as reference material. Are you finished? Completed all the steps? You did it! You completed your first webpage! This is a lifetime achievement! Final considerations. You will need to do some more projects (imitating more complex pages, increasing the difficulty) to get actually good. This is something that you learn by doing it. If you find a coding partner, things get a lot easier: One person writes the code while explaining it while de other listens and helps. Then after every feature, you switch roles. This is super powerful and will help you out a lot! Smash procrastination: Set a daily schedule. A coding partner helps a lot with this but if you can’t find one, there is this: https://www.focusmate.com Focusmate is a community built to achieve goals by having a partner on camera while you work. That way you beat procrastination. This was only a head start with Git, VsCode, HTML, and CSS. If you can get into an organized, professional program like the better. Microverse That way you will have a medium-term plan, learn a lot more topics, and even earn a certificate. They have taught me lots of valuable things, not just technical but also professional skills like accountability and be a great teammate. For that, I’m really grateful to them. Try to get into the program it’s really worth it: www.microverse.org This activity brought a lot of meaning to my life and can do wonders for yours too. Don’t procrastinate, be disciplined, set a schedule. Get a coding partner. Complete projects. Get into a program like Microverse. Start learning and doing. You won’t regret. Do start now. Don’t ever stop. Do it. Now! Did you find this guide helpful or inspirational? Do you have any more tips for beginner web developers? Please tell me in the comments below.
