Build a beautiful blog

A full course on how to engineer a stunning website.
    <!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; }