This is the first post in a series that will challenge YOU to learn two foundational web development languages. And the best way to learn to code, is to code! So, code as you learn, and learn as you code! Each of these posts will include a brief lesson and a challenge. Make sure to actually complete the challenge and by the end of this series you’ll be able to create your own websites locally on your own computer!
What is HTML?
HTML is the the foundational language for the internet. What you’re looking at right now, this website, is the result of your web browser reading and interpreting HTML.
HTML stands for Hypertext Markup Language and it’s been the language of the internet since practically the beginning. In fact, the creator of the world wide web, Tim Berners-Lee, developed this language! That’s cool, but what is HTML, what does it do? Well, we can break down the term. Hypertext is a fancy word for text that connects text to other text and markup is a word for the preparation of text for presentation. So, all together, HTML is a language that prepares text for presentation on the internet and connects some of that text to other documents on the internet! Simply, HTML provides the structure for the content of a web page.
What is CSS?
HTML creates the structure and defines the content for a web page, but, if we don’t tell the web browser anything else, it’s not going to look very appealing. So, we have to add another document that will tell your browser how to display all of the different page elements, fun things like: what font to use, how big the text should be, what kind of background color you want, and where on the page it should be!
CSS is the language that solves this problem. CSS stands for Cascading Style Sheets. It is a collection of rules that tell the browser how to display different types of HTML elements. What’s crazy to me, is that HTML web pages were around for about four years before CSS was implemented. The language was first proposed in 1994 by a man named HÃ¥kon Wium Lie (if you know how to pronounce that, you deserve a medal). So for four years, websites were just white background with black text, left-aligned… very very bland. That was before the internet that we think of today. Then, the internet was just for researchers and raw sharing of information. But, now we use the internet for all sorts of things.
Using HTML and CSS together, you can create any design that you want to. Together these two languages are powerful design tools if you learn how to wield them.
The Challenge
Even though this is just an introductory lesson, there is still a challenge! You don’t even need to leave this page to do this! On a desktop computer, right-click this paragraph! Click on “Inspect Element” and notice the window that pops up.
Do you see it? Great! Challenge complete! This is the Developer Tools for the website that you’re looking at. And inside you can see the HTML and CSS that your browser is reading! Take some time to look at the language! Click on some different elements to see what's inside, and see if you can locate the styling pane in your browser's DevTools.
If this looks overwhelming, that’s okay! Most websites are very complex and have been built over many years by many people. If you follow along with this series, you'll get step by step instructions on how to create your own web-pages!
See you next time, and don’t forget to Learn as You Code!
Top comments (0)