Dev Pal Screencast 1: Promises, async and await — basic fetch (template)

In this example below you will see how to do a Dev Pal Screencast 1: Promises, async and await — basic fetch (template) with some HTML / CSS and Javascript

This awesome code was written by hankchizljaw, you can see more from this user in the personal repository.
You can find the original code on
Copyright hankchizljaw ©
  • HTML
  • CSS
  • JavaScript
    <section class="boilerform">
    <h2>Find a GitHub user</h2>
    <form class="form" method="post">
        <div class="form__row">
            <label for="name" class="c-label">Username</label>
            <input type="search" name="username" id="username" class="[ c-input-field ] [ js-name-field ]" value="" autocorrect="off" required />
        <div class="form__row">
            <button class="c-button" type="submit">Search</button>    
<div class="user" aria-live="assertive">
    <div class="user__avatar">
        <img class="js-avatar" src="" alt="A placeholder image" />
    <div class="user__info">
        <h2 class="js-name">Loading a user...</h2>
        <p class="js-bio"></p>
        <p><a href="#" class="js-profile-link">GitHub profile</a></p>

/*Downloaded from */
    :root {
    --bg: #f3f3f3;
    --radius: 4px;
    --border: #999;
    --links: #b71540

body {
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 
                    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
                    "Fira Sans", "Droid Sans", "Helvetica Neue", 
    background: var(--bg);

.form__row + .form__row {
    padding-top: 1rem;

h2 {
    font-weight: 300;
    margin: 0 0 1rem 0;

.user {
    display: flex;
    align-items: flex-start;
    padding: 2rem 0 0 0;
    margin: 2rem 0 0 0;
    border-top: 1px solid var(--border);
    max-width: 500px;

.user__avatar {
    width: 70px;
    flex-shrink: 0;

.user__avatar img {
    border-radius: var(--radius);
    width: 100%;

.user__info {
    padding-left: 1rem;

a {
    color: var(--links);
    text-decoration-skip-ink: auto;

a:focus {
    text-decoration: none;

/*Downloaded from */
    // See the full pen here:
// See the screencast here: