The Modern Web – For Beginners

The Modern Web can be a scary place for new web developers. However, those that are willing to take the time to build a solid foundation will go on to lead much more prosperous careers in web development. This is in opposition to those that jump in quickly not fully knowing what they’re doing and end up building a project that looks like a plate of spaghetti, Which ultimately causes coding to suddenly become too hard, and they fizzle out before they’ve ever gotten started. Don’t be one of those people that fizzle out. Make sure that you burn as bright as the sun, or if you’re wanting to be a developer, as bright as a full moon (you’ll get this later if you don’t now). In this post, I want to introduce you to a few tools and places that you can go to learn about them to get you started.

Back in the 90’s, a web developer was considered a guru if he could just make a web page work fully (**Note: In their defense, the main browser they were trying to make their pages run on was Internet Explorer. Two decades later most developers still haven’t figured out how to make their web pages run on IE correctly). However, these days preteens can build simple web pages over a weekend. The truth is just being able to build a basic page that has a few button clicks isn’t enough anymore. You need to be able to understand high level concepts like front-end frameworks (BackboneJS, AngularJS, EmberJS, ReactJS, etc.) and the tools that they’re built on (jQuery, jQueryUI, Twitter Bootstrap, UnderscoreJS, Handlebars, etc.). What’s even more intimidating is that those are just the things that I could think of off the top of my head while I’m writing. Another truth is the age old saying that “you can’t run before you can walk.”

Before you run off and start trying to hack something together, please understand that this is a process. There isn’t a web page out there that you can sit down and read and in 30 minutes you’ll be an expert and ready to go. You have got to take the time to learn the basics and then expand from there.

What are these basic concepts that I keep speaking of? In my mind there are 3 things that you must start with: HTML, CSS, and Javascript. At the time of this writing the globally accepted standard for these technologies are HTML5, CSS3, and Javascript ES5 (ES6 is out, but no minimum browser requirements really support it. You have to transpile ES6 to ES5 using Babel).

HTML stands for Hypertext Markup Language. If you do a google search for HTML, this is what you get, “a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.” What the heck does that mean? Basically you have tags, such as <div> and <span> that are used to denote different sections of your web pages that you want to create. One of my favorite ways to illustrate this is go download this plugin for your browser called Web Developer (Please tell me your using Chrome or at a minimum Firefox. If not, then go fix that NOW!). If you’re using Chrome, then once installed this will put a little gear icon in your top right corner. Click on that and then click “Outline Block Level Elements.” You should see a number of boxes appear around sections of your web page. That’s because these are different sections of the web page which have been denoted by using HTML tags. When I learned how to use HTML about a decade ago I used the timeless website w3Schools.com, and took their HTML tutorial. It’s totally free and is definitely good enough to get you up and going. However, if you can swing it I would definitely get a subscription to PluralSight.com. PluralSight is one of the best sites out there for learning. At a minimum, I try to complete 40-50 hours of training on this site each year.

Next is CSS, which stands for Cascading Style Sheets. If you do a google search for CSS this is what you get, “used by web pages to help keep information in the proper display format. CSS files can help define font, size, color, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website.” Once again, what does that mean? CSS is used in conjunction with your HTML. CSS is what makes web pages pretty. So, HTML provides the structure and CSS creates the look and feel of the web page. As a tip from someone that’s been writing CSS for a little over a decade at this point, don’t be discouraged if you find CSS frustrating and impossible at first. While you can go through the CSS tutorial on w3schools.com, the only way to really learn CSS is to use it. I know that’s the case with practically everything. However, I’m not sure I’ve found anything to this point that it was more true about than CSS. Getting things to look exactly how you want it to is hard. Luckily these days there are tools that have been developed to help us speed up this process. My advice would be to first take the CSS tutorial, and then learn about Twitter Bootstrap and how to properly use it. A few final tips for once you get going:

• Don’t ever try to write a CSS file from scratch. Just do yourself a favor and go ahead and just use Bootstrap as your starting point. Or if you find another CSS library that you prefer then go with that. I’m speaking from experience here. I once wrote a CSS file for a website that I started from scratch. I think when I was done the file was around 6000 lines long, a mess, and very brittle. I’ve never done that again.
• The second tip that I would give is that once you find the CSS library that you would like to use, don’t ever go in an change those CSS files. Always create a main.css and overwrite the classes and the attributes on those classes along with any new custom CSS that you write in that main.css. Why should you do this you ask? Well, at some point Bootstrap (or whatever you end up using) will likely come out with a new version. I’m sure you’ll want to upgrade to that new version. However, if you’ve been going in and editing all of the CSS in the files that came with the library, then if you upgrade you’ll overwrite all of those changes. Also if you do overwrite your changes accidentally then you have no way of knowing what all you had changed other than to redo all of that development. The lesson here is work smarter, not harder.
• The final tip that I would give is that in conjunction with using something like Bootstrap, go buy a template from someone like ThemeForest.net. ThemeForest has over 20K templates for all different kinds of sites that have been developed by some of the most talented teams of designers from all over. When you factor in the countless hours that buying a theme from this site will save you it only makes sense. Trust me here. Just buy a template. I can assure you from experience that ThemeForest is your friend. This is where I always go to buy my templates.

Finally, we have Javascript. Following the same format, let’s define Javascript. If you google Javascript you get, “an object-oriented computer programming language commonly used to create interactive effects within web browsers.” In my mind, that’s a decent base definition. Javascript is one of those tools that if you learn well and you learn how to program in it correctly the sky is the limit. Javascript is the base to which so much of the modern web and app development is based on. To get your feet wet, I would once again suggest the Javascript tutorial at w3schools.com. This was the first tutorial that I took to learn Javascript. I wouldn’t say it’s the best Javascript tutorial that you’ll ever find, but it is a very good starting place. From there I would move to Pluralsight. If you’re going to burn the trial that Pluralsight offers Javascript would be something good to use it for. Because once you grasp the full potential that it offers you, a whole new world will be unlocked to you. Past going through tutorials for Javascript the best advice that I can give you is to dive in and start coding. You will learn far more by just starting that reading 3 more tutorials. The hardest thing to learn and know when coding is what you don’t know. In my opinion, the only way to overcome that hurdle is to start coding and doing.

In closing, this article introduced three core technologies in web programming today, HTML, CSS, and Javascript, and pointed you in a direction to start learning more about each of them. The fact is, Web Programming isn’t easy and it’s not for the faint of heart. To truly become amazing at it you have to keep working, keep learning, and keep pushing yourself and your boundaries. I truly believe that to get something right you have to get it wrong first. So, why not hurry up and get the wrong out of the way to get to the right. The fear of failure is the greatest fear we will ever overcome in life. The day an individual overcomes that fear is the day they start truly living.