index.html

---
layout: default
home-title: Code The Web
title: Code The Web — Web development explained for normal people
description: Web development explained for normal people.
home: true
regenerate: true
---

{% include header.html %}

<div class="g-banner home-banner {{ site.theme-color | prepend: 'banner-theme-' }} post-pattern-{{ site.postPatterns }}" data-theme="{{ site.theme-color }}">
    <div style="z-index: 1" class="home-banner-inner">
        <h1><span>Code The Web</span></h1>
        {% include top-index-content.html %}
    </div>
</div>

<main class="g-container home-content" id="main">
    <div class="article-list">
     {% if site.homepage-message %}
      <div class="learn-link-home card-style" style="
          color:  black;
          font-size: 0.7em;
          text-align:  center;
      "><span class="learn-link-home-title">{{site.homepage-message}}</span></div>
      {% endif %}
        {% comment %}
        <div class="large-message">
            <div class="primary">I am a real human here to help you learn web development.</div>
            <div class="sub">My name's Ethan, nice to meet you &#x1F44B;</div>
        </div>
        {% endcomment %}
        {% if site.search %}
        <div class="search-card">
            <label for="search_input">Search Code The Web</label>
            <input id="search_input" type="text" placeholder="Search Code The Web...">
            <i class="iconfont icon-search"></i>
            <div class="search_result"></div>
        </div>
        {% endif %}
        {% if paginator.page == 1 %}<h2 class="recent-articles-title">Recent Articles</h2>{% endif %}
        {% for post in paginator.posts %}
            <article class="article-item">
                {% if post.image %}
                <div class="post-cover">
                    <a class="post-link" href="{{ post.url }}" title="{{ post.title }}"></a>
                    <img loading="lazy" src="{% if jekyll.environment == "production" %}https://cdn.statically.io/img/{% endif %}{{ site.urlhost }}{{ post.image }}?w=700&f=auto" alt="{{ post.title }} - {{ site.title }}" {% img_dimension_attributes post.image %}>
                </div>
                {% endif %}
                <section class="post-preview">
                    <a class="post-link" href="{{ post.url }}" title="{{ post.title }}"></a>
                    <h2 class="post-title">{{ post.title }}</h2>
                    {% if post.subtitle %}
                    <h3 class="post-subtitle">{{ post.subtitle }}</h3>
                    {% endif %}
                    {% if post.subtitle.size==0 or post.subtitle==nil %} 
                    <p class="post-excerpt">{{ post.excerpt | strip_html | strip_newlines | truncate: 126}}</p>
                    {% endif %}
                </section>
                <footer class="post-meta">
                    <div class="post-tags">
                        {% if post.tags.size > 0 %} 
                            {% for tag in post.tags  %}
                        <a href="{{ site.baseurl }}tags/#{{ tag }}" class="post-tag">{{ tag }}</a>
                            {% endfor %}
                        {% endif %}
                    </div>
                    <time class="post-date" datetime="{{ post.date | date:"%y-%m-%d" }}">{{ post.date | date_to_string }}</time>
                </footer>
            </article>
            {% if forloop.index < paginator.posts.size %}
            {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %}
              {% if thecycle == 'odd' %}
                {% include in-post-stream-odd.html %}
              {% else if forloop.index > 0 %}
                {% include in-post-stream-even.html %}
              {% endif %}
            {% endif %}
        {% endfor %}

        {% if paginator.total_pages > 1 %}
            {% include pageNav.html %}
        {% endif %}

    </div>

    <aside class="g-sidebar-wrapper">
        <a href="{{site.newsletter}}" class="btn sidebar-btn"><span class="emoji"><span>&#x1F4E6;</span><div class="animation-bg"></div></span><span> Resources!</span></a>
        {% include bmc.html %}
        {% include share.html %}
        {% comment %}
        <div class="g-sidebar">
            <section class="author-card">
                <div class="avatar">
                    <img src="{% if jekyll.environment == "production" %}https://cdn.statically.io/img/{% endif %}{{ site.urlhost }}/{{ site.avatar }}?w=70" alt="{{site.author}}">
                </div>
                <div class="author-name" rel="author">{{ site.author }}</div>
                <div class="bio">
                    <p>{{ site.bio }}</p>
                </div>
                {% if site.sns.size > 0 %}
                <ul id="sns-links" class="sns-links">
                    {% for s in site.sns %}
                    <li>
                        <a href="{{ s[1] }}" target="_blank">
                            <i class="iconfont icon-{{ s[0] }}"></i>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </section>
        </div>
        {% endcomment %}
        
        {% if site.recommend-tags and site.tags.size>0 %}
        <section class="tags-card card-style">
            {% for tag in site.tags %}
                {% if forloop.index > site.recommend-condition-size %}
                    {% break %}
                {% endif %}
            <a href="{{ site.baseurl }}tags/#{{ tag[0] }}" class="tag">{{ tag[0]}}</a>
            {% endfor %}
        </section>
        {% endif %}
        
        {% comment %}
        Removed SP badge for the moment:
        <a href="https://simpleprogrammer.com/2015/03/02/my-free-blogging-course-is-getting-unbelievable-results/" class="sp-badge sp-badge-home card-style" target="_blank"><img loading="lazy" src="https://simpleprogrammer.com/wp-content/uploads/2015/04/badge.png"></a>
        {% endcomment %}
    </aside>
    
</main>

{% include footer.html %}