Trine's Perspective

What I think and why

  • Home
  • Perspective
  • Portfolio
  • Contact

Front End Development

July 3, 2017 by Trine Paerata Leave a Comment

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.”

Filed Under: 1. Overview, 3. Front End Development Tagged With: CSS, Front End Development, HTML, JavaScript, Websites

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Explore

  • 1. Overview
  • 2. UX and UI Design
  • 3. Front End Development
  • 4. Digital Marketing
  • 6. Reviews
  • 7. Extras

Explore

  • 1. Overview
  • 2. UX and UI Design
  • 3. Front End Development
  • 4. Digital Marketing
  • 6. Reviews
  • 7. Extras

Recent Posts

  • Accessibility
  • UX Design Principles
  • Writing for the web
  • User Research Synthesis
  • User Journey, Map it Out
  • Reflect with a Retrospective
  • Usability Evaluation Without Users

Search by

60D Apple Canon CSS Design Principles Design Psychology Digital Marketing Drawing DSLR Email Marketing EOS EOS 60D Evaluation Front End Development HTML Information Architecture iPad Pro JavaScript Laws of UX Photography Retrospective SEO Sketching Social Media UI Design Usability User Journey User Research Synthesis UX UX Design UX Design Process UX Research Websites

Follow me

FacebookTwitterLinkedInInstagramFlickr
Behance

Copyright © 2022 · Modern Portfolio Pro Theme on Genesis Framework · WordPress · Log in