I love talking about using code as a design tool. It’s a powerful way to connect with your development team, and you don’t have to be an expert to get started! A great place for you to start is to understand that the HTML5 document is the key.
HTML5 is powerful
HTML5 is really powerful code, it’s the bones on which styling (skin) and functionality (muscles) rest. Enough with the body = code analogies. 🙂 Without further ado, here’s the minimum code required for an HTML5 webpage:
<!DOCTYPE html>
<html lang="en-NZ">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Document title</title>
</head>
</html>Save this code somewhere so you can reuse it then you can Use Code as a Design Tool. Remember if you use online coding tools like Codepen you don’t need to provide this code; it’s provided for you. This is really handy if you’re working on your local machine (meaning your code is saved to your own hard drive). Save it to a directory and name it “index.html” then open it in your favourite browser. You can even build out this template to suit your needs and styling so your digital mockups are as close to your actual project as possible.
Add CSS and JS in the right places
The fun part is when you start adding the skin and bones to the HTML. Here’s where you add those – link to a CSS file at the top of the document, then link to a script file just before the closing body tag. You want HTML to load first, then CSS, then JS. This helps optimise page load – you want JavaScript to load after the HTML does so it has something to bind to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- page content -->
<script src="script.js"></script>
</body>
</html>Choose a CSS framework to work with
From here add a CSS framework like Foundation or Bootstrap so I can utilise their gid column classes. From here I can start to build forms and layouts pretty quickly. (Note that while Foundation is no longer being updated, Bootstrap is still popular and updates appear every so often. You can even use Material Design UI v3 from Google.
Start with a three column grid
Start with a three column grid from one of the above providers to start using code as a design tool. Here’s an example of HTML5 minimum template with Bootstrap added, and three column layout employed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link href="
https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- page content -->
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
<script src="script.js"></script>
</body>
</html>For more Bootstrap examples have a read here. And find a codepen of this code here.
Have fun! (And get used to reading the documentation whenever you have a question.)
