Coding Your Own Website Is Way Easier Than You Think

By Nicole Nguyen

Updated on 6/27/2014 at 9:30 AM

Instagram | harbrco
Instagram | harbrco

School is now in session! Despite the fact that it's Summer, there's no time like the present to put your brain into high gear. Keep that brain sharp by taking on this new challenge: teaching yourself how to code your own webpage. We've explored the business of starting your own blog, but what about building one from the ground up? In this beginner-friendly rundown, we start with the fundamentals of the web: how it works and the technical resources to bookmark to create your own website using HTML and CSS.

Step One: Know the Basics

How does the World Wide Web work, anyway? Get a grip on how websites go from server to screen.

  • Don't Fear the Internet is the ultimate web resource for non-web designers. Start with "No. 1 Not a Series of Tubes," a demystification of the Internet and its workings, and then work your way up to No. 5, "Don't Fear Starting From Scratch, Part 2: CSS."
  • Still baffled by how a World Wide Web actually works in its literal sense? Watch the enlightening TED talk What Is the Internet, Really? by Andrew Blum about the underwater cables and secret switches that make up the Internet's physical infrastructure.

Step Two: Learn HTML and CSS

HTML, which stands for HyperText Markup Language, is what a web browser like Safari or Chrome reads so that it knows what to display on screen. CSS, or Cascading Style Sheets, defines the look and formatting of that HTML. Both are essential to coding your own website, and here's how to get acquainted with them.

  • Codecademy is an interactive website that teaches you how to program websites and tracks your progress in a fun, easy-to-use format. The eight-part Web Fundamentals lesson is a great introduction to the building blocks of HTML and CSS.
  • Webmonkey, an online web development and design guide, walks you through the creation of a basic HTML document.

Step Three: Test Your Knowledge

Make sure you understand the basics with these online quizzes.

  • W3 Schools offers written tutorials on every web development language there is to know. Take its HTML Quiz, and then try your hand at the CSS Quiz to see if you know your stuff.

Step Four: Fly Solo

Now that you're feeling comfortable with the fundamentals of HTML and CSS, it's time to put on your wings and fly solo! Use the skills you've just acquired and start your own webpage from scratch.

  • JSFiddle is an online editor that previews code as it's written. Type your code into the "HTML" box on the left, click the "Run" button up top, and see a preview of your new site in the bottom right "Result" box.
  • Download a text editor, like TextWrangler (free), a desktop application made specifically for web development. It's where you'll keep practicing code skills and, eventually, how you'll master HTML and CSS!

Ready to take your web-development skills to the next level? Consider a coding camp to continue your education.