How to build a beautiful blog

This HTML and CSS tutorial teaches you how to create a stunning website in less than 45 minutes.

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<style>
    
    p { color: green; }
    
    @media (max-width: 8.5in) {
        p { color: blue; }
    }
    
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    body * {
    	color:                    hsla(210, 100%, 100%, 0.88) !important;
    	background:               hsla(210, 100%,  50%, 0.33) !important;
    	outline:    0.25rem solid hsla(210, 100%, 100%, 0.50) !important;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/debug.css">
    		<style>
    
    article {
    	display: grid;
    	grid-template-columns: 1fr minmax(0, 8.5in) 1fr;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/debug.css">
    		<style>
    
    article {
    	display: grid;
    	grid-template-columns: 1fr 0.5in [start] minmax(0, 7.5in) [end] 0.5in 1fr;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/debug.css">
    		<link rel="stylesheet" href="styles/article.css">
    		<style>
    
    .size-1 { grid-column: 4 / 5; }
    .size-2 { grid-column: 3 / 6; }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/debug.css">
    		<link rel="stylesheet" href="styles/article.css">
    		<link rel="stylesheet" href="styles/article-image.css">
    		<style>
    
    h2, p:not(:last-child) { margin-bottom: 2.4rem; }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/-debug.css">
    		<link rel="stylesheet" href="styles/article.css">
    		<link rel="stylesheet" href="styles/article-image.css">
    		<style>
    
    h2, p:not(:last-child) { margin-bottom: 2.4rem; }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/-debug.css">
    		<link rel="stylesheet" href="styles/article.css">
    		<link rel="stylesheet" href="styles/article-image.css">
    		<style>
    
    h2, p:not(:last-child) { margin-bottom: 2.4rem; }
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>hello, world!</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i">
            <link rel="stylesheet" href="styles/reset.css">
            <link rel="stylesheet" href="styles/-debug.css">
    		<link rel="stylesheet" href="styles/article.css">
    		<link rel="stylesheet" href="styles/article-figure.css">
    		<link rel="stylesheet" href="styles/article-text.css">
    		<style>
    
    :root { font: 20px/1.2 "Roboto", sans-serif; }
    
    body,
    body * {
    	margin:          unset;
    	box-sizing:      unset;
    	padding:         unset;
    	font-size:       unset;
    	color:           unset;
    	text-decoration: unset;
    }
    
    figure * { display: block; }

Build a stunning website in less than 45 minutes πŸ› 

If you've ever been curious to learn HTML and CSS but found yourself frustrated along the way, this course is for you. I'm Zaydek, and I've built a few websites. In the process, however, I've found myself overwhelmed with the syntax and baggage of HTML and CSS. In this course, I provide a brief introduction to HTML and CSS (hopefully!) without the pain I had to first endure.

I'll provide you with a series of steps and perspectives along the way to help you build your own website without getitng lost. I think everyone would benefit from knowing how to build a beautiful blog, so in this course, I do exactly that: teach you how to start from scratch and architect something that would then be meaningful for you and others.

If you have questions, comments, or feedback, reach out to me on Twitter @username_zaydek. Thanks!

people love this course 😍

why you'll learn faster πŸ”₯

Hi, I'm your teacher πŸ‘‹

The course creator

ZAYDEK πŸ‘¨β€πŸ’»πŸ‘¨β€πŸŽ¨

Zaydek is a self-taught designer and programmer. He's created three popular Scrimba courses, all of which inspires the students to be creative with the tools they learn. Zaydek is especially interested in distributed self-education.

Thank ZAYDEK for the course

secure your free spot

100,000 people can't be wrong