The Tribute Project
Code Editor Used: Visual Studio Code
Languages Used: HTML5 & internal CSS
Details: I had to replicate the article using Visual Studio Code. Explain how I used HTML and internal CSS to closely match the article’s design. I highlighted the importance of keeping our project folder organized. I implemented the styles internally within the HTML file. I learned the basics of applying HTML and CSS internally. I also learned how to navigate in affinity photos.
The Client Blog
Code Editor Used: Visual Studio Code
Languages Used: HTML5 & External CSS
Details: I was assigned a partner who acted as my client. I interviewed my client. Next, I named and titled the blog post. I also selected 2 colors for the website. I had to fill out the graphic design worksheet, create project folders, and gather images and content. I edited Pixabay images to an appropriate size using Affinity Photo. I set up my HTML document using semantic elements. I learned the importance of conducting the proper research to ensure the design meets the client’s desired design.
UX Project
Languages or design software: Figma, Affinity Photo, Google Slides
Details: I was on a team assignment with 5 members. As a designer, I had to use User Experience Design research methods and processes to improve the shopping experience on https://www.baskinrobbins.com. Baskin Robbins would like to enhance the shopping experience on their desktop website and reduce the number of calls made to store locations. I had to sketch wireframes, including edits made to the site. I created a high-fidelity wireframe version and a prototype by making screens clickable on Figma. I utilized a heuristic evaluation, comparative/competitive analysis, and 2 user personas. I conducted 2 user tests, a final test, and the next steps. I learned that solid communication between team members brings solid results.
Bootstrap Website Magnificent Sea Creatures
Code Editor Used: Visual Studio Code
Languages Used: HTML5 & External CSS
Details: I had to create a one-page Bootstrap layout by copying, pasting, and modifying the code from Bootstrap. To create a responsive website across all media viewports with a dynamic and flexible layout, I had to include 2 images, navigation, a container, and a mixed mobile and desktop grid system using responsive units. I also had to include a One Card Component, One CTA button, H1, H2, H3 tags, and Lorem ipsum text. I learned the basics of Bootstrap and
having a responsive design.
Fresh Eats
Code Editor Used: Visual Studio Code
Languages Used: HTML5 & CSS
Details: I designed and coded a one-page website for my client, Fresh Eats, a fictional food delivery service, using responsive units and the latest version of Bootstrap. I used a logo and stuck to one of the color palettes. The header section included a navigation menu. The Choose a Plan section needed to showcase 4 different meal images featuring fresh and healthy options. The footer section needed to contain contact info and a copyright symbol. The contact info included a mail link. The website required a minimum of one background image that works seamlessly across all device sizes. I also needed to choose 2 Google Fonts, and the buttons should have hover states. I must use a minimum of 5 images. Bonus points included adding social media icons/buttons using Font Awesome, creating a multi-column footer area with 2-4 columns of content using Bootstrap Grid, and adding a Bootstrap carousel for testimonials or meal highlights. I learned how to create a more dynamic and responsive website by implementing extensive Bootstrap into my design. This saved more time, gave my site a consistent layout, and made the site easy to customize.