Here’s a collection of my work, showcasing some of the projects I’m most proud of.
I designed a project with the primary focus of demonstrating my skills and understanding in front-end web development. I chose to redesign the website for a local bagel shop, Bagels & Beyond, because I had identified user experience and design flaws while personally using the website and believed I could create a more effective design.
I drew inspiration from multiple webpage designs, but used the website for Einstein Bros. Bagels as a strong reference since it is a similar brand with similar products to Bagels & Beyond.
I began by planning the project out in a project brief, where I outlined each step and when they would be completed. I created low-fidelity wireframes for the pages I chose to redesign in Figma and chose my color scheme and fonts. I then created high-fidelity wireframes so I would have a polished mockup I could follow while writing my HTML and CSS. I first wrote my HTML for the home page, menu page, and about page, validating frequently. I then recreated my high-fidelity wireframe designs using advanced CSS, continuously testing the site for functionality and visual consistency. Once I was satisfied with the final product, I published the site on GitHub.
My overall goal was to make the website for Bagels & Beyond more user-friendly and visually appealing, and I believe my redesign achieved this. I improved user-flow and completely revamped the visuals of the site. There were some instances during the project where I did not stick to my deadlines, but the project was ultimately completed on time. The project can be viewed on my GitHub.
For one of my projects, I needed to make a website that included a product display, a guessing game, and a contact form. The site also needed to include a dark/light mode feature. I decided to make a product page for my favorite Red Bull flavors, using Javascript to achieve the requirements.
I used Red Bull’s website page for their Edition flavors as a reference so I could use similar colors and design elements.
For this project, I jumped right into writing my index.html page once I had an idea of what I was going to design. Once I had the content laid out, I styled the page, being sure to be conscious of the dark/light mode displays. I then made the site function properly by writing my Javascript sheet, making it so the product display section would display the selected product and hide others; the guessing game section allows the user to input a number only between 1-10, generates a random winning number, and tells the user if they guessed correctly; and the contact form section displays proper error messages and displays the user information in a confirmation message once the form is submitted. I tested the site for functionality and syntax validation, published the site on GitHub, and then posted a project brief on Behance.
The project met the requirements of the assignment and also demonstrated my understanding of Javascript fundamentals. I completed the project on time, but wish I had started sooner on it so that I could have better planned out the project and had a more polished design. The project can be found on my GitHub and Behance profiles.
For this project, I was provided with the content for the webpage and needed to recreate the mockups using HTML and CSS. This project demonstrates my skills in responsive web design, attention to detail, and understanding of SEO and accessibility in webpages.
Since I needed to recreate the mockups exactly, I did not need to seek design inspiration.
I began by creating my repository with the provided content, first working on the index.html file and adding meta tags, a skip link, and HTML markup where necessary. Once I was finished with the HTML markup, I validated the code and moved on to CSS. I started with small styles, following the markup exactly. I completed medium, large, and x-large styles afterwards, making sure all screen sizes matched their respective markups. I also made the dark/light mode feature functional.
The final outcome of the project was a website that matched the provided mockups exactly and demonstrated my understanding of key concepts from the course. I completed the project on time, but needed to go back after submitting to fix minor errors, such as missing styling for users who prefer reduced-motion. The project can be viewed on my GitHub.