How to Make a Website With HTML and CSS

How to Code Your Own Website: The Basics

School is now in session! After a lazy Summer in the sun, there's no time like the present to put your brain back into high gear. Keep those smarts 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.

What's next? Find out how to learn HTML and CSS and what to do with your newfound skills after the jump.

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 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? Stay tuned for more from Teach Yourself Tech.

Latest