Intro to HTML/CSS: Making webpages
Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, etc. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.
Community Questions
All content in “Intro to HTML/CSS: Making webpages”
Intro to HTML
Learn what HTML is and how to make a webpage with marked up text and images.
- Welcome to the web! (Video)
- HTML basics (Scratchpad)
- Quick tip: HTML tags (Article)
- Challenge: Write a Poem (Scratchpad)
- HTML: Text emphasis (Scratchpad)
- Challenge: You can learn text tags (Scratchpad)
- HTML: Lists (Scratchpad)
- Challenge: Your learning list (Scratchpad)
- HTML: Images (Scratchpad)
- Challenge: A picture-perfect trip (Scratchpad)
Intro to CSS
Learn how to write simple CSS rules, to select based on element, class, or ID, and change the colors of your page.
- CSS Basics (Scratchpad)
- Quick tip: Selecting by tag name (Article)
- Challenge: Colorful creature (Scratchpad)
- CSS: Selecting by id (Scratchpad)
- Challenge: Seasonal ids (Scratchpad)
- CSS: Selecting by class (Scratchpad)
- Challenge: Apples and bananas classes (Scratchpad)
- Quiz: Simple CSS selectors (Exercise)
- Project: Travel webpage (Scratchpad)
More HTML tags
Learn how to make links, tables, and comments.
CSS text properties
Learn how to style your text, like font families, size, spacing, and alignment.
- CSS Zen Garden (Video)
- CSS font-family property (Scratchpad)
- Challenge: Fancy font families (Scratchpad)
- CSS font-size property (Scratchpad)
- Challenge: Great big font sizes (Scratchpad)
- CSS font styles and shorthand (Scratchpad)
- Challenge: Famous font formats (Scratchpad)
- More CSS text properties (Scratchpad)
- Quiz: text properties (Exercise)
- CSS inheritance (Scratchpad)
- Project: Blog (Scratchpad)
Web development tools
Learn how to use other editors to develop your web pages and how to use the browser developer tools to debug your webpages.
CSS layout
Learn how to use the HTML span and div elements with CSS properties like position and float to change the layout of your webpages.
- CSS grouping elements (Scratchpad)
- Challenge: Group the groupers (Scratchpad)
- CSS width, height, and overflow (Scratchpad)
- The overflowing ocean (Scratchpad)
- CSS box model (Scratchpad)
- Challenge: The boxer model (Scratchpad)
- CSS position (Scratchpad)
- Challenge: Position planet (Scratchpad)
- CSS in the wild: Google Maps (Video)
- CSS floating elements (Scratchpad)
- Challenge: Floating clouds (Scratchpad)
- Quiz: CSS Layout (Exercise)
- Planning your webpage (Article)
- Project: Event invite (Scratchpad)
More CSS selectors
Learn more complex selectors- using multiple classes, combing elements with classes, descendant selectors, grouped selectors, and dynamic pseudo-classes.
- Using multiple CSS classes (Scratchpad)
- Challenge: A classy gallery (Scratchpad)
- Combining CSS class and element selectors (Scratchpad)
- Challenge: Classes of elements (Scratchpad)
- CSS descendant selectors (Scratchpad)
- Challenge: Descendants of Khan (Scratchpad)
- Grouping CSS selectors (Scratchpad)
- CSS dynamic pseudo-classes (Scratchpad)
- Challenge: Grouped animals (Scratchpad)
- CSS specificity (Scratchpad)
- Quiz: CSS specificity (Exercise)
Other ways to embed CSS
Learn how to use inline styles and external stylesheets, two more ways to bring CSS into your webpage.
Further learning
What can you do to keep learning HTML and CSS?