What to learn next
Congratulations on learning HTML and CSS fundamentals! You now understand a lot of what goes into the webpages you see around the internet, and you should hopefully be able to look at those webpages and start to recognize the HTML tags and CSS properties in use.
There is a whole lot more that you can do to build on your HTML and CSS knowledge, however. Read on!
More HTML tags
- Form tags: There are quite a few tags that are used to create web forms, like
<input>s. They are typically used to communicate data back to a server, something which we don't enable on Khan Academy. They can also be used with JS to create a game, which we do teach in the HTML/JS course. Learn more about form tags with these slides. Learn server-side languages like PHP, Python, Ruby on Codecademy.
- Iframes: The
<iframe>tag is a way to frame another webpage inside yours, and is handy for things like embedding Youtube videos, Google Maps, etc. That tag is disabled on Khan Academy currently for security and moderation purposes, but can be experimented with elsewhere. Learn more with these slides.
- Multimedia tags: The
<video>tags are supported in modern browsers as a way to play audio and video files on webpages. Like the
<iframe>tag, they are currently disabled on Khan Academy, but can be used elsewhere. Learn more with these slides.
- New semantic tags: In the past few years, as part of the "HTML5" specification, browsers have added new semantic tags for developers to use instead of
<div>s, when appropriate, such as
<nav>, etc. There are many articles about them here, including this handy flowchart for deciding when to use them.
More CSS selectors and properties
You should be able to experiment with all of these on Khan Academy:
- CSS3: We covered CSS that's been supported in browsers for years, but there are many new CSS properties and selectors in what's known as the "CSS3" specifications, and browsers are adding support continuously as they release new versions. You can learn more in these CSS3 selectors slides, and CSS3 properties slides. Make sure to check caniuse.com to find out what's supported in each browser.
- Media queries: This is a technique that lets you specify different CSS for different situations, like when your webpage is viewed at a smaller size or when it's printed. Learn more from W3C.
- CSS frameworks: A framework is a collection of CSS rules and classes, and many developers use CSS frameworks to enable them to write CSS faster. The most popular one is Twitter Bootstrap, but there's also ZURB foundation, Pure CSS, Topcoat, and more.
Using JS in webpages
Making webpages outside Khan Academy
We love to see you making cool webpages here and sharing what you're learning with the community, but we also think its a great thing to experience other code editing environments and get to experiment with functionality that we don't have enabled. If you want to continue coding inside the browser (especially if you're on a ChromeBook), you can try JSBin.com, JSFiddle.net, or Cloud9 IDE.
If you want to code outside of the browser, you can download an IDE and save your webpages as ".html" files. Popular IDEs are Notepad++ (Windows only), Visual Studio Code, SublimeText, Adobe Brackets, Coda, and BBEdit.
Hosting webpages on a server
We host the webpages that you create here on Khan Academy on our own server, but you may want to set up your own web presence.
First, you'll have to find a company that will host your site. There are many hosting providers out there, with varying degrees of flexibility and price.
Then you will also want to create a domain name, like "mycoolname.com", so that your site can be a part of your identity. Sometimes you can do that with your hosting provider, but often times, you use a different domain name registrar for that. Learn more from these slides.
Once you have a web host, you can transfer your files to the server with an FTP client like FileZilla. That's a program that connects directly to the server and allows you to browse, download and upload files to and from the server. You might also be able to SSH into the server and directly edit the files on that machine.
HTML and CSS are constantly changing, because browsers release improvements so often and the web development community is an active one. One of our favorite ways to keep up-to-date is to subscribe to Frontend Focus, a newsletter with links to articles and demos. Of course, whenever you learn something new, you should try it out to really understand how it works.
Practice, practice, practice!
Want to join the conversation?
- what is the difference between html and html5(61 votes)
- Some new features in HTML5 includes, but is/are not limited to:
• Simpler DOCTYPE declaration. (
• Simpler charset declaration (
• Loads of new elements and attributes. (i.e.
Perhaps you'll be interested in the following page; http://dev.w3.org/cvsweb/~checkout~/html5/html4-differences/Overview.html?rev=1.193;content-type=text%2Fhtml(92 votes)
- How do you put in an html box inside a question or answer? Like you can do
and I've seen people have a grey box around it. How do you use this?(23 votes)
If you mean something like this, you have to quote your text with grave accents, one on each side for a single word or sentence, or three on each side for a block of code.
When you click on an Answer box there's link underneath that says
Formatting tipsthat explains how to use them and from where you can copy the ` character if can't find it on your keyboard.(53 votes)
- What is the hardest programming language? And what programming is the most popular currently? If you want you may subdivide it into programming languages that are used especially for games and programming languages languages specialized for websites. Thanks in advanced.(13 votes)
- The hardest maybe assembly language, when we learned in Computer Science course, it drives one crazy to complete even a small thing.(15 votes)
- Why can these companies charge me for a domain name? I have set up a WAMP self host server for a web page, but I can't mask the sites IP address with a domain name? Why?(8 votes)
- As others have mentioned and you noticed, it is possible to host a website without a domain name, but there are also many limitations including:
- most search engines will not crawl a site without a domain name
- the server hosting the domainless site can not host other domains
- there can not be any security certificate (SSL)
- people won't remember your IP
- people will probably be wary of a site with no domain name, especially if they know that it was to save a tiny 10-15$ per year
- the site can not be linked to its email address as emails are domain related(26 votes)
- why is this helpful for us kids(7 votes)
- Because programming is going to become one of the most important things in the future to find a job or start a business. And also it's fun to learn in my opinion.(6 votes)
- Could Khan Academy do a Python course? I want to do a Python course, and since I'm here in HTML, why not ask for a new course.(9 votes)
- Khan Academy currently doesn't have a Python course.
It is a common request though.
The only languages KA has are jQuery, JS, HTML/CSS and SQL.(5 votes)
- I want to learn more about HTML and CSS like making a stylish webpage layout, creating stylish menu bar.
where can i learn them?(3 votes)
- One of the ways you can do that is to find a good HTML user and ask them to teach you. You have no idea how much I've learned from the KA community. :D(7 votes)
- I have seen sites in the past hide their source from view source. How do you do that?(4 votes)
- Well, it's not completely hidden.
One way is to disable right-click and f12, so that it will not be possible to view the source - that easily.
Furthermore, you could put loads of white space before the code (and maybe remove the scrollbar)
- How can I practice making webpages is there a way that you can make your own webpages on Khan Academy?(2 votes)
- You can at this site:
A couple things to remember:
1. You can only use external images from Wikipedia, nowhere else.
2. You cannot use
3. You cannot import files from your computer, e.g. a
@font-faceor an external .js or .css sheet.
4. Obviously, you cannot use SQL.
5. The website will technically not be live, it will 'live' inside of a
- How to create my own website outside the Khan Academy?(2 votes)
- If you want you can create webpages on other online editors like codepen.io (sorry @gedran25) or on Cloud9 as palema showed. You can also use offline editors like:
- VSCode (Like I do)
- Sublime Text
- Visual Studio
- etc.(4 votes)