Skip Nav
Geek Culture
Break the Internet With These Clever Costumes
Harry Potter
Bow Down, Witches, These Are the Best Harry Potter Costumes at LeakyCon So Far
Geek Culture
49 Free Templates For the Coolest Jack-o'-Lantern on the Block

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
Join The Conversation
How to Watch Orionid Meteor Shower
How Do I Fix My iPhone 7 Home Button?
What Is the Facebook Cloning Scam?
Export Gmail Emails
How to Find Out If You're Registered to Vote
iOS 10 Tips
3D Touch Tips

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.

From Our Partners
Latest Technology & Gadgets
All the Latest From Ryan Reynolds