Web Dev Baby Steps
#webdev#javascript#design#tech
<!-- wp:paragraph -->
<p>Welcome lovely humans! I have had a lot of questions from people asking me about how to start their journey of becoming a web developer. So I managed to pull up a map for ya'll to follow. Do let me know if you find this useful or also the other way around. Would love to have some critics helping me along the way!</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>From here on out, I'll try to present the best way, I believe, that one could start as a web developer. At the end of this article, you will have enough shit to call your self a web-designer and you'll able to pull off some nice static websites. So put those remaining brain cells together so we can start working here.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":4} -->
<h2>Front-end</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This is the front face of the app (mobile-app, web-app, or whatever for that matter) that the user interacts with. It all starts with making the design/wireframe/prototype of the app. Now don't be confused here, the website that you see in the front is a Graphical User Interface(GUI). And this GUI is sitting over a backend architecture. This is just a fancy way of saying that the things you interact with on the app, like buttons and stuff, trigger certain tasks to run behind the screen and present the output right in front of you.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":2333,"width":495,"height":293,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://holdmypotion.tech/wp-content/uploads/2020/06/icerberg.png" alt="" class="wp-image-2333" width="495" height="293"/><figcaption>Pardon the cliché image!</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Just to be clear, I am not comparing the complexity of front-end with back-end here. This image is just representing that front-end developers curate the part of the app that is visible to users. Hence, designing a beautiful UI (User Interface) and providing the best UX (User Experience) is something to consider.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Using Design software like Figma, Sketch, Adobe XD, etc, wireframes are created. Like the one below. FYI, this is not a real webpage but just a couple of rectangles and text blocks.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":2312,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://holdmypotion.tech/wp-content/uploads/2020/06/2-2-1024x569.png" alt="" class="wp-image-2312"/><figcaption>Wireframe</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Now let's talk about turning designs into real webpages. </p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":4} -->
<h4>What is What. And What you Need!</h4>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>HTML creates a barebone structure of the website. Just like a skeleton. And, CSS is used to align that skeleton and also to put skin + makeup on it. CSS is really powerful. Humblebrag: The portfolio website on <a href="https://holdmypotion.tech/about/">https://holdmypotion.tech/about/</a> is just made on HTML and CSS. Not to forget that I designed before I wrote any HTML or CSS. To be honest, without creating a wireframe, writing CSS is like tormenting yourself. Never go down that shithole, if the website is for official/production purposes.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":2336,"sizeSlug":"full"} -->
<figure class="wp-block-image size-full"><img src="https://holdmypotion.tech/wp-content/uploads/2020/06/Main-Page-min.png" alt="" class="wp-image-2336"/><figcaption>Again, Just rectangles and text blocks.<br>Designed on Figma </figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><strong>Resources</strong></p>
<!-- /wp:paragraph -->
<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td>HTML</td><td><a href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G">https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G</a></td><td><a href="https://www.w3schools.com/html/">https://www.w3schools.com/html/</a></td></tr><tr><td>CSS</td><td><a href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G">https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G</a></td><td><a href="https://www.w3schools.com/css/">https://www.w3schools.com/css/</a></td></tr><tr><td>CSS Layout Models</td><td><a href="https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG">https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG</a></td><td><a href="https://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY">https://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY</a></td></tr><tr><td>CSS Frameworks</td><td><a href="https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw">https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw</a></td><td><a href="https://www.youtube.com/watch?v=QAgrHLtG1Yk&list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv">https://www.youtube.com/watch?v=QAgrHLtG1Yk&list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv</a></td></tr><tr><td>Design</td><td><a href="https://www.udemy.com/course/freelance-web-design-from-design-to-development-to-making-money/">https://www.udemy.com/course/freelance-web-design-from-design-to-development-to-making-money/</a></td><td><a href="https://www.youtube.com/playlist?list=PLaqZxUtXIt0wgeFxgBNlFklt5Si-00sm-">https://www.youtube.com/playlist?list=PLaqZxUtXIt0wgeFxgBNlFklt5Si-00sm-</a></td></tr></tbody></table><figcaption>Resources</figcaption></figure>
<!-- /wp:table -->
<!-- wp:paragraph -->
<p>Remember!! You don't need to muggle up anything! It is all intuitive and comes as you keep working with it. Anyway, whenever you are stuck, Google has almost all the answers. Ta-da!! </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Just a little heads-up, the design course on Udemy isn't free, but by far the best that I have ever gone through. It is a three-part course that teaches you about, Figma, Webflow, and freelancing as a web designer. BTW, I forgot to mention about CSS frameworks. To my mind, they are just already written CSS, that you can use to style your HTML components (tags or whatever). I believe that people mostly use CSS Frameworks to align-items, but you can also use them for designing. It is just like using ready-made schezwan sauce to cook your fried rice rather than creating your own pathetic one. Now, as far as their use case is concerned, I don't use them, yet, (because I am not primarily a front-end developer) but almost everyone in this industry, according to my observation, does. You can also work without them if you know some designing (like I do). But I still advise you to check them out!</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>New Updates (July 23): <strong>Tailwind CSS is awesome</strong>!!!!!!!!!!!!!!!!!!!!!!!!!<br>You've got to check it out, and I highly highly recommend The Net Ninja YT course.<br>Again, I absolutely love it!!</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":4} -->
<h2>Route To Take</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Here you go!</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":2314,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://holdmypotion.tech/wp-content/uploads/2020/06/export-and-del.png" alt="" class="wp-image-2314"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>I know, I know! A lot of web developers aren't involved in designing, and me advising you to take that after the basics of HTML and CSS might piss certain people off. And I respect that, but also I quite frankly don't give a shit. I prefer this way because down the road you become a lot more self-sufficient. And if you are someone who is fascinated by the freelance industry, you'll have a lot more options to monetize your skills.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>And anyway, If you learn designing after learning a bit of HTML and CSS. You'll be able to understand the essence of basic HTML structure and also the nuances of writing good CSS. Trust me on this, I am speaking from personal experience.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Oh and I almost forgot! Aligning items on the webpage sucks. So to make your lives easy, cozy, comfortable, and warm, CSS has certain layout models. Eg: Flexbox, CSS Grid, and Idk if there are more. TBH, I have never used CSS grid myself because Flexbox works fine for me! Remember! Your life is ruined without these layout models.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Extra Flexbox resources: <a href="https://flexboxfroggy.com/">https://flexboxfroggy.com</a>/ , <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":4} -->
<h2>Creating some on your own</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Before we start talking about making something on your own, for your own use. Let me introduce to you a nasty little concept. The <strong>Mobile-first approach</strong>. It is a very common and the most effective way of designing a responsive website. This makes everything so quick and efficient, also reducing the lines of code you have to write in CSS. So you might want to check it out after you are comfortable in designing and building. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>"The <strong>mobile</strong>-<strong>first</strong> approach is exactly as it sounds: <strong>designing</strong> for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive <strong>design</strong>. ... It is the ideology that <strong>mobile design</strong>, as the hardest, should be done <strong>first</strong>"</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>I would suggest that you try to make your own static website (Websites with just HTML, CSS, JavaScript, and Images). One obvious option is to create a portfolio website for all the projects you have completed en route. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Now that you are confident enough (nobody is ever), you can test your skills in the real market and learn/earn along the way. Doesn't that sound nice?</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Attention!!! </strong>The Udemy Designing course that I was earlier alluding to, has enough, literally enough, information to get you started with freelancing. That is why I highly, highly recommend going for it.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":4} -->
<h2>Further Moves</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>As of now, you are ready to make Landing pages, Portfolio websites, and basically any website that doesn't require a CMS(Content Management System) of any sort. Further from here, here are a couple more things that you can do</p>
<!-- /wp:paragraph -->
<!-- wp:list -->
<ul><li>WordPress: It is a way of creating websites with or without coding. Basically WordPress provides an already built CMS and, drag and drop options to create front-end of the websites. Just a couple of tutorials on YouTube and you will be all set to create websites on WordPress. I would recommend this to someone who, 1. wants to earn as soon as possible (good freelance opportunities), 2. don't want to learn programming just yet.</li><li>JavaScript: This is probably the most used language throughout websites both on front-end and back-end. It is a programming language and hence it won't be as easy as HTML and CSS. But on the flip side, it would be 10 times more interesting.</li></ul>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p>Bombshell: This is not 2005, and hence front-end doesn't end here. There are big ass JS Frameworks that are primarily used to create the "view" part of the website. You will learn about this as you go deep into JavaScript and back-end development. It is easy and fun as f***.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"level":4} -->
<h2>JavaScript</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>I don't want to drag this single article too long. So I will just quickly share a course that I found extremely useful.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Poke → I would recommend that you take up a course that has a well-set curriculum to it because this will lay the foundation of understanding of programming languages in your brain. All the programming languages have almost the same fundamentals and differ only in some ways.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Course:</p>
<!-- /wp:paragraph -->
<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td><a href="https://www.udemy.com/share/101WeYBkYfclpWQHQ=/">https://www.udemy.com/share/101WeYBkYfclpWQHQ=/</a></td></tr></tbody></table></figure>
<!-- /wp:table -->
<!-- wp:heading {"level":4} -->
<h2>Conclusion</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>You are now capable of designing and building websites for yourself and for the world. This article introduced a way for you to start as a web designer and then later tap into developing. I wanted to make this journey fun and productive for you and hence I suggested a way that can get your pockets heavy asap.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Peace✌</p>
<!-- /wp:paragraph -->
Discussion