160 lines
5.9 KiB
Plaintext
160 lines
5.9 KiB
Plaintext
|
---
|
||
|
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>
|
||
|
|
||
|
<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>
|
||
|
|
||
|
<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>
|