Landing Page Design for Pepsi – Created Using Figma
October 2022
I designed a landing page for Pepsi. I included a hero section, nutritional facts, a call to action (CTA), images, a shadow, and ways to connect through social media. I aligned all sections to a grid and used the “tidy up” feature.
Landing Page Design for an App for Dog Walkers – Created Using Figma
September 2022
I designed a landing page for an app for dog walkers. I included a hero section, benefits/features, a testimonial, and a call to action (CTA).
Landing Page Website for an App for Dog Walkers – Created Using Webflow
September 2022
I used a web design tool to create a website and publish the site on the web. The website is a landing page for an app for dog walkers. It is a responsive site and I used CSS techniques, such as grid and flexbox.
Memory Game
I have created a Memory Game in which the player clicks to reveal colors of 2 boxes at a time. If the boxes match in color, the boxes remain that color. If they don’t match in color, the player tries again. It is made with HTML, CSS, and JavaScript.
Connect 4
I have created a Connect 4 Game using HTML, CSS, and JavaScript. Two players take turns and the first player with 4 pieces in a row wins the game.
Meme Generator
I have created a Meme Generator using JavaScript in which the user enters an Image URL, the text to appear on top of the meme, and the text to appear on the bottom of the meme. The user then clicks on “Create Meme” and a meme is generated. The user can create multiple memes that will appear together under the meme form. Additionally, each meme can be deleted as needed.
Registration Form
In this project, I built a responsive, mobile-friendly registration form for receiving news on orbital and suborbital flights. The form contains HTML, form input types, attributes, and flexbox responsive design. Using the supplied mockup files, I built a mobile and desktop version of the form using media queries and a “mobile-first” approach.
- I learned how to create HTML form elements including input types of text, email, tel, radio buttons, and checkbox items.
- I learned how to change the styling of focused elements, which can enhance the user experience.
- I learned Flexbox properties such as flex-direction, flex-grow, and flex-basis. Flexbox’s responsive design allows users to easily fill out the form on whichever screen size they are using.
Interactive Photo Gallery
For this project, I created an interactive photo gallery using JavaScript and jQuery. I utilized mockups as well as thumbnails and photos provided to me. The photos filter in real-time as the user types and photos are displayed that match the search. The layout is responsive and includes the Lightbox 2 Plugin.
Web Style Guide
For this project, I was provided a completed index.html and styles.css files. I converted the CSS into Sass by splitting the code into several Sass partial files. I stored values in Sass variables and created mixins. I added breakpoint locations for media queries, added Sass Map and List, added parent and nested selectors in multiple places with “&”, and utilized the modular file approach. I now have a useful Sass micro-framework to quickly prototype other websites.
Personal Profile Site 1
I customized a personal online profile by adding graphics, adding text, and improving the look of a web page using Cascading Style Sheets (CSS), the formatting language of the web.
- I learned how to transform the profile image on hover so it would scale and rotate to give a bit of fun interaction with the page. It’s important for the scale and rotation to add to the page in a positive and engaging manner.
- I learned consistency among the web pages are important to create a theme for the website. This includes the design, the header, colors, and fonts.
- I learned how to include images, give class names, and style the images so they are rounded at the corners and have a border.
Animal Trading Card
For this project, I used HTML and CSS to create a trading card featuring an animal and information about that animal.
News Dashboard
I built a news dashboard utilizing the NYTimes API in which news headlines, summaries of the article, and a picture from the article are populated. The news headline is a link that will lead users to read the full article at www.nytimes.com.
Live Code Editor
I built a live code editor. I learned how to use the iframe tag. I also learned how to use JavaScript event listener onkeyup to write in the values for the HTML, CSS, and JavaScript and compile the result.
To-Do List Application
I built a simple, useful web app for tasks with HTML, CSS, and JavaScript. I learned how to use local storage for list items to stay even after the window is closed.
Profile Site – Mobile-first Responsive Layout
The project required building a responsive, mobile-first layout using HTML and CSS. The layout demonstrates an understanding of responsive design by adjusting to accommodate small, medium, and large screen sizes.
The project required writing CSS to style the page for a small mobile device first. Then, using min-width media queries to add breakpoints to adjust the layout for wider tablet and desktop screens.
- I learned how to include media queries for screen sizes 768px and 1024px.
- I learned how to include the float property, display property, as well as how to target sibling selectors.
- I learned how to add a fixed header.
My WordPress Blog
I created this blog to document my learnings and to teach others technical topics in HTML, CSS, JavaScript, and Python. I maintained the blog until April 2020.
Madlibs
I have created a Madlibs game using Python and Flask. I have defined the Madlibs stories and the application will generate the resulting story from a set of answers. For debugging, I used ipython as well as the Flask Debug Toolbar. The form route asks all the questions required by the story and the /story route shows the resulting story for those answers. I have used template inheritance with base.html.
Personal Website
I built a personal website using HTML, CSS, and JavaScript. I used Netlify to add my site, link to my GitHub, and set it up for continuous deployment. I have included an active form on the site that collects and saves data to Netlify. When the user presses “d”, the site changes to dark mode.