Developing the HTML and CSS of a recipe web page

About

At Ironhack, UXUI students have a 3-day course dedicated to familiarize themselves with Web Developing from the designer’s point of view, focusing on the introduction to HTML5 and CSS.

At the end of the week, we do a mini-hackathon, in which we received a brief and had 6 hours to code from scratch a simulation recipe page on a culinary blog. Bruno Araujo and I formed a dynamic duo and delivered a page from the next world-famous confectionery blog, the Cookie Show.

Process

As we are in the learning phase, we decided to take inspiration from an existing website and try to understand the existing code instead of creating one from scratch.

The site we choose was Love and Lemons Shortbread Cookies

We began exploring, breaking and defining the structure of the original site for the HTML5.

Then, we investigated the code of the existing website to understand its process and how it was constructed.

We created a style guide for with color, sizes and fonts to be used in the CSS phase.

We encountered some difficulties trying to replicate the original site, such as paragraph spacing, links, imagery placement and size. We also did not add the adds and social media icons as displayed in the original site.

Coding

Still in the process of being uploaded to GitHub

Outcomes

This was my very first time touching Github and learning the basics of coding. We had 6 hours to put in practice what we had learned in theory for 3 days.
The learning curve was a little slower for me than for my partner, who already had experience and that’s why I opted for this strategy of replicating instead of creating from scratch. However, if it weren’t for this exercise, I probably wouldn’t have been aware of the importance of understanding at least superficially HTML and CSS for better communication with the developers of UXUI projects.

This publication is part of my journey as a student of UX / UI Design Bootcamp at Ironhack.

Do you have any feedback? Contact me on LinkedIn.

Thanks for reading ✌

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yan Li

Yan Li

69 Followers

This is a series of publications documenting my journey evolving from Interior Architecture to Product Design | UXUI.