The boilerplate to create a new blank HTML document:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>MMCC2039: Principles of Web Design</title>
<link href="" rel="stylesheet" />
</head>
<body>
</body>
</html>
A bare bones 'System Font Stack' reset that can be added to the <head> section of your HTML document:
<link href="<https://mmcc.mq.edu.au/mmcc2039/reset.css>" rel="stylesheet">
… or added to the top of your CSS document:
html {
font-family: blinkmacsystemfont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 400 !important;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
}
According to David Whitbread's The Design Manual, when making a rough layout it is helpful to "use actual headings and possibly the first words in an opening paragraph, but replace the rest of the text with 'dummy' text. 'Lorem ipsum…' dummy text is just gobbledegook that looks like text. It encourages you to consider the design effect of the type without being distracted by the content [and] focus on the design, and not the minutiae of spelling and proofreading detail." (2023: 397)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget dui ipsum. Fusce placerat ut lorem a ultrices. Sed dictum tellus nulla, sed maximus lorem bibendum ac. Mauris efficitur sem ut nisi posuere, quis aliquet justo iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris euismod gravida mauris nec faucibus. Vestibulum mattis metus sed elit tempus tempus. Nunc semper sagittis magna sed sodales. Duis at convallis diam.
Need more than one paragraph? Head over to https://lipsum.com
Just as we’ll occasionally use placeholder text to consider the design effect of type, we’ll also leverage placeholder images to help us plan around the use of imagery in layout. One resource that we’ll leverage often is picsum.photos — “the Lorem Ipsum for photos”.