Skip Nav
Memes
We Found the Viral "Dancing Dad" From the Super Bowl, and He's Beyond Amazing
Geek Culture
You Can't Stop, Won't Stop Staring at These Magical Harry Potter GIFs
Tech Tips
The Instagram Hack You've Been Waiting For Is Finally Here

How to Make a Website With HTML and CSS

Coding Your Own Website Is Way Easier Than You Think

Source: Instagram user 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.

Around The Web
How to Unsubscribe From Spam
How to Turn On and Off Twitter's Best Tweets Feature
How to Switch Between Accounts on Instagram
Face Filter App

POPSUGAR, the #1 independent media and technology company for women. Where more than 75 million women go for original, inspirational content that feeds their passions and interests.

Join The Conversation
Latest Technology & Gadgets
X