114 lines
4.4 KiB
HTML
114 lines
4.4 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "content" }}
|
|
<div class="ph3 ph0-ns">
|
|
<h1>Learn the Handmade way.</h1>
|
|
|
|
<p>Dive into one of these topics and start learning.</p>
|
|
|
|
<div class="flex flex-column flex-row-ns g3 mt3 mb4">
|
|
<a href="#compilers" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
|
|
<img src="{{ static "education/compilers.jpg" }}">
|
|
<div class="pa3">
|
|
<h2>Compilers</h2>
|
|
<div>
|
|
Learn how programming languages are made.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#networking" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
|
|
<img src="{{ static "education/networking.jpg" }}">
|
|
<div class="pa3">
|
|
<h2>Networking</h2>
|
|
<div>
|
|
Learn how computers communicate, and how the internet actually works.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#time" class="edu-topic db flex-fair-ns bg--dim br3 overflow-hidden c--inherit flex flex-column">
|
|
<img src="{{ static "education/time.jpg" }}">
|
|
<div class="pa3">
|
|
<h2>Time</h2>
|
|
<div>
|
|
Get better at handling time, from calendars to timezones to clock sync.
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<h2>What makes us different?</h2>
|
|
|
|
<div class="flex flex-column flex-row-ns g3 mb4">
|
|
<div class="flex-fair bg--dim pa3 br2">
|
|
<h3>Real material.</h3>
|
|
|
|
We equip you to go straight to the source. Our guides are structured around books and articles written by experts. We give you high-quality material to read, and the context to understand it. You do the rest.
|
|
</div>
|
|
<div class="flex-fair bg--dim pa3 br3">
|
|
<h3>For any skill level.</h3>
|
|
|
|
Each guide runs the gamut from beginner to advanced. Whether you're new to a topic or have been practicing it for years, read through our guides and you'll find something new.
|
|
</div>
|
|
<div class="flex-fair bg--dim pa3 br3">
|
|
<h3>Designed for programmers.</h3>
|
|
|
|
We're not here to teach you how to program. We're here to teach you a specific topic.
|
|
</div>
|
|
</div>
|
|
|
|
<h2>All Topics</h2>
|
|
|
|
{{ range .Courses }}
|
|
<div id="{{ .Slug }}" class="edu-course mv3 bg--dim pa3 br3">
|
|
<h3>{{ .Name }}</h3>
|
|
<div class="overflow-hidden">
|
|
<div class="edu-articles ml3 pl3">
|
|
{{ range .Articles }}
|
|
<div class="edu-article mt3 relative {{ if not .Published }}coming-soon{{ end }}">
|
|
{{ if or (and $.User $.User.IsEduTester) .Published }}
|
|
<a href="{{ .Url }}"><h4>{{ .Title }}</h4></a>
|
|
{{ else }}
|
|
<h4>{{ .Title }} (coming soon)</h4>
|
|
{{ end }}
|
|
<div>{{ .Description }}</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ if and .User .User.IsEduAuthor }}
|
|
<div class="mt3">
|
|
<b>SECRET AUTHOR COMMANDS:</b>
|
|
<div><a href="{{ .RerenderUrl }}">Rerender all content</a></div>
|
|
<div><a href="{{ .NewArticleUrl }}"><span class="big pr1">+</span> New Article</a></div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
<script>
|
|
function highlightHash(hash) {
|
|
if (!hash) {
|
|
return;
|
|
}
|
|
|
|
const courses = document.querySelectorAll('.edu-course');
|
|
for (const course of courses) {
|
|
course.classList.remove('highlight');
|
|
}
|
|
const selectedCourse = document.querySelector(hash);
|
|
if (selectedCourse) {
|
|
selectedCourse.classList.add('highlight');
|
|
}
|
|
}
|
|
highlightHash(window.location.hash);
|
|
|
|
for (const a of document.querySelectorAll('a.edu-topic')) {
|
|
a.addEventListener('click', e => {
|
|
highlightHash(e.target.closest('a').hash);
|
|
});
|
|
}
|
|
</script>
|
|
</div>
|
|
{{ end }}
|