Learning Plan 2: Standards & Specifications

Progressive Web Apps

Description

Use a tutorial to create your first progressive web app.

Alert: This link should be tested with a mobile device for the best experience.

Reflection Statement

Previously, I was unfamiliar with PWAs. This was my first time completing one. It was not as hard as I thought it would be. I still have questions about using other tools like node.js, Firebase, etc.

Resources

PWA Documentation

Description

This webpage documents the standards and specifications of the Progressive Web App that I coded.

Reflection Statement

I have previous experience with documenting standards and specifications of websites. I had an issue with getting the screenshots to open in the same window and including the close button. Other than that, I had no issues. I would still like to learn how to open images in the same window with less code.

Parallax Scroll Website

Description

This webpage is an example of a parallax scroll website. I added an animated h1 title to the header with a Hero image, and a Google map for the end slide.

Reflection Statement

I have previous experience reading about parallax scroll websites but little knowledge about completing one. It was not as hard as I thought it would be. I had a hard time trying to resize the map and making it responsive, and also making the navigation responsive for mobile. I did learn to be a problem-solver by researching how to fix the issues I encountered.

Resources

Parallax Scroll Documentation

Innovation and Expansion of Skills

With a parallax scroll website, you add background images, so I also included the hero. Adding a responsive header with a menu and logo was challenging since I prefer not to use an unordered list for navigation. The CSS for the Google map gave me some issues but I went through the CSS line by line until I was satisfied with the results.

Web Coding and Design Standards

I used Chrome for development and the W3C Nu HTML Checker and CSS validation service for validation. HTML semantic tags, image alt attributes, and meta tag data are all present. The website is SEO optimized and mobile responsive.