oliviagrce/confectionery-website-prototype

Create a wireframe/prototype for a confectionery website—showing what you learned this term.

confectionery-website-prototype's Issues

Request for Grade

Going into the final project, I hadn't planned on completing the website because of how poorly I was doing in this class. I didn't think I could competently build a website. It would take me an average of 3 hours to write code and please markbot on excercises that were listed as approximate completion time: 1 hour". It has been struggle street.

But someone in the class encouraged me to build a website and he would help me out a bit. I gave it a go and he gave me a really basic skeleton of code. It wasn't a copy of his website, but it helped me to get started. I spent 2 days at Starbucks (morning to evening) and a lot of late nights, trying to "crack the code" and I found that eventually, I started to fix problems I'd had in the past just by keeping at it. I ended up not using any of the code he gave me because I was slowly figuring it out for myself and designing the layout I'd drawn in class. I'm really proud of that.

My website proves that I can create a responsive website that functions across all devices - even though it still might be a bit awkward.
Here are some elements I used and styled successfully in my code:

• Header
• Nav
• UL/LIs
• DL/DDs/DTs
• image flex
• images that retain their size even though the browser changes
• style a link card (the chocolate making classes)
• applying max and min widths on elements so they retain their integrity and limit awkwardness
• Creating buttons (a hrefs) and styling them.
• Creating a footer with social icons
• Responsive header. Getting it to change on different browser and still retain its integrity.

Flexbox was also the main street on struggle street. I couldn't wrap my head around it but I keep like I've somewhat grasped the concept in this project. The best examples of my understanding of it are under the css elements ".img-flex", the header ul, and in the header (under 60em media query).

I actually successfully applied position relative to an image and position absolute to an h1 on the first try and made the h1 sit center, on top of the image. I removed it in the end though because I felt that it didn't have great readability and I wanted my h1 to stand out enough on all browsers.

On a sliding scale I'd give myself either a B+ or an A, purely for how much I struggled compared to how it looks now. I didn't think I'd be able to create the website I did.

Looks great!

Maybe adjust the spacing between your "contact us" box and the footer

Looks great!

Tested on Safari browser

Looks Great

Contact button at the bottom is stuck on the left side on mobile using the opera app.