Portfolio

A Tribute to Ada Lovelace

• Code Editor Used:
  1. Visual Studio Code
  2. Affinity Photo 
• Languages Used:
  1. HTML
  2. CSS
• Details: Our assignment was to recreate an article highlighting Ada Lovelace as the first computer programmer and 19th-century mathematician. The article is the timeline of Ada Lovelace’s life and her numerous accomplishments throughout her career. This solo project used Visual Studios code editor to create the HTML code and CSS and implement semantic elements to allow a more organized and clean HTML code. 

Client Blog: Urban Gardening

• Code Editor Used:
  • Visual Studio 
• Languages Used:
  • HTML
  • CSS
• Details:  For this assignment, each member was assigned a partner to interview as a potential client who wants to start a blog. This interview consists of a series of questions that allow the developer to understand better the client’s likes and dislikes, such as preferred fonts and colors and any necessary features and images they would like placed on the webpage. This will allow me as the developer to implement the needed principles and design styles that best represent who the client is and their targeted audience  Based on the information gathered from the interview, we created three wireframes showcasing different design options for the client’s website. We presented these wireframes to the client for approval and feedback. Once the design was approved, we started developing the webpage, ensuring the client’s preferences were met. Throughout the development process, using semantic elements whenever possible and necessary. Semantic elements help improve the structure and readability of the website, making it more accessible to users and search engines. As well as the client’s preferred colors, images, and text fonts. Overall, the collaboration between the web developer and client was successful, by incorporating the client’s input and using semantic elements, we were able to deliver a website that the client loved.

UX Project: Sprinkles: UX presentation.

1. Code Editor Used:
   • Visual Studio Code
2. Languages or design software Used:
   • HTML
   • CSS

 For this assignment, we were assigned to groups of four where each individual was tasked with a specific assignment to run a User experience test. Our group task was to figure out a way to create a better user experience for Sprinkle’s Cupcake company during online purchasing. Sprinkles Hr has been receiving a lot of complaints from their online clientele about their confusing layout and extra long checkout process. Our team decided to conduct a Competitive and Comparative Analysis where we answered a series of questions such as How long would it take to purchase a birthday cake or cupcakes, the number of steps it takes to complete an order, and whether the user is required to check as a guest or do you have to sign-in. These are just a few of the questions we were concerned about once we gathered all the information needed we compared the Sprinkles website results to two other bakery websites that specialize in cakes. This helps us narrow down what features we may or may not benefit from adding to the webpage. To ensure a timely all members were given two to three tasks to monitor while one member pretended to make the purchases. Once they successfully “purchased” their cupcakes from each bakery website we then transferred all of the information we gathered onto a spreadsheet labeling each concern we wanted to test on the webpage’s current design horizontally and across the top were the bakery names. The next step was to do two heuristic evaluations on either our personas or two other members where we will ask them the same questions that we answered on the comparison analysis but in their own words and based on their individual experience about each bakeries webpage. Lastly, each person was given a final task to complete and a section to speak about during our presentation I was tasked with creating two high-and-low fidelity wireframes, designing the presentation, and speaking about our user personas during the presentation.

Bootstrap Website: Earthly

1. Code Editor Used:
   • Visual Studio Code
   • `Bootstrap
2. Languages Used:
   • HTML
   • CSS

Details: For this assignment, we were placed into groups of two and created a website using Bootstrap. We used Bootstrap to create a website layout and CSS to style. Bootstrap is one of the most popular HTML, CSS, and Javascript frameworks for developing responsive layouts starting with the mobile viewpoint first. Based on the checklist given we began writing our HTML code using semantic elements when necessary. 

Fresh Eats

• Code Editor Used:
  • Visual Studio Code
  • Affinity photo
• Languages Used:
  • HTML
  • CSS
  • SCSS

Details: 

For this assignment, our task is to try and create a simple one-page responsive layout for a food service company named Fresheats. They are requesting a simple and eye-catching webpage design. That will allow the clients to have a smooth and effortless experience and checkout. For this assignment, we were given some of the materials needed to create the webpage and tasked with getting anything else we needed. It is best to begin by collecting all the required material you will need such as wireframes, images, folder location, and colors you gonna want to use. Once you have gathered all the pieces of information needed to create your design we will get them approved to begin coding. Making sure your photos are the size you want and in the location you specified on your laptop is extremely important. For this project, we are using SCSS, HTML5, and CSS in Visual Studio Code. To begin the webpage we added the HTML 5 code to get our first few lines going and added the necessary links to stylesheets and our choice of Google fonts. Next, I used the necessary elements to create a frame for my webpage. Fill in the <body> tags, adding a <footer>, and placing <img> tags where I would like them to be. Once this step is completed, we can add colors and sizes to things using CSS and SCSS. The features used here are hex colors, hover features for our buttons, and mixins that can assist with your webpage and allow you to reuse codes you need without retyping the code over and over.