A Journey to Become a Web Developer - Learning to Code
Tags: webdev, career
Published: 2020-09-08 05:57:24

<!-- wp:paragraph -->
<p>Welcome to the second instalment of my blog series: A Journey to Become a Web Developer.&nbsp; In the first post, I gave you an overview of my journey so far.&nbsp; In this post, I would like to talk about the first steps in that journey: Learning to Code.&nbsp; I will talk a bit about how I did it, the mistakes I made in the early stages and my recommendations and tips I would give to anyone about to start this journey to become a web developer.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Have a goal to work towards</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You will know from my&nbsp;<a href="https://blog.mikepage.dev/the-begining-a-journey-to-become-a-web-developer" target="_blank" rel="noreferrer noopener">last post</a>&nbsp;that I started investigating web development and very quickly got distracted by game development.&nbsp; Although I had a goal, it wasn't strong enough and there was no deadline. &nbsp;On the other hand, when I was informed that I would be taking on the intranet at work, I had four months to learn as much as I could. &nbsp;This gave me the drive and determination. &nbsp;So, my first tip/recommendation:&nbsp;<strong><em>set yourself a goal and tell someone that will hold you accountable</em></strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>What language should I start with?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As you know I started with PHP because this is what my work's intranet was written in. &nbsp;Although this is a good starting point, I would not recommend it if you would like to be a ‘back-end’ developer.&nbsp; When I was given the source code and looked at it in detail for the first time, I realised that I needed to know more about HTML and CSS.&nbsp; There were HTML tags that I did not recognise from when I first looked at HTML way back at the beginning of my journey.&nbsp; So, my second tip/recommendation:&nbsp;<strong><em>learn HTML and CSS first.</em></strong>&nbsp; HTML and CSS are the building blocks of the web. You can develop all sorts of static websites with them.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3> Where to learn HTML and CSS?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Everyone has their own style of learning and, with the internet, you are not short of content. &nbsp;If you like reading, there are books, blogs and documentation. &nbsp;If you are like me and learn better by watching, there are many options on places like YouTube and Udemy.&nbsp; It can be a bit confusing, even intimidating, looking for that first tutorial because of the sheer amount of content out there. &nbsp;So let me try and start you off with the resources I started with.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When I first started looking for video tutorials, I stumbled upon Brad Traversy's&nbsp;YouTube channel&nbsp;<a href="https://www.youtube.com/user/TechGuyWeb">Traversy Media</a>.&nbsp;I found that when watching the videos I instantly understood the content. &nbsp;The way things were explained just clicked. &nbsp;I feel that this is very important when looking for tutorials. &nbsp;Brad has crash courses for&nbsp;<a href="https://www.youtube.com/watch?v=UB1O30fR-EE&amp;list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&amp;index=2&amp;t=559s">HTML&nbsp;</a>and&nbsp;<a href="https://www.youtube.com/watch?v=yfoY53QXEnI&amp;list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&amp;index=3&amp;t=0s">CSS</a>. &nbsp;These are really good and free, but if you would like a bit more in your learning, I would recommend his Udermy course:&nbsp;<a href="https://www.udemy.com/course/modern-html-css-from-the-beginning/" target="_blank" rel="noreferrer noopener">Modern HTML &amp; CSS From The Beginning (Including Sass)</a>. &nbsp;Not only does this course go deeper than just the basics, but there are also projects to help put it all into the context of real-world examples. &nbsp;A resource that I use for referencing and reminders when working on a project is&nbsp;<a href="https://www.w3schools.com/" target="_blank" rel="noreferrer noopener">w3schools</a>. &nbsp;This is an amazing site, not just for HTML and CSS. &nbsp;I strongly recommend you check it out.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There many other good resources available. &nbsp;Find what works for you.&nbsp; Here are a couple of other YouTube channels I have used recently:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://www.youtube.com/c/DesignCourse">Design Course</a> this channel is amazing for design concepts. &nbsp;I'm not naturally a designer so I have found this channel really helpful.</li><li><a href="https://www.youtube.com/kepowob">Kevin Powell</a> has some really helpful short videos targeting small topics mainly to do with CSS.</li><li><a href="https://www.freecodecamp.org/">Free Code Camp</a> &nbsp;I have only briefly browsed their&nbsp;<a href="https://www.youtube.com/c/Freecodecamp" target="_blank" rel="noreferrer noopener">YouTube&nbsp;</a>videos, but have seen a lot of people recommending them.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Tutorial Hell</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Tutorial Hell is an expression that developers use to describe when you are stuck just doing tutorial after tutorial. &nbsp;So I have a challenge for you to help avoid this situation. Once you have completed the basics in HTML and CSS, and this is my third tip/recommendation:&nbsp;<strong><em>try building a website for a company.</em></strong>&nbsp;&nbsp;You can pick the company. &nbsp;It could be real or fiction. &nbsp;Pick an industry you know a bit about. &nbsp;Give it the following pages:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Home</li><li>About</li><li>Contact </li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If you decide to put a contact form on this page, don't worry about making it work, just make it look good.&nbsp; This is an exercise just to practice your HTLM and CSS skills. &nbsp;Once you have done this, I would love to see what you come up with so please do share in the comments below.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Whats next?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>So you have got to grips with HTML and CSS and you have completed your first private project. &nbsp;My fourth tip/recommendation:&nbsp;<strong><em>learn&nbsp;<a href="https://git-scm.com/" target="_blank" rel="noreferrer noopener">Git</a>.</em></strong>&nbsp;&nbsp;Git is a free, open-source version control system. &nbsp;I won't go into GIT too much in this post but will explore why I recommend learning it early on in one of my next posts. &nbsp;But for now, here is a link to a good&nbsp;<a href="https://eur02.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.proofpoint.com%2Fv2%2Furl%3Fu%3Dhttps-3A__www.youtube.com_watch-3Fv-3DSWYqp7iY-5FTc%26d%3DDwMFAw%26c%3D1lo6Mxv_Z4zLQLj5WyMMv_HwCWx5qonNBFZ36W6QWvM%26r%3DxLWstSSlDl5jmUOTB-3oqXFyA0NlFvyCrU3jOA-7QNE%26m%3DyEdmDas2TiUr19nLpfS0XTIsufor0JwsXie7_DyL2GM%26s%3Dw07-hEhdnj08sJLUwxTuWuySS0iHrGS-UK14eCSBLr8%26e%3D&amp;data=02%7C01%7C%7C7e74d77c64b047d57bf008d84cd3086e%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637343816547476140&amp;sdata=SCfgtoUR22LCawXcBJWw0IlxiBKG%2BXPJQwqVt01Jy3U%3D&amp;reserved=0" target="_blank" rel="noreferrer noopener">crash </a><a href="https://www.youtube.com/watch?v=SWYqp7iY_Tc" target="_blank" rel="noreferrer noopener">course&nbsp;</a>to get you started.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So to summerise, </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Set yourself a goal and tell a family member or friend who will help you and hold you accountable</li><li>Start with HTML and CSS first</li><li>Once you finish the basics build a small website with three pages and share it with us</li><li>Then have a look at GIT</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Good luck and have fun. Don't forget you can flow me on Twitter @MikePageDev. Until next time - keep coding!</p>
<!-- /wp:paragraph -->