Now I say HTML, but what I really mean is building websites. HTML, or Hypertext Markup Language, is the bone structure of websites. And CSS is the clothing your website wears. And Javascript is the rollerblades it straps on. And browsers are the rink to skate around. Now that we’re at the roller disco, I think I should abandon this metaphor. But hopefully you get my drift. HTML alone will not make for a pretty website, and if you want to learn the marketable skill of website building, you’re going to need to know a few more things.
People tell me all the time that they want to learn how to code. It’s a lot like learning a new language conceptually, but in practice it’s more so like learning new vocabulary and syntax. Much more approachable! If I showed you a few lines of HTML and CSS, you’d be able to guess where to go from there. It’s in plain English, and it isn’t object-oriented programming requiring any loops, logic, or confusing references.
There's one major thing that will bump you from dropping in line breaks after a paragraph into someone who can build a portfolio website or customize a blog— learning a CMS tool. CMS are Content Management Systems, the most famous of which is probably Wordpress (not necessarily my recommendation). CMS give you the ability to grab website files and automate the process of formatting, indexing, and displaying content. Oftentimes they interact with a database of information for you and can even help you sell products online.
The combination of learning a CMS, knowing basic HTML and CSS, and the patience to design from mobile to desktop will give you enough knowledge to build some really robust looking and functional websites. Here are some tools that will get you started.
1. W3Schools w3schools.com An incredible free resource for web coding languages. I reference it almost every day, since you can’t possibly remember everything when coding a site.
2. Code Academy codecademy.com A good project or some initial repetition is what will make HTML and CSS stick. Once you get down the syntax and basic tags, you’ll never need to reference this again.
3. Zurb Foundation and Bootstrap foundation.zurb.com How do you make things automatically scale down to mobile without creating a whole separate mobile site? Front-end website frameworks like Zurb and Bootstrap catapult your website into an adaptive wonderland. These kits come with gridded layouts, data-equalizers (you’ll thank me later), accordions, tabbed content layouts, styled buttons, and more. The files are simple to transfer to and implement on any platform or host. I wish I could go back in time and tell 2014 me about these, she’d save A LOT of time.
4. JSFiddle jsfiddle.net Test your code in isolated environments. Great for troubleshooting, playing around, or sending someone else snippets of code in a hosted environment.
5. Stack Overflow stackoverflow.com If you have a code related question, front-end or back-end, this is the place to find your answer(s). It has a thriving community of coders creating threads and troubleshooting together.
Bonus Materials If books are more your speed, here are two recommendations for print resources on learning HTML and getting design inspiration.
Comments