LP3 Projects


LP3 Projects Part 1

WebVR Web Virtual Reality

WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser.

LP3 Projects Part 1 Class Selected Project

In Learning Plan 3 Part 1, I managed to create a WebVR. I added spheres, cubes, boxes, cylinder, and sky. I added a source to link to the framework between the opening and closing script tag. I used A-Frame to complete my WebVR pages.

WebVR Cubes

WebVR Shapes

WebVR View

LP3 Part 1 Reflection

    In this learning plan, I learned how to create a WebVR by using it with A-Frame. I created Cubes, Shapes, and View WebVR page. For the Cubes page, I added all boxes on the three boxes and turned them into cubes when I rotated and scaled them. I changed my background from white to black by adding in an external stylesheet. The first thing I had to do before creating my WebVR pages was to add the A-Frame extension in the script tag and the a-scene to create movement throughout the site. After that, I added the shapes I wanted and customized them with different colors. For the Shapes page, I added a a-box for the square, a-sphere for the circle, a-plane for the base of the shapes, and a-cylinder for the cylinder shape. For the View page, I created an a-box for the square and got rid of the a-cursor because I thought it eliminated the way of the a-box. The added a sky background image to my View page and you can view it in 360. The one thing I want to learn more about is how you can create a better 360 WebVR in A-Frame. This was very fun to learn, and I hope to experience more on what A-Frame, or any other WebVR Framework has to offer.

LP3 Part 1 Resources

WebVR Information

5 ways VR is changing web design today

WebVR is becoming WebXR to make a simple, unified framework for all devices

WebVR in the Browser

WebVR Directory

WebVR Examples

How to Get Started With WebVR

An Introduction to WebVR

Building in WebVR makes VR Easy

Getting Started with WebVR

A-Frame

PlayCanvas

Sketchfab

Vizor

WebXR: Everything you need to know

Building an augmented reality (AR) application using the WebXR Device API

LP3 Part 2 Software Project

Foundation 6

In Learning Plan Part 2, I learned how to create a web page with a software framework called Foundation 6. Foundation is the most advanced responsive front-end framework in the world. It is a responsive front-end framework. I manage customized many classes in the my own stylesheet and learned how to create buttons, navigations for desktop and mobile, customize my stylesheet without changing the Foundation.css file, and more.

Foundation 6 Framework

LP3 Part 2 Reflection

    In this learning plan, I learned how to create a web page using a software framework called Foundation. Foundation is a responsive front-end framework that is the most advanced framework in the world. Before this project, I never knew anything about Foundation other than it being a framework and all. I managed to create a mobile menu which helps users to view navigation links a lot easier on mobile devices than keeping the links as a display inline. I made my section into columns with a class of small-12 and medium-5 size. I created a nav-desktop class to make my background color transparent to my title-bar "Patrick Mangan". I added a hero image called double-bubble-dark to match the theme of my site. I downloaded the background image from the Toptal Subtle Patterns website. I made my navigation links to be linked my an id so that you can stay on the same page. I added a "Back To Top" button so that it's faster to scroll up to the top instead of scrolling up manually. The Learn More button links to the Foundation home page while the Call To Action button links to the Contact Information in the footer area. I also added a Site Map, Contact Information, Social Media, and Resources to my footer area. This was a fun software project to work with. Someday, I want to be a Pro at creating web pages with different software frameworks.

LP3 Part 1 Resources

Foundation 6

Foundation Documentation Tutorial

Foundation VS Bootstrap

Subtle Patterns

Make a Basic Website with Foundations 6