Web Design in 4 Minutes

<!
DOCTYPE html>
<html class="step0 step1 step2 step3 step4 step5 step6 step7 wf-roboto-n3-active
wf-roboto-n4-active wf-roboto-n5-active wf-active step8 step9"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Web Design in 4 minutes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:url" content="https://jgthms.com/web-design-in-4-minutes/">

<meta property="og:type" content="website">
<meta property="og:title" content="Web Design in 4 minutes">
<meta property="og:description" content="Learn the basics of web design in 4
minutes with this interactive tutorial.">
<meta property="og:image"
content="https://jgthms.com/web-design-in-4-minutes/learn-web-design-in-4-
minutes.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@jgthms">
<meta name="twitter:creator" content="@jgthms">
<meta name="twitter:title" content="Web Design in 4 minutes">
<meta name="twitter:description" content="Learn the basics of web design in 4
minutes with this interactive tutorial.">
<meta name="twitter:image" content="https://jgthms.com/web-design-in-4-
minutes/learn-web-design-in-4-minutes.png">
<link rel="stylesheet" type="text/css" href="Web%20Design%20in

%204%20minutes_files/index.css"><link rel="stylesheet" href="Web%20Design%20in
%204%20minutes_files/css.css" media="all">
</head>
<body>
<header id="header">
<img id="logo" src="Web%20Design%20in%204%20minutes_files/web-design-in-4-
minutes.png" alt="Web Design in 4 minutes logo">
<h1>Web Design in 4 minutes</h1>

<a href="https://jgthms.com/" target="_blank">by Jeremy Thomas</a>

</header>
<main>
<section id="start">
Let's say you have a product, a portfolio, or just an idea you want to
share with everyone on your own website. Before you publish it on the
internet, you want to make it look attractive, professional, or at least
decent to look at.
What is the <a class="step" data-step="0" href="#content">first
thing</a> you need to work on?
</section>
<section id="content" class="animate">

<h2>Content</h2>
The purpose of design is to enhance the presentation of
the content it's applied to. It might sound obvious, but content being the
primary element of a website, it should not be established as an
afterthought.
Written content, like the paragraph you're currently reading,
makes up for more than 90% of the Web. Styling this textual content
will go a long way.
Let's assume you've already finalised the content you want to publish
and just created an empty <code>style.css</code> file, what is the <a class="step"
data-step="1" href="#centering">first rule</a> you can write?
</section>
<section id="centering" class="animate">

<h2>Centering</h2>
Long lines of text can be hard to parse, and thus hard to
read. Setting a limit of characters per line greatly enhances the
readability and appeal of a wall of text.
<pre>body {
margin: 0 auto;
max-width: 50em;
}</pre>
After styling the text blocks, what about styling the <a
class="step" data-step="2" href="#font-family">text itself</a>?
</section>
<section id="font-family" class="animate">

<h2>Font family</h2>
The browser's font defaults to <code>"Times"</code>, which can look
unappealing (mostly because it is the "unstyled" font). Switching to a
sans-serif font like <code>"Helvetica"</code> or
<code>"Arial"</code> can vastly improve the look of your page.
font-family: "Helvetica", "Arial", sans-serif;
}</pre>
If you want to stick with a serif font, try
<code>"Georgia"</code>.
While this makes the text more appealing, let's also make it <a
class="step" data-step="3" href="#spacing">more readable</a>.
</section>
<section id="spacing" class="animate">

<h2>Spacing</h2>
When a page looks "broken" to a user, it's usually a
spacing issue. Providing space both around and
within your content can increase the appeal of your page.
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1padding-top: 1
While the layout has greatly improved so far, let's apply more <a
class="step" data-step="4" href="#color-contrast">subtle changes</a>.
</section>
<section id="color-contrast" class="animate">

<h2>Color & contrast</h2>
Black text on a white background can be harsh on the eyes. Opting for a
softer shade of black for body text makes the page more
comfortable to read.
color: #555;
}</pre>
And in order to keep a decent level of contrast, let's
pick a darker shade for important words
<pre>h1,
h2,
strong {
color: #333;
}</pre>
While most of the page has been improved visually, some elements (like
the code snippets) still seem <a class="step" data-step="5" href="#balance">out of
place</a>.
</section>
<section id="balance" class="animate">

<h2>Balance</h2>
It only takes a few additional touches to correct the balance of the
page:
<pre>code,
pre {
background: #eee;
}
code {
padding: 2px 4px;
vertical-align: text-bottom;
}
padding: 1em;
}</pre>
At this point, you might want to make your page stand out and give it <a
class="step" data-step="6" href="#primary-color">identity</a>.
</section>
<section id="primary-color" class="animate">

<h2>Primary color</h2>
Most brands have a primary color that acts as a visual
accent. On a website, this accent can be used to provide emphasis on interactive
elements, like links.
<pre>a {
color: #e81c4f;
}</pre>
But to keep the balance, we will need some <a class="step" data-step="7"
href="#secondary-colors">additional colors</a>.
</section>
<section id="secondary-colors" class="animate">

<h2>Secondary colors</h2>
The accent color can be complemented with more subtle shades,
to be used on borders, backgrounds, or even the body text.
color: #566b78;
}
code,
background: #f5f7f9;
border-bottom: 1px solid #d8dee9;
color: #a7adba;
}
border-left: 2px solid #69c;
}</pre>
Having changed the shades, why not change the <a class="step" data-
step="8" href="#custom-font">shapes</a>...
</section>
<section id="custom-font" class="animate">

<h2>Custom font</h2>
Since text is the main content of a webpage, using a custom
font gives the page even more noticeable identity.
While you can embed your own webfont or use an online service like <a
href="https://typekit.com/" target="_blank">Typekit</a>, let's use
<code>"Roboto"</code> from the free <a href="https://fonts.google.com/"
target="_blank">Google Fonts</a> service:
<pre>@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
body {
font-family: "Roboto",
"Helvetica", "Arial", sans-
serif;
}</pre>
After enhancing your identity through text, how about adding a
<a class="step" data-step="9" href="#images">thousand words</a>...
</section>
<section id="images" class="animate">

<h2>
<img src="Web%20Design%20in%204%20minutes_files/images.png"
alt="Spongebob rainbow meme saying 'Images'">
</h2>
Graphics and icons can be used either as ornaments to support
your content, or actively take part in the message you want to convey.
Let's enhance our header with a nice background image
from <a href="https://unsplash.com/photos/qH36EgNjPJY"
target="_blank">Unsplash</a>
<pre>header {
background-color: #263d36;
background-image: url("header.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
line-height: 1.2;
class="unit">vw 2em;
text-align: center;
}</pre>
Let's also add a logo
<pre>header img {
display: inline-block;
height: 120px;
vertical-align: top;
width: 120px;
}</pre>
Let's take that opportunity to enhance the text styles.
<pre>header h1 {
color: white;
font-size: 2.5font-weight: 300;
}
header a {

border: 1px solid #e81c4f;
border-radius: 290486px;
font-size: 0.6letter-spacing: 0.2em;
class="unit">em 2em;
text-transform: uppercase;
text-decoration: none;
transition: none 200ms ease-out;
transition-property: color, background;
}
header a:hover {

background: #e81c4f;
}</pre>
<a href="#header">And voilà</a>!
We've designed a decent page in just a few minutes, following basic
principles of web design. There's only <a class="step" data-step="10"
href="#share">one last thing</a> left to do...
</section>
<section id="share">
<h2>Learn CSS!</h2>

I've written a 44-page pdf that teaches you how to
build your own webpage from scratch. 😃


<a class="resource" href="https://jgthms.com/css-in-44-minutes-ebook">
<img src="Web%20Design%20in%204%20minutes_files/empty.htm" srcset="Web
%20Design%20in%204%20minutes_files/css-in-44-minutes-book-cover.png 1x, Web
%20Design%20in%204%20minutes_files/css-in-44-minutes-book-cover2x.png 2x, Web
%20Design%20in%204%20minutes_files/css-in-44-minutes-book-cover3x.png 3x, Web
%20Design%20in%204%20minutes_files/css-in-44-minutes-book-cover4x.png 4x" alt="CSS
in 44 minutes book cover" width="252" height="352">
</a>

<h2>Share the love!</h2>
<nav class="buttons">
<a class="button github" href="https://github.com/jgthms/web-design-in-4-
minutes" target="_blank">
Download on GitHub
</a>
<a class="button facebook" href="https://www.facebook.com/sharer.php?
u=https%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes%2F" rel="nofollow"
target="_blank">
Share on Facebook
</a>
<a class="button twitter" data-social-network="Twitter" data-social-
action="tweet" data-social-target="https://jgthms.com/web-design-in-4-minutes/"
href="https://twitter.com/intent/tweet?text=Web%20Design%20in
%204%20minutes&url=https%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes
%2F&via=jgthms" rel="nofollow" target="_blank">
Share on Twitter
</a>
</nav>
<h2>Learn how to design with code!</h2>

Here are the resources I wrote to help you learn CSS:

<nav class="resources">
<a class="resource-marksheet resource" href="http://marksheet.io/"
target="_blank">
<figure class="resource-icon">
<img src="Web%20Design%20in%204%20minutes_files/marksheet.png"
alt="Logo of MarkSheet">
</figure>

MarkSheet
my free tutorial to learn HTML and CSS

</a>
<a class="resource-bulma resource" href="https://bulma.io/"
target="_blank">
<img src="Web%20Design%20in%204%20minutes_files/bulma.png" alt="Logo
of Bulma">
</figure>

Bulma
my CSS framework based on Flexbox, so you can get
started right away

</a>
<a class="resource-css-reference resource" href="http://cssreference.io/"
target="_blank">
<img src="Web%20Design%20in%204%20minutes_files/css-reference.png"
alt="Logo of CSS Reference">
</figure>

CSS Reference
my visual guide to the most popular CSS properties

</a>
</nav>
Thanks for reading!
</section>
<footer>
<a class="button" href="https://jgthms.com/" target="_blank">Made by
@jgthms</a>
</footer>
</main>
<script src="Web%20Design%20in%204%20minutes_files/webfont.js"></script><script
type="text/javascript">
var steps = document.querySelectorAll('.step');
var body = document.querySelector('body');
var html = document.querySelector('html');
for (var i=0; i < steps.length; i++) {

var element = steps[i];
element.onclick = function(event) {
var number = this.dataset.step;
var target = this.href;
addStep(number, target);
}
};
function removeVisited() {
if (document.getElementById('visited')) {
body.removeChild(document.getElementById('visited'));
}
}
function addStep(number, target) {

html.className += ' step' + number;
removeVisited();
if (target !== '') {

var id = target.split('#')[1];
document.getElementById(id).className = 'animate';
}
if (number === '7') {

loadGoogleFont();
}
}
visited.onclick = function() {
loadGoogleFont();
for (var i=0; i < 11; i++) {
html.className += ' step' + i;
}
removeVisited();
}
WebFontConfig = {
google: {
families: ['Roboto:300,400,500']
}
};
function loadGoogleFont() {
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
}
</script>
</body></html>

Web Design in 4 Minutes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design in 4 Minutes

Uploaded by

Copyright:

Available Formats

<!

<meta property="og:url" content="https://jgthms.com/web-design-in-4-minutes/">

<meta name="twitter:card" content="summary_large_image">

<link rel="stylesheet" type="text/css" href="Web%20Design%20in

<section id="content" class="animate">

<section id="centering" class="animate">

<section id="font-family" class="animate">

<section id="spacing" class="animate">

<section id="color-contrast" class="animate">

<section id="balance" class="animate">

<section id="primary-color" class="animate">

<section id="secondary-colors" class="animate">

<section id="custom-font" class="animate">

<section id="images" class="animate">

<span class="selector">header a</span> {

<span class="selector">header a:hover</span> {

for (var i=0; i < steps.length; i++) {

function addStep(number, target) {

if (target !== '') {

if (number === '7') {

You might also like