Hello World: A Start to Your Journey as a Web Developer
by Seth Lyness
Posted on 2019-10-13 01:00:00
So, you've taken an interest in web development? You're eager to create. You have your own motivation that drives you, whether it be a business endeavor of yours, a hobby, or you are excited about the prospects of becoming a web developer.
You've visited and used multiple different types of sites and conceptually know how you would design the look, feel, and functionality of a website. But there's a problem... you have no idea how to technically implement the website you're envisioning. FRET NOT! I was a freshman in high school when I decided something computer science related was the right path for me. I started, as most do, with web development, and I was overwhelmed with technical jargon. I had no idea what any of it meant; an endless sea of software, programming languages, libraries, and documentation all woven together to form this monstrous collective we call the internet.
So in the spirit of starting fresh, with this pilot entry of The Contriving Coder I'm taking this first post to give the brand new aspiring developer a little sense of direction... Hopefully this will save you a couple weeks of confusion when first trying to put the pieces together to figure out the process of posting your first web page.
HTML, CSS, and JavaScript:
The Three Languages You Need To Care About For Now
I'll cut to the chase and save you some time. This is the trio of languages that makes up the content of the internet and thus this is where you should begin. I know when I started developing I asked questions such as "What's the best programming language?" and "What's the difference between these languages? Aren't they meant to do roughly the same task?".
Let me be clear!...There is no best programming language. In short, each language has its own uses, and some are more dynamic than others and can be applied to more than just one type of task. I'll also make another quick declaration that might come as unexpected to new developers; HTML and CSS aren't really programming languages like JavaScript, Java(yes, they're entirely unrelated languages despite what the names suggest) Python, C, C++, C# and many others.
They don't really express functionality. That is, they may express what a button that you click on is and what it looks like, but they don't actually do anything; i.e. submitting a contact form or "liking" a post on social media. In fact, in HTML the "ML" stands for "Markup Language". A markup language is a language meant for systematically expressing the layout of a document via logically structured tagging. A programming language however (such as JavaScript) is a language capable of expressing detailed programs for the computer to compute and execute.
HTML (HyperText Markup Language) is what describes the layout of what you see on your screen. It's like making a sandwich; you layer separate elements, wrapping and containing content with tags that start and end like so:
For each "opening tag", <>, whether it be for the body of your content, a header, a paragraph, or an image, there is a matching closing tag of the same type. For example,
displays
There are many tags in HTML describing different standard components one expects to find on a webpage. Buttons, images, paragraphs, and many more.
But How do I Make Them Pretty?!
That's Where CSS(Cascading Style Sheets) comes in. This is the language that formats your content and styles all of your text, background, images, borders and all of the other lovely fluff that is appealing to the eye. It's written in a wildly different format than HTML, but is still simple in its own way. There is a bit much to explain with CSS to include it here, but check out my more in depth article explaining the basic syntax of CSS here(coming soon). You might also reference W3Schools, the quintessential resource for every developer, new and experienced. Here you'll find wonderful documentation and examples covering everything form the basics to the more advanced technical stuff of several of the most commonly used languages by web developers. Plus, you can even try out real code yourself and execute it, all in the same tab! Wonderful when you're just starting out.
Displaying Static Text is cool (I Guess) but....
I'd like to actually do something.
Enter JavaScript (usually just shortened to JS). This is the logic behind your site. Everything from online shopping carts, search filters, form submissions, and many more important components of a site are written in JavaScript. Of these three beginning languages I'm overviewing, this is the most important one to master. Yes, HTML and CSS (one of them being a markup language and the other, being a markup language's stylish counterpart) are necessary pre-requisites, but only because you must have content and understand that content first. Obviously you can't manipulate and interact with something you either don't have or don't understand. What I'm getting at here is you don't need to, and really shouldn't, memorize every element, attribute, and value of HTML nor every selector, property, and value of CSS. That's what sites like w3schools are used for; reference. As long as you're comfortable with the syntax of the languages (both reading and writing) and you've taken the time to build a couple web pages for practice, you're fine. Move along and spend your time mastering JS. HTML and CSS only take you so far. Sure you can move on to frameworks such as bootstrap, but learning JS opens the doors to much more than just buttons actually clicking and image galleries sliding (nevermind it's a requirement eventually, no matter where development takes you). The world of JS is so vast that it can't be summed up in layman's terms that I feel beginners would understand at this point. In fact, to attempt to introduce it fully in an introductory article like this might overwhelm and be to one's detriment as a beginner, where as conceptually with HTML and CSS, that's pretty much it.. Be sure to check out my upcoming articles on JavaScript and node.js for a more in depth look of the language, and the frameworks and environments it runs in to fully grasp where this all takes us.
I hope this finds someone new to web development well and you know where to start exploring, but remember to come back here and check out the latest articles as there is always more to learn and more perspective to be gained. Remember the most important tool a developer can have is passion. Passion drives the desire to learn (and later on, to create) and those that want to get anywhere in this field have to constantly learn and evolve. If constant learning isn't part of your lifestyle, this is not the career for you. If you are loving what you learn and you enjoy the challenges and triumphs of web development, you already have what it takes. All you have to do is hone your skills. Now get out there and practice! Until next time my friends,
Happy programming!
Derek 2019-10-13
Very well written