---
title: Practice Projects
layout: base.njk
css: ["/css/style.css"]
cssReset: true
---

<div class="blurb">
    <p>
        These are completed projects done to practice using HTML,
        CSS & Javascript. They come from different sources, and
        most are freely available for anyone to practice with.
        Where not, I'll indicate if it is from a premium source.
    </p>
    &nbsp;
    <p>
        I've put them all into a single GIT repository rather than
        litter my git service with many different projects. This may
        change in future depending on how many of these that I do.
    </p>
    &nbsp;
    <p>Robert McGovern</p>
</div>

<div class="projectsDiv">
    <div class="alignedHeader">
        <h2 class="projectsSection__title">{{webprojects.frontendMentor.serviceName}}</h2>
        <img src="{{webprojects.frontendMentor.svgSource}}" alt="{{webprojects.frontendMentor.svgAltText}}"/>
    </div>
    <p>{{webprojects.frontendMentor.description}}</p>

    {% for difficultyLevel in webprojects.frontendMentor.difficulty %}
        {% if difficultyLevel.challenges | length %}
            <div class="frontEndMentorChallenges">
                <h3>{{difficultyLevel.title}} Challenges</h3>

                <div class="projects-grid">

                    {% for challenge in difficultyLevel.challenges %}

                        {% set projectContent = challenge %}
                        {% include "components/project.njk" %}
                    {% endfor %}
                </div>
            </div>

        {% endif %}
    {% endfor %}
</div>

<div class="projectsDiv">
    <div class="alignedHeader">
        <h2 class="projectsSection__title">Freecodecamp</h2>
        <img src="/svgs/freecodecamp.svg" alt="Freecodecamp"/>
    </div>
    <div class="responsiveProjects">
        <h3>Responsive Web Design Projects</h3>
        <p>
            Note: As of 11 Oct 2020, these require a partial rework
            to look good on mobile. 1-3 where written much earlier
            in my learning, so while they fufill all the
            requirements, they don't look great on mobile.
        </p>
        <div class="projects-grid">
            <div class="project-card stacked">
                <a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">
                    <img class="card__img" src="/screenshots/fcc-web-Project1-TributePage.jpeg"
                        alt="Project 1 - Tribute Page"/>
                </a>
                <div class="card__content">
                    <h3 class="card__title">
                        Project 1 - Tribute Page
                    </h3>
                    <!-- <p class="card__description">
                        Lorem ipsum dolor sit amet consectetur
                        adipisicing elit.
                    </p> -->
                    <ul class="card__techUsed">
                        <li>
                            <img src="/svgs/html5.svg" alt="HTML5"/>
                        </li>
                        <li>
                            <img src="/svgs/css3.svg" alt="CSS3"/>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="project-card stacked">
                <a href="/freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">
                    <img class="card__img" src="/screenshots/fcc-web-Project2-BuildaSurveyForm.jpeg"
                        alt="Project 2 - Build A Survey Form"/>
                </a>
                <div class="card__content">
                    <h3 class="card__title">
                        Project 2 - Build A Survey Form
                    </h3>
                    <!-- <p class="card__description">
                        Lorem ipsum dolor sit amet consectetur
                        adipisicing elit.
                    </p> -->
                    <ul class="card__techUsed">
                        <li>
                            <img src="/svgs/html5.svg" alt="HTML5"/>
                        </li>
                        <li>
                            <img src="/svgs/css3.svg" alt="CSS3"/>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="project-card stacked">
                <a href="/freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">
                    <img class="card__img" src="/screenshots/fcc-web-Project3-ProductLandingPage.jpeg"
                        alt="Project 3 - Product Landing Page"/>
                </a>
                <div class="card__content">
                    <h3 class="card__title">
                        Project 3 - Product Landing Page
                    </h3>
                    <!-- <p class="card__description">
                        Lorem ipsum dolor sit amet consectetur
                        adipisicing elit.
                    </p> -->
                    <ul class="card__techUsed">
                        <li>
                            <img src="/svgs/html5.svg" alt="HTML5"/>
                        </li>
                        <li>
                            <img src="/svgs/css3.svg" alt="CSS3"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="projectsDiv">

    <div class="alignedHeader">
        <h2 class="projectsSection__title">
            The Complete 2022 Web Development Bootcamp
        </h2>
        <img src="/svgs/udemy.svg" alt="The Complete 2022 Web Development Bootcamp Udemy Course"/>
    </div>
    <p>coming soon</p>
</div>

<div class="projectsDiv">
    <h2 class="projectsSection__title">Vanilla JS Projects</h2>
    <p>coming soon</p>
</div>

<div class="projectsDiv">
    <h2 class="projectsSection__title">Playground</h2>
    <p>
        Intended for just little snippets of code that look useful
    </p>
    <a href="/playground">The Playground</a>
</div>