index.html

<script Modulo
    src="/static/js/Modulo.js"
    -src="/static/libraries/" 
></script>

<x-Page title="Foundations of Web Design" navselected="foundations/">

    <div style=" background: whitesmoke; padding: 10px;">
        <h4>Early Access</h4>
        <p>This course isn't public yet! Think of it as an "early access" or
        "beta test". Content items with the following marks are incomplete:<br />
        <em>
            &#x25D5; Mostly complete 
            &#x25D1; Partial content
            &#x25D4; Some content or links
        </em>
        </p>
    </div>

    <h1 style="font-size: 5rem;">Welcome</h1>

    <h2>How to start</h2>

    <p><em>Start the course in 3 steps:</em></p>

    <ol>
        <li><h3>Start with <a 
        target="_blank"
        href="/foundations/1.1/">Lesson 1.1 "HTML Basics"</a></h3> <br />
        <em>Explanation: The course is broken down into lessons (1.1, 1.2, 1.3,
        2.1, etc), and you start with 1.1</em></li>
        <li>
        <h3>Then, do
        <a
        target="_blank"
        href="/slides.html?title=Activity%201&path=/foundations/1.1/activities/act1/instructions.md">Lesson
        1.1 "HTML Basics" / Activity 1 "Hello Coding World"</a></h3>
        <em>Explanation: Each lesson is broken down into a slideshow of
        activities with hands-on learning, each with an accompanying
        instructions slideshow (Activity 1, Activity 2, etc), and you start
        with Activity 1 slideshow open</em></li>

        <li><h3>Then, do
        <a 
        target="_blank"
        href="http://localhost:3334/editor.html?file=/foundations/1.1/activities/act1/challenge1.html">
        Lesson 1.1 / Activity 1 / Challenge 1 - "Hello World"</a></h3>
        <em>Explanation: Each Activity is broken down into at least 4
        challenges, each with accompanying files and instructions (Challenge 1
        with file(s) and instructions, Challenge 2, etc), and you start with
        Challenge 1 file(s) open, as you follow the instructions in the
        slideshow</em></li>

    </ol>



    <div style="margin-top: 100px">
        <h2>How to continue to learn</h2>

        <p>Congratulations on starting your coding journey with us!</p>

        <p>Once you've started using the above 3 steps, you have to "rinse and
        repeat": Keep on working through every activity until you complete each
        lesson, and work through all the lessons until you complete the course.
        We try to keep our courses with very clear, straight-forward structure,
        so you know just how much you have done, and how much you have left to
        do!</p>

        <h3>Types of content</h3>
        <ol>
            <li>Lessons - These are pages with coding activities, slides, and
            occasional videos that can be accomplished in 2 hour intervals.
            They are intended to simulate being in a real workshop-style
            classroom. The activities you do in them help prepare you for the
            Project Labs. </li>
            <li>Project Labs - The goal of a Project Lab is to apply your
            knowledge to bigger designs. These are lessons that don't introduce
            much new material, as much as give repeated practice with concepts
            learned in the previous lessons, along with practical new ways to
            apply the concepts.</li>
            <!--<li>Design Labs - The goal of a Design Lab is to learn graphic
            and web design skills, along with computer power user skills
            necessary for this skillset.</li>-->
        </ol>

        <p>Once you've completed the course, you'll have created as many as
        dozens of useful, fun, and potentially commercially viable websites.
        You'll have also built up your skills in Foundational web design
        knoweldge, and would be ready to jump into learning many different
        other programming languages and frameworks.</p>
    </div>

    <div style="margin-top: 100px">


            <h2>Working locally</h2>
            <p><strong>You don't need to start with this. Start with the
            above instructions instead.  </strong> However, by <em>Lesson
            2.1</em>, you will be instructed to complete activities locally.
            At that point (or earlier, if you prefer), follow these steps:</p>

            <ol>
                <li>Install an editor or IDE, such as
                <a href="https://www.geany.org/" >Geany</a> (free software) and
                <a href="https://notepad-plus-plus.org/">Notepad++</a> (free software),
                <a href="https://www.sublimetext.com/">Sublime</a> (freeware), or
                VS Code (by Microsoft).</li>
                <li><a
                href="https://github.com/modulojs/foundations/archive/refs/heads/main.zip">Download
                and extract the Foundations of Web Design Zip file</a>
                <li>Because dealing with so many files can be tricky, get practice
                navigating around the directory using your file browser on your
                computer, e.g. Finder on macOS, Files or Dolphin on Linux /
                GNOME / KDE, or Windows File Explorer on Windows</li>
                <li>When you are ready, open the <tt>instructions.md</tt> file of an
                activity in your text editor, along with <tt>challenge1.html</tt> (or
                equivalent, e.g. <tt>ch1/</tt> directory) of an activity to begin the
                lesson.</li>
            </ol>


            <h3>Tips for learning Locally</h3>
            <!--<p><em>These learning tips are on practicing the techniques taught in this
            tutorial on both a local file, as well as the online editor that is
            embedded in this website for convenience.</em></p>-->
            <ul>
                <li ><p><em>Tip 1:</em> Use code editor on a laptop or desktop computer
                and code editor to practice concepts, in addition to the online one, as
                it's designed just for demonstrating concepts and could feel limiting
                with too much use. However, if necessary, you can still finish it all
                only using the online editors.</p></li>
                <li ><p ><em >Tip 2:</em> The <em>Activity Challenge</em> instructions
                tell you to apply the concepts you learn. Most will have sample code to
                edit and see. It's encouraged to try apply the lesson you learned on a
                component you develop locally on your computer. What does it mean to
                develop locally? This means editing a HTML file separately in a text
                editor (open source options include <a href="https://www.geany.org/">Geany for Linux / macOS / Windows</a> and
                <a href="https://notepad-plus-plus.org/">Notepad++ for Windows</a>), saved
                to your computer, also opened in a modern web browser (such as
                <a href="https://firefox.com/">Firefox</a> or Chrome).</p></li>
                <li><p><em>Tip 3:</em> When working locally, developers often
                like to tile the web browser and editor side-by-side, in
                separate monitors, or on big screens so they can see it all at
                once. You don't need a big screen, however, if you can use good
                key combos!  For example: <code
                class="library_library_Page">Alt+Tab</code> (switch windows,
                e.g.  between editor and browser) and <code
                class="library_library_Page">Ctrl+Shift+R</code> (force refresh
                browser).</p></li>
                <li><p><em>Tip 4:</em> This is more of a general tip, but you
                should set a timer to complete each lesson in a reasonable time
                for you, e.g. 1 hour, or 2 hours. If you find yourself stuck on
                a particular lesson for longer than 2 hours, then move-on. Go
                for a walk: Sometimes you need some exercise and offline time
                for an "aha" moment!</p>
            </ul>


            <!--
            <h3>Rapid learning methodology</h3>
            <p>That is: <em>How to "do" the course as effectively as possible</em></p>
            <p>This document (and, soon, videos) will explain how to use the
            learning platform that you are using right now, and our rapid learning
            methodology.  You'll probably have some questions lingering after all
            this, so don't hesitate to ask if you run into any issues with our
            software, or have any questions about our learning methodology.</p>
            <h3>Lessons</h3>
            <p>You should set a timer to complete each lesson in 2 hours. If you
            find yourself stuck on a particular lesson for longer than 2 hours,
            then move-on, and revisit the concept later.</p>
            <h3>Zip file</h3>
            <p>The zip file contains activities directories, demos directories, and
            solution directories. Resist the urge to go into the solutions
            directory when you first get stuck -- you have to power through this,
            no peeking!</p>
            <p>The activities directory consists of a series of project-based
            challenges that get increasingly difficult.  Most activities have an
            instructions.md file, which is a Markdown file with instructions on how
            to complete it.</p>
            <h3>Challenges</h3>
            <p>Each activity is divided into a series of challenges. The challenges
            get increasingly difficult. Focus only on completing the first few
            challenges on your "first try" -- you will not have time for all of
            them.</p>
            <p>For beginners, there can be more to learn and understand than what
            can be done in 30 minutes, and so your "first pass" should be about
            breadth not depth. This is to prevent this issue common with beginners,
            where you "miss the forest for the trees", and avoid getting hung up on
            smaller details that will become clearer as you progress. Set a 20-30
            minute timer for each activity. Resist the urge to keep on attempting
            challenges, instead try moving on to the next one. Only after your first
            "2 hour" session for the lesson, then you can go back and repeat the
            harder challenges. The first challenges are designed to warm up, and
            then give some practice on the "gist" of what you are learning, without
            getting bogged down with details or advanced features</p>
            -->


    </div>

    <!--
    <x-Markdown src="/foundations/README.md"></x-Markdown>
    -->
</x-Page>