Student: Anoop Kaur 

Course: Women in Cyber Academy 

Modules: HTML, CSS and JavaScript 

 

Creating a food blog

Through HTML, CSS and JavaScript I have created a food blog, here users can find recipes and restaurant recommendations. Before writing any code, I outlined a paper plan of the initial website design. Browsing through various food blogs allowed me to gain inspiration for my
website, I’d then incorporate these into my paper outline.

Now for the implementation! I created a HTML document for each page of the website, this consisted of the actual content. In order to style the web page I linked a CSS file to my HTML document, this allowed for the customisation of each element in the website. It’s possible to
have added CSS directly into the HTML file through inline styling, however, to keep things clear I opted for an external CSS file.

The Home Page
The front page was split into a navigation bar, “Current Favourites” (main content) and an “About Me” section.
These sections are reflected in the HTML code below.

The Meal Menu
This page allows the user to filter through recipes based on the meal of the day.
Through CSS the meal title is revealed when the user hovers over the image.

Once a meal is selected, a recipe page opens up:

The Subscribe Form
For the subscribe form I tried to incorporate some JavaScript.
When the text field is clicked, JavaScript causes the bottom line to enlarge and turn pink.