190 lines
10 KiB
HTML
190 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Practice Projects</title>
|
|
<link rel="stylesheet" href="./css/reset.css">
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<!-- some logo here -->
|
|
<div class="header">
|
|
<h1 class="test">Practice Projects</h1>
|
|
</div>
|
|
<!-- consider a menu for jumping down page -->
|
|
</header>
|
|
<main>
|
|
<div class="blurb">
|
|
<p>These are completed projects done to practice using HTML, CSS & Javascript. They come from different services, and most are freely available for anyone to practice with.</p>
|
|
|
|
<p>I have put them all into a single GIT repository rather than litter my github page 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">
|
|
<h2>Frontend Mentor</h2>
|
|
<div class="newbieChallenges">
|
|
<h3>Newbie Challenges</h3>
|
|
|
|
<div class="projects-grid">
|
|
<div class="project-card stacked featured">
|
|
<a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/">
|
|
<img class="card__img" src="./screenshots/fem-newbie-huddle-landing-page-with-single-introductory-section.png" alt="The Huddle Landing Page Challenge from FrontendMentor, with a single introductory section.">
|
|
</a>
|
|
<div class="card__content">
|
|
<h3 class="card__title">The Huddle Landing Page</h3>
|
|
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
<ul class="card__techUsed">
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
<li>JavaScript</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card stacked">
|
|
<a href="./FrontendMentor/newbie/ping-coming-soon-page-master/">
|
|
<img class="card__img" src="./screenshots/fem-newbie-ping-coming-soon-page.jpeg" alt="Ping Coming-Soon Challenge from FrontendMentor">
|
|
</a>
|
|
<div class="card__content">
|
|
<h3 class="card__title">Ping Coming-Soon</h3>
|
|
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
<ul class="card__techUsed">
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
<li>JavaScript</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card stacked">
|
|
<a href="./FrontendMentor/newbie/single-price-grid-component-master/">
|
|
<img class="card__img" src="./screenshots/fem-newbie-single-price-grid-component.jpeg" alt="Single Price Grid Component Challenge from FrontendMentor">
|
|
</a>
|
|
<div class="card__content">
|
|
<h3 class="card__title">Single Price Grid Component</h3>
|
|
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
<ul class="card__techUsed">
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card stacked">
|
|
<a href="./FrontendMentor/newbie/four-card-feature-section/">
|
|
<img class="card__img" src="./screenshots/fem-newbie-four-card-feature-section.jpeg" alt="Four Card Feature Section Challenge from FrontendMentor">
|
|
</a>
|
|
<div class="card__content">
|
|
<h3 class="card__title">Four Card Feature Section</h3>
|
|
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
<ul class="card__techUsed">
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card stacked">
|
|
<a href="./FrontendMentor/newbie/article-preview-component/">
|
|
<img class="card__img" src="./screenshots/fem-newbie-article-preview-component.jpeg" alt="Article Preview Component Challenge from FrontendMentor">
|
|
</a>
|
|
<div class="card__content">
|
|
<h3 class="card__title">Article Preview Component</h3>
|
|
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
<ul class="card__techUsed">
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card stacked">
|
|
<a href="./FrontendMentor/newbie/stats-preview-card-component/">
|
|
<img class="card__img" src="./screenshots/fem-newbie-stats-preview-card-component.jpeg" alt="Stats Preview Card Component Challenge from FrontendMentor">
|
|
</a>
|
|
<div class="card__content">
|
|
<h3 class="card__title">Stats Preview Card Component</h3>
|
|
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
<ul class="card__techUsed">
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card stacked">
|
|
<a href="./FrontendMentor/newbie/profile-card-component/">
|
|
<img class="card__img" src="./screenshots/fem-newbie-profile-card-component.jpeg" alt="Profile Card Component Challenge from FrontendMentor">
|
|
</a>
|
|
<div class="card__content">
|
|
<h3 class="card__title">Profile Card Component</h3>
|
|
<p class="card__description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
<ul class="card__techUsed">
|
|
<li>HTML</li>
|
|
<li>CSS</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="projectsDiv">
|
|
<div class="frontEndMentorChallenges">
|
|
<h2>Frontend Mentor Challenges</h2>
|
|
<div class="newbieChallenges">
|
|
<h3>Newbie Challenges</h3>
|
|
<ul>
|
|
<li><a href="./FrontendMentor/newbie/huddle-landing-page-with-single-introductory-section-master/index.html">Huddle Landing Page with a Single Introductory Section</a></li>
|
|
<li><a href="./FrontendMentor/newbie/ping-coming-soon-page-master/index.html">Ping Coming-Soon page</a></li>
|
|
<li><a href="./FrontendMentor/newbie/single-price-grid-component-master/index.html">Single Price Grid Component page</a></li>
|
|
<li><a href="./FrontendMentor/newbie/four-card-feature-section/index.html">Four Card Feature Section page</a></li>
|
|
<li><a href="./FrontendMentor/newbie/article-preview-component/index.html">Article Preview Component</a></li>
|
|
<li><a href="./FrontendMentor/newbie/stats-preview-card-component/index.html">Stats Preview Card Component</a></li>
|
|
<li><a href="./FrontendMentor/newbie/profile-card-component/">Profile Card Component</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="freecodeCampProjects">
|
|
<h2>FreecodeCamp</h2>
|
|
<div class="responsiveWebDesignProjects">
|
|
<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>
|
|
<ul>
|
|
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project1-TributePage/">Project 1 - Tribute Page</a></li>
|
|
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project2-BuildaSurveyForm/">Project 2 - Build a Survey Form</a></li>
|
|
<li><a href="./freeCodeCamp/responsive-web-design-projects/Project3-ProductLandingPage/">Project 3 - Product Landing Page</a></li>
|
|
<li><a href=""></a></li>
|
|
<li><a href=""></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="completeWebDev2020Projects">
|
|
<h2>Complete Web Development 2020</h2>
|
|
<p>coming soon</p>
|
|
</div>
|
|
<div class="vanillaJSProjects">
|
|
<h2>Vanilla JS Projects</h2>
|
|
<p>coming soon</p>
|
|
</div>
|
|
<div class="playground">
|
|
<h2>Playground</h2>
|
|
<p>Intended for just little snippets of code that look useful</p>
|
|
<a href="./playground.html">The Playground</a>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<!-- some blurb here -->
|
|
<p>All projects are the work of Robert McGovern, 2020-2022. <br>
|
|
<a href="emailto:work@tarasis.net">Email</a>, <a href="https://tarasis.net">Website/Blog</a></p>
|
|
<a href='http://www.heropatterns.com/'>Background SVG provided by Steve Schoger @ Hero Patterns</a>
|
|
</footer>
|
|
</body>
|
|
</html> |