Once you have completed the UI (User Interface) Design of a website or web application, then you are ready to start developing it into a working, interactive experience.
HTML, CSS and JavaScript… are the three key syntax ingredients to Front End Development.
Let me break down these key players:
HTML (HyperText Markup Language)
Imagine HTML as ‘the house’, it is the backbone and foundation of your website.
It is important to note that CSS and JavaScript are added after HTML has been established.
An example of HTML
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
CSS (Cascading Style Sheets)
Imagine CSS as ‘the design choices in the house’ this is where you can set, colours, positioning, spacing, and sizing.
Where once you would have applied your styling straight to the HTML code, like so:
<p color="#FF0000"><bold><i>with this example you will get red, bold, italic text</i></bold></p>
Now you can organise your design in cascading style sheets.
We set style rules to create the look and feel of our website, we can also adjust these rules depending on screen size, this is where the term ‘responsive design’ comes in.
An example of CSS in combination with HTML
Go to the ‘Results’ tab to see the style.
JavaScript (JS)
Imagine JavaScript as ‘the utilities in the house’, say, for example, when you go to turn on a tap or light, this results in a reaction. JavaScript is similar, as it allows us to build interactive features based on events. For example, when someone clicks a button, this would be an event and from that event, we trigger a manipulation of the web page, say… we hide some of the contents of the page and replace it with a message.
An example of a show/hide function using JavaScript in combination with CSS and HTML
Go to the ‘Results’ tab and click on the button to see what happens.
Keep in check
HTML, CSS and JavaScript are always evolving and it is important to keep up to date with the many changes that occur in the field of Front End Development.
W3C is the main international standards organisation for the World Wide Web (WWW or W3) and can help to ensure your website is following the current standards.
“The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.”
Leave a Reply