forked from evantarrh/jade
-
Notifications
You must be signed in to change notification settings - Fork 0
/
nextsteps.html
157 lines (136 loc) · 11 KB
/
nextsteps.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>From Zero to Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Introductory web development curriculum, created by Evan Tarrh" />
<meta name="robots" content="NOODP, index, follow" />
<meta itemprop="name" content="From Zero to Website">
<meta itemprop="description" content="Introductory web development curriculum, created by Evan Tarrh">
<meta itemprop="image" content="">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="From Zero to Website">
<meta name="twitter:description" content="Introductory web development curriculum, created by Evan Tarrh">
<meta name="twitter:creator" content="">
<meta name="twitter:image:src" content="">
<meta name="twitter:domain" content="evan.land">
<!-- Open Graph data (Facebook) -->
<meta property="og:title" content="From Zero to Website" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://evan.land/jade/" />
<meta property="og:image" content="" />
<meta property="og:description" content="Introductory web development curriculum, created by Evan Tarrh" />
<link rel="icon" type="image/png" href="/img/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/img/favicon/favicon-16x16.png" sizes="16x16" />
<!-- Chrome Theme Color -->
<meta name="theme-color" content="#42CBAD">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/css/style.min.css" inline>
<!-- Google Analytics go here -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50221324-4', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="big-nav hidden">
<div class="pages">
<ul>
<li><a href="/">Introduction</a></li>
<li><a href="/html.html">HTML</a></li>
<li><a href="/css.html">CSS</a></li>
<li><a href="/js.html">Javascript</a></li>
<li><a href="/git.html">Git and GitHub</a></li>
<li><a href="/nextsteps.html">Next Steps</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<div id="burger" class="burger">
<div class="patty"></div>
<div class="patty"></div>
<div class="patty"></div>
</div>
<div class="mobile-only mobile-header">
<h1>From Zero to Website</h1>
</div>
<div class="content">
<div class="headers hide-mobile">
<h1>Where to go from here</h1>
<h2>Domains, collaboration, and more!</h2>
</div>
<p>Now that we've learned the basic skills needed to get a website out in the real world, let's cover some ways to make it better. A lot better.</p>
<p>In no particular order....</p>
<h3 id="flask"><a href="#flask">Using Flask to build web applications</a></h3>
<p>We've learned a lot of really useful skills over the past few lessons. However, in order to develop websites that provide services or generate content dynamically, knowledge of HTML, CSS, and JavaScript isn't quite enough!</p>
<p><a href="http://flask.pocoo.org/">Flask</a> is a Python <strong>framework</strong> that makes it really easy to take the next step in your illustrious web development career. For a thorough look at Flask, I can't recommend ADI's own <a href="http://learn.adicu.com/webdev/">guide</a> to developing with Flask highly enough. There's no better way to start making fully-fledged web apps!</p>
<h3 id="domains"><a href="#domains">Customizing your domain</a></h3>
<p>This website, and its parent, are hosted through GitHub. But I'm using my own domain name, because it's way cooler that way.</p>
<p class="with-list">To do this for your website, it's as easy as 1, 2, 3i, 3ii!</p>
<ol>
<li>Go to <a href="https://namecheap.com">Namecheap</a> and buy a domain you like! Remember, the <a href="https://education.github.com/pack/">GitHub student developer pack</a> comes with a free <code class="inline-code">.me</code> domain from Namecheap, in case you don't want to spend any money.</li>
<li><p>In your <code class="inline-code">username.github.io</code> repo, at the same level as <code class="inline-code">index.html</code>create a file called <code class="inline-code">CNAME</code>. Inside that file, add just one line: your new domain name, all lowercase, and nothing else. For example, this site's CNAME is just:</p>
<pre><code class="language-markup">evan.land</code></pre></li>
</li>
<li><p class="with-list">In Namecheap, in your dashboard, click “Manage” on the domain name you just bought. Then click on Advanced DNS from the tabs in the middle of the page. Then, do the following:</p>
<ol class="roman">
<li>Use the red “Add new record” button to add two A Records, both with host <code class="inline-code">@</code>, one with the IP address <code class="inline-code">192.30.252.153</code>, the other with IP address <code class="inline-code">192.30.252.154</code>.</li>
<li>Use the red “Add new record” button to add a CNAME Record, with host <code class="inline-code">www</code> and the value <code class="inline-code">[username].github.io.</code>. For example, my CNAME Record's value is <code class="inline-code">evantarrh.github.io.</code>. Don't leave out the dot at the end of it!</li>
</ol>
</li>
</ol>
<p>You'll need to wait at least half an hour for the changes to finish, but after that, everything should work like you want it to.</p>
<h3 id="responsive"><a href="#responsive">CSS Media Queries</a></h3>
<p>While you were designing your website, did you ever think about what it would look like on a phone? More and more people browser the internet using their phones, and it's our duty as web developers to make sure our websites' user experience is just as good on a phone or tablet.</p>
<p class="with-list">The best way to do this is in your CSS, with <strong>media queries</strong>! That's how this website looks passable on mobile.</p>
<ul>
<li><a href="http://learnlayout.com/media-queries.html">Here</a>'s a quick introduction.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Here</a>'s a great reference guide.</li>
<li><a href="https://css-tricks.com/logic-in-media-queries/">Here</a> are some interesting tricks if you want to get your brain working hard.</li>
</ul>
<h3 id="javascript"><a href="#javascript">Better JavaScript</a></h3>
<p>Our JavaScript lesson was pretty long, but I still left out a lot of things that are really crucial for working on anything beyond a personal site.</p>
<ol>
<li>I've linked to <a href="http://eloquentjavascript.net">Eloquent JavaScript</a> before, and I'll do it again. It's so important to have good JavaScript fundamentals, and this website does by far the best job. You should already have read chapters 1 and 2; maybe even more important is <a href="http://eloquentjavascript.net/03_functions.html">Chapter 3</a>, functions. Please read that!</li>
<li>MDN also has an excellent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">crash course</a> in all things JavaScript. It's much shorter than EloquentJS, but still covers a lot of the important stuff.</li>
</ol>
<h3 id="favicons"><a href="#favicons">Favicons</a></h3>
<p>Ever wonder how there's a little green J next to the <code class="inline-code">title</code> in your browser's tabs? It's called a <strong>favicon</strong>, and all the cool kids will have one on their personal sites.</p>
<p>You can make one with <a href="http://www.favicon.cc/">this silly tool</a>, and store it at the same level as your <code class="inline-code">index.html</code> with the name <code class="inline-code">favicon.ico</code>.
<p>To use a <code class="inline-code">.png</code>, or to get more information about the rabbit hole that is the favicon, check out this <a href="https://github.com/audreyr/favicon-cheat-sheet">incredibly detailed guide</a>. Don't spend too much time there or your brain will explode.</p>
<h3 id="ga"><a href="#ga">Google Analytics</a></h3>
<p>Why make a personal site if you can't have incredibly detailed information about how many people are visiting your website every day, where they're from, and what browser they're using? <a href="https://google.com/analytics">Google Analytics</a> is such a comically useful tool that every time I use it I'm amazed at how free it is.</p>
<p>The guide on the Google Analytics site should be enough to get you started; <a href="https://support.google.com/analytics/answer/1008015?hl=en">here</a> is an extra-detailed guide in case you get stuck.</p>
<h3 id="bootstrap"><a href="#bootstrap">Bootstrap</a></h3>
<p class="with-list">I love web design, but I recognize that not everyone shares my love for wrangling with CSS. If that sounds like you, you should check out <a href="https://getbootstrap.com">Bootstrap</a>: it's a <strong>CSS framework</strong>, which provides a lot of built-in styling that works well on all devices.</p>
<ul>
<li><a href="https://www.codecademy.com/courses/web-beginner-en-yjvdd/0/1">Here</a> is a great way to get started with Bootstrap: a lesson from Codecademy!</li>
<li><a href="https://getbootstrap.com/getting-started/">Here</a>'s Bootstrap's own “getting started” guide.</li>
<li><a href="https://www.youtube.com/watch?v=YXVoqJEwqoQ">Here</a>'s a pretty reasonable (if slightly out of date) video guide to getting started with Bootstrap.</li>
</ul>
<h3 id="git-caching"><a href="#git-caching">Caching your GitHub password</a></h3>
<p>Are you tired of entering your username and password every time you want to push to GitHub? Follow <a href="https://help.github.com/articles/caching-your-github-password-in-git/">this guide</a> and you'll never have to think about it again.</p>
<div class="separator"></div>
<p>Anything else you want to see here? Let me know—I want this to be as helpful as possible.</p>
<p>Happy building!</p>
</div>
<div class="inline-nav">
<!-- No more pages -->
</div>
<div class="footer">
<span class="left">Designed, developed, and maintained by <a href="http://evantarrh.com">Evan</a>.</span>
<span class="right"><a href="https://github.com/evantarrh/jade/issues/new">Suggest an improvement.</a></span>
</div>
</div>
<script src="/js/burger.js"></script>
<script src="/js/progress.js"></script>
<script src="/js/lib/prism.js"></script>
</body>
</html>