Skip to content

Instantly share code, notes, and snippets.

View fredericAerts's full-sized avatar

Frederic Aerts fredericAerts

View GitHub Profile
@fredericAerts
fredericAerts / grid.css
Created August 13, 2015 13:22
web developer in 3 days - v1
.content-wrapper {
width: 750px;
margin-left: auto;
margin-right: auto;
}
@fredericAerts
fredericAerts / base.css
Created August 13, 2015 13:24
web developer in 3 days - v2
a {
color: #6495ED;
text-decoration: none;
}
a:hover, a:visited, a:active, a:focus {
color: #6495ED;
text-decoration: none;
}
@fredericAerts
fredericAerts / header.css
Created August 13, 2015 13:26
web developer in 3 days - v1
.header {
box-shadow: 0 0 2px 3px #EEEEEE;
}
.nav-item {
display: inline-block;
height: 60px;
padding: 20px;
color: #000000;
@fredericAerts
fredericAerts / index.html
Last active August 31, 2015 14:12
web developer in 3 days - v6
<section class="hero">
<h1 class=“hero-title">How to become a web developer in 3 days</h1>
<img class=“hero-image" src="images/logo.png">
<a class="btn btn-success btn-lg" type="button" href="http://www.fredericaerts.com/#/writing/series/how-to-become-a-web-developer-in-3-days?article=day-1:-what-websites-are-made-from" target="_blank">
Start building
</a>
</section>
@fredericAerts
fredericAerts / base.css
Created August 13, 2015 13:30
web developer in 3 days - v3
h1 {
font-size: 35px;
font-weight: 700;
text-transform: uppercase;
}
@fredericAerts
fredericAerts / hero.css
Created August 13, 2015 13:31
web developer in 3 days - v1
.hero-title {
width: 95%;
max-width: 550px;
margin: 0 auto;
padding: 15px;
background: #FFFFFF;
border: 1px solid black;
}
@fredericAerts
fredericAerts / hero.css
Created August 13, 2015 13:33
web developer in 3 days - v2
.hero {
padding: 60px 0;
text-align: center;
background: #EEEEEE;
}
@fredericAerts
fredericAerts / index.html
Last active August 31, 2015 14:15
web developer in 3 days - v7
<section class="content-wrapper">
<h2>This is the website you'll build</h2>
<p>
And you'll build it like a pro too...
</p>
<p>
In a <a href="http://www.fredericaerts.com/#/writing/series/how-to-become-a-web-developer-in-3-days?article=day-1:-what-websites-are-made-from" target="_blank"> 3 day tutorial</a>, we'll be travelling back to the future of web development. That's right! Using only our brain and a simple text editor, we're going to concoct this beautiful website, leaving you with a strong foundation to build upon during your future web development adventures.
</p>
<p>
<strong>No prior web development knowledge is required</strong> for completing this tutorial successfully. On the first day we'll explain what websites are made from. In the next 2 days we'll focus on building this website you're viewing now from scratch.
@fredericAerts
fredericAerts / base.css
Created August 13, 2015 13:36
web developer in 3 day - v4
h2 {
margin: 70px 0 20px;
font-size: 35px;
font-weight: 700;
}
p {
margin-bottom: 20px;
}
@fredericAerts
fredericAerts / base.css
Created August 13, 2015 13:39
web developer in 3 days - v5
body {
font-family: 'Oswald', sans-serif;
}