Role
Background
Challenge
Generate initial sketches of an existing website that will allow you to identify and compose appropriate semantic markup (HTML5) and styling (CSS). Your code should demonstrate responsive behavior for at least two screens (e.g., desktop and mobile), even if the initial site you choose does not include this behavior. You should plan for the responsive behavior of your prototype from the beginning of your design process, and ensure its proper functioning by testing on multiple browsers and screen sizes.
Introduction
The website I decided to recreate their existing site was www.Nike.com. Although many may know the company for shoes, they sell way more than that. They sell shoes, clothes, accessories, and are sponsored by other major companies like Converse and Jordan. With having all of that content, they had a long website that contained of many images and text. Nike did not have a responsive site, but it was my challenge to make the site responsive from desktop to mobile size. It took many steps to create my coding prototype, such as: sketches, wireframes, and a complete responsive coding prototype.
Annotated Sketches/Wireframes
This sketch was my first step into making my site. I first sketched out the structure of the Nike website then I annotated it, using HTML5 semantics.
HTML5 Elements/CSS Selectors
These are the different HTML5 Elements and CSS Selectors that I used in my code/site.
Comparison of Nike Site to My Site
The Nike website changed everyday, but most of the content stayed the same. I did my best to match the look from the first time I seen the Nike site when sketching out the structure of the site.
Reflection
Previously, I learned HTML/CSS at my old school, but I never learned how to use it with a framework and/or using a separate file for your css. Unfortunately, it was hard to get back in the swing of things plus having to learn how to use a framework. In the beginning, I was not using a framework until I came across some difficulties that I had when getting text and images in separate columns. It was easier to use a framework, so that way you can call out the “row” and/or “column”. This was a time consuming exercise that took more than what I expected. It was more like a trial and error type of game because if one thing didn’t show up, then you had to try again and again until what you wanted was there. Also, coding is very nit-picky with everything you type. Just because you have one word spelled wrong or missing a “”, the code doesn’t read what you are trying to say. When I learned how to code in the past, it was hard for me to understand the material and how to implement it on the page.
Overall, it was a hard exercise that I needed the most attention out of the other exercise and project.
Patricia Mata 