How to build a beautiful blog

Learn how to create a stunning website using modern HTML and CSS

    <!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; }
    }
    
    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!

What people are saying about Scrimba: