HTML/CSS - My Blog Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>My Blog</title>
        <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
    </head>
    
    <body>
        <!-- header start -->
        <div id="header" class="section">
            <img alt="" class="img-circle" src="https://code.sololearn.com/Icons/Avatars/0.jpg">
            <p>Alex Simpson</p>
        </div>
        <!-- header end -->
        
        <!-- About Me section start -->
        <div class="section">
            <h1><span>About Me</span></h1>
            <p>
                Hey! I'm <strong>Alex</strong>. Coding has changed my world. It's not just about apps. Learning to code gave me <i>problem-solving skills</i> and a way to communicate with others on a technical level. I can also develop websites and use my coding skills to get a better job. And I learned it all at <strong>SoloLearn</strong> where they build your self-esteem and keep you motivated. Join me in this rewarding journey. You'll have fun, get help, and learn along the way!
            </p>
            <p class="quote">"Declare variables, not war"</p>
        </div>
        <!-- About Me section end -->
        
        <!-- My Schedule section start -->
        <div class="section">
            <h1><span>My Coding Schedule</span></h1>

css

html {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Handlee', cursive;
    font-size: 13pt;
    background-color:  #efefef;
    padding: 10px;
    margin: 0;
}
h1 {
    font-size: 15pt;
    color:  #20bcd5;
    text-align: center;
    padding: 18px 0 18px 0;
    margin: 0 0 10px 0;
}
h1 span {
    border: 4px dashed  #20bcd5;
    padding: 10px;
}
p {
    padding: 0;
    margin: 0;
}
.img-circle {
    border: 3px solid  white;

BROWSER

Console