designbright / quick-sneakers

Create a one page website from a mockup using basic HTML, CSS, and Javascript

Quick-Sneakers

Create a one page website from a mockup using basic HTML, CSS, and Javascript

This project was my first ever attempt at creating a website from scratch. I took a coding class in Raleigh, NC that met every weeknight from 6:00pm - 9:00pm for two weeks. My class had about 15 students who all had no prior coding experience. As part of the learning experience, we used this project to learn the basic componets of HTML, CSS, and Javascript. Each day the class met, we would have specific learning objectives that I have outlined below.

If you are new to coding, this is a great place to start! Feel free to fork my project and play around with it.

Here are some tools that you will need to get started: A text editor - this is where you will actually write and edit your code (I used Atom for my project) Chrome -use this specifically instead of Firefox, Internet Explorer, etc. because Chrome has a tool called "Developer Tool" that allows you to see exactly what is happening in the browser when your HTML content is rendered to the page. This tool is helpful for debugging MacBook (you can use any computer, but I prefer a Mac environment) A GitHub account -In addition to learning how to code, we also learned how to use GitHub which is a tool for developers who want to share their code with the community.

Description One of the basic, foundational skills in being a professional web developer is the translation of a designer's mockup image into a webpage with HTML and CSS.

View my final project here

https://designbright.github.io/Quick-Sneakers/

PROJECT BREAKDOWN AND PROCESS

1. Use HTML and CSS to create the following using the mockup provided: The site header The product image area The product pricing/description area The footer

   Learning Outcomes: Create A New Project Push Your Work to Github Submit a link to your Github Project

2. Using HTML and CSS, create the following: Tabbed content area Related product area

   *Focus on writing the HTML for each area and adding some basic styles to it. Make sure you start to get your elements laid out properly using margin, padding etc.

3. Layout all elements on the page using the CSS layout techniques: Website should be mostly complete minus the functionality of the tabbed area and the add to cart button.

4. Add two pieces of functionality to site: Add functionality so when a user clicks the Add to Cart button, it will change the text of the button to say "Added to Cart" for a moment and also increase the count of items in the cart in the top right of the screen. Add functionality for the "tabbed details" under the product image and description.