Website Redesign

In this project, I decomposed one page from an existing website and wrote appropriate semantic markup (HTML5) and styling (CSS) to recreate the site in robust, readable, and appropriate code. My code includes responsive behavior for at least two screens (e.g., desktop and mobile). Use of web frameworks such as Skeleton, Boilerplate, or Bootstrap are allowed, but not required.

Before

This is the home page of Cold Stone's webpage.

This screenshot showcases different features that Cold Stone's website offers such as ordering, rewards, and gift cards.

This screenshot showcases Cold Stone's text styles.

This screenshot showcases Cold Stone's footer.

What I Did...

The screenshot above showcases the different features I would like to describe. First, the image of the ice cream cup was moved to the right side of the screen. Second, I included a red background color. Finally, I also included a button that would allow the user to make an order. The photo was moved to the right of the screen to allow the user to comfortably read the information and then find the photo that corresponds with the text provided. I included more color to the webpage to make the webpage more exciting to the user.

This screenshot shows information on a certain item that a customer can purchase through Cold Stone's website. I wanted to showcase it and keep the color scheme that Cold Stone has. I believe that having popular or new items on the menu should be more emphasized.

This screenshot shows another flavor that is in relation to the season of the year. I thought it would be helpful for the user to have buttons where they order the item.

Once you scroll down, you can see various cards with information and pictures that correspond. This allowed the webpage to be more organized and allow the user to find any specific information they required.

The photo above showcases the footer information. The footer included various links. The links are colored red to stand out to the user as well as align with the color scheme of Cold Stone Creamery.

HTML Elements Included In The Project

Basic HTML: head, meta, title, body, footer, and link
nav: The nav tag references the navigation bar. I used two nav tags for my header and my footer.
div: A div defines a section in the HTML. I used div tags to separate various parts of my webpage.
a: This is a hyperlink tag. I included these because I have various links throughout my HTML.
img: I included various images.
button: I included various buttons throughout my HTML.
li: I included various links throughout my HTML.
ul: I included various unordered lists throughout my HTML.
h: I included various headings (h1, h2, etc) throughout my HTML.
p: I included paragraph text throughout my HTLM.

CSS Elements Included In The Project

Fluid: This makes the content responsive. I used this to make different parts of the webpage responsive.
Width: I used this CSS to help format various images and text.
Height: I used this CSS to help format various images and text.
Me-auto: This means margin-right auto. I used this to create a margin for my webpage.
Mb (text): This CSS is also used for margin.
Lg (large): I used this CSS to format different columns and images.
Fw (font-weight): I used this CSS to change different font weights.
Btn (button)-outline: I used this CSS to outline some of my buttons.
Text-bg (background): I used this CSS to change the color of some text backgrounds.
Padding: I formatted different parts of the webpage to have different padding to help make the information easier to read.
Float-end: I used this to move some images and text to the right side of the webpage.
D-block: This CSS helped me display some images more properly.
Col (Column): I used column CSS to organize different information.
Light: I used this color for different buttons and links.
Danger: I used this color a lot for buttons, links, and background colors.
Dark: I used this color for my footer.
Text-center: I centered some text throughout my webpage.
Opacity: I wanted to change the opacity of some links when a user hovers over them.
Hover: I used this CSS to allow the user to see when they go over a link with their cursor.
Text-start: I used this CSS to make some text go to the left.

Looking Back on the Project

This exercise was difficult. I had not had much experience with coding my own webpage. I also have not had much experience making webpages responsive. This being said, I enjoyed some of the process of figuring out Bootstrap. Bootstrap was an immense help to me in making my webpage responsive and look good. If I had more time in this exercise, I would have figured out how to wrap the text in my footer so that it does not spill out of its container. I could not figure out how to fix this problem. I also would have spent more time working with the spacing of my webpage, as well as improving the layout of the webpage. I had a major setback with this project when I realized that I could make the webpage look much better. Once I saw Starbucks’ website, I knew I had to make it look similar. This took much time, however, I am very happy with this decision. I think my webpage looks much better than it did before. I think this exercise helped me immensely get more comfortable with HTML and CSS, as well as Bootstrap. I will most definitely be using Bootstrap again if I need to code a website.