In the class, I got introduced and learned HTML and CSS. I used visual studio code to learn how to create web pages. For our final project, in groups we call collaborated together to create a website and app mockup. My group used Visual Studio Code and Figma for our protype mockup.

Final Lab

This is a web page that I created from scratch using HTML and CSS from Visual Studio Code. From this lab I learned the fundamentals about how to lay a webpage out, styles, background images, and multi-column layouts. Here is what I created, a column page layout on Seattle, Washington where the links on the page take you where I get the information.

Here is my webpage I created from scratch using Visual Studio Code

Here is my webpage I created from scratch using Visual Studio Code

Final Project

Description: For our project we were assigned to create an app and website mockup by using tools such as Adobe Illustrator, Figma, and HTML and CSS to program it in a group.

Our Idea: In my group we decided to create a app and website mockup for music genres. Where you click on the genre you want, it leads to a playlist created by Spotify.

Our Process

  1. Start creating the mock up in Figma(includes layout and icons for each music genre).
  2. Individually create a playlist on the genre. My genre was pop so I created the playlist for pop music in Spotify.
  3. Create the webpages of each genre.
  4. Link all of the pages together along with the home page.

The Final Look

https://themusicshoppe.github.io/music/index.html

Untitled

My contributions:

Untitled

I created this soda can through Adobe Illustrator for my Pop webpage.

Figma Mockup

Here is our Figma Mockup for the home page and the separate genre pages

Here is our Figma Mockup for the home page and the separate genre pages

Pop Genre Page

In our group, we each created a webpage designed specifically for our genre. As my genre was Pop I created the layout of the webpage with the playlist, and pictures of featured artists. The link above will take you to this page.

This is the Pop genre page I made using HTML and CSS through the app Visual Studio Code

This is the Pop genre page I made using HTML and CSS through the app Visual Studio Code

Reflections/Contribution

In this class I was able to learn so many things like HTML/CSS, the important aspects of designing webpages, and collaborating with teammates. The skills I improved during this class experience are more knowledge on technical skills, better teamwork, perseverance, creativity, and determination. I put 100% in all of my lab assignments and worked and contributed very well for my final group project.