Make-up of a website

Let’s take a ride into the world of cosmetics and web development.

Our Goal
Our Realizable Goal

There are 3 parts to any website: HTML, CSS, and JavaScript

HTML and Javascript consist of our base and CSS (Cascading Style Sheets) is what we use to make our website look pretty.

HTML (Hyperlink Text Markup Language) is one of two essential building blocks of any website. HTML is used to describe the content of the website you are building. It uses “tags” to build websites. A tag is a keyword that enables your browser to format content of your website. You can add attributes to the tag to customize your content.

The components of our application will consist of 5 unique tags(<body>,<form>,<label>,<input>,<br>). We have two labels to display instructions and output and another to display the user input. The input tag will take different inputs from the user and processes the data depending on the “type” attribute.

Our example HTML

Within the realm of cosmetics, the HTML of our face consists of <nose>,<eyes>, <skin>, etc.

JavaScript defines functionality of the website. It works with HTML to display the content of the page and changes the content based on the logic operations we perform on the data.

Side: JavaScript is not Java. They are completely different

Within our application the function showInput() takes the value from the input field whose “id” was “user_input” and displays the data in the field with the id “display”

Javascript give the parts of our face functionality. Some of the functions would be smell(), hear(), see().

Now we have the basic parts of the face and functionality set let’s crack open our make-up bag.

CSS is what we use to make everything look nice. In our application, we decided to put on a little eyeliner and make some font bold by using the “class” attribute.

The CSS for our face would consist of .eyeshadow, .lip-stick, and .blush. We can set the colors within our CSS file and have our HTML display the colors.

CSS is ultimately the palette we use to make our website go from good to great. We can always go without CSS but everyone always asks why your website looks so tired.

Our application was the start of our journey into being a make-up guru. It may not look like much now but eventually we can make websites with the sharpest of wingtips.

Our Result

Heres a demo for the application that was just built: https://repl.it/IqxR/0