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.
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.
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.
Go to the ‘Results’ tab and click on the button to see what happens.
Keep in check
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.”