Portfolio Project Documentation Page

Each project has an introduction page or section that contains a thumbnail image of the project, a descriptive paragraph about the project, a link to the project, a link to the scoring guide for the project and a reflection statement.

Introduction Page

Page Introduction

Project Introduction

Project Section

Descriptive wording is used for each project in headings, labels and navigation menus.

Menu

Menu

Sample Headings

Sample Headings

98% of the pages demonstrate web standards and specifications.

HTML Validator

HTML Validator

CSS Validator

CSS Validator

Accessibility Validator

Accessibility Validator

Accessibility Error

Accessibility Error

This label is supposed to be empty for the menu.

Design elements such as navigation, footer information, typography, body text, headings, graphics, links and color are balanced, practical, and aesthetic in order to create unity and consistency resulting in a harmonious visual appearance in main site.

Top Elements

Top Elements

Bottom Elements

Bottom Elements

Site is 100% functional in any two browsers of your choice.

Google Chrome

Google Chrome

Firefox

Firefox

Final Project documentation is included in a separate web page with a link provided on the site.

Project Link

Project Link

Project Documentation Page

Project Documentation Page
bj

Class Reflection Statement

The experience I had in this class was very educational. I was able to work on subjects that I was interested in but never got the chance to code. I also was able to work on and learn about some new topics that I did not know about, like PWAs. It was fun to learn about these new topics, especially WebVR.

The only difficulties I had was trying to export my code from the software project. I made a web app using Flutter but I did no see how to show it on a website. For this reason, I decided to use Bootstrap Studio as a software project.

If I had more time, I would probably try to improve on the project I have already completed. I would also add more projects to try to reinforce what I have already learned. I made a sample portfolio website to add this website to, along with some of the other classes I had projects in.

What I plan to do to expand my learning on the topics covered in this class is to keep building websites, apps, and PWA. I am always trying to find something to code that is different from what I usually work on. I would like to gain more advanced knowledge of these topics.

The plans I have to expand into topics we didn't cover but I would like to, is to try to learn at least one new trend or software a month. I feel that will give me an opportunity to find more topics of interest and increase my skillset. I would also like to try more of the resources that were presented in the discussions. I found some to be very valuable, and some were new to me.

Project Resources

10 Web Design Trends That Every Developer Should Know
10 Web Design Trends to Expect in 2022
20 Latest Web Design Trends & Forecasts for 2022/2023 You Should Know
UX Design
Interaction-Design
W3Schools
Smashing Magazine
Horizontal Scrolling
Pure CSS Horizontal Scrolling Website Tutorial
How to Create a Horizontal Scrolling Website Advanced Pro
How to Build a PWA From Scratch With HTML, CSS, and JavaScript
What is a PWA? Progressive Web Apps for Beginners
A Beginners Guide to Progressive Web Apps
PWA Checklist & Best Practices - Progressive Web App Requirements
Animate.css
Maps.ie
W3cschools.com: How to create a parallax scrolling effect.
W3cschools.com: How to create a hero image.
A-Frame School Registry Glitch Me Solution
A-Frame Introduction
A-Frame School
How To - Responsive Iframe
How To - Scroll Back to Top Button
Bootstrap Studio
Back to Top ↑