snipette-datpro-site/src/index.htm
Hippo e2a35462bc Convert to basic DatPro site (images yet to be replaced!)
Changed most of the site and content to reflect that of the
Blogging With Data course instead of the Snipette Writers'
Programme. Images are yet to be inserted, and there is of course
always fine tuning to be done, but otherwise this seems more or
less workable!
2021-10-26 16:31:39 +05:30

263 lines
15 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blogging With Data</title>
<link rel="stylesheet" href="style.css" />
<!-- Fonts: Crimson Text, Abhaya Libre, Open Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Crimson+Text&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body class="bg-blue-100 font-serif">
<div class="bg-blue-800 uppercase text-lg text-blue-900 p-5">
Blogging With Data Course
</div>
<div class="bg-blue-800 p-10 text-center">
<img src="img/penknife.png" class="w-1/2 sm:w-auto md:w-full lg:w-64 mx-auto mb-10" />
<p class="text-gray-300 text-4xl lowercase font-heading font-extrabold">Data science <span class="text-blue-300">with a literary touch</span></p>
</div>
<div class="bg-blue-900 text-gray-400 p-10 text-center uppercase font-sans">
<p>A <span class="bg-blue-700 text-gray-400 hover:bg-yellow-400 hover:text-black px-2 py-1 mx-1">data science</span> experience with a focus on <span class="bg-blue-700 text-gray-400 hover:bg-yellow-400 hover:text-black px-2 py-1 mx-1">narrative</span>, in addition to fact. <a href="#pricing" class="text-yellow-400 hover:text-blue-300 underline ml-2">See pricing</a></p>
</div>
<div class="max-w-4xl mx-auto">
<div class="flex flex-wrap mx-auto">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/aspiring-writer.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="hands-on-experience">
<h1 class="text-2xl font-sans">A hands-on experience <i class="icon-paperclip"></i></h1>
</a>
<ul class="list-check-circle m-4 text-lg">
<li class="m-2">Start with a topic of your choice. (If you can't decide, we'll help you choose)</li>
<li class="m-2">Work with real-world data from publicly available sources</li>
<li class="m-2">Write your own scripts and algorithms to analyse the data</li>
<li class="m-2">Draw conclusions with practical implications</li>
</ul>
</div>
</div>
<div class="flex flex-wrap sm:flex-row md:flex-row-reverse mx-auto bg-blue-200">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/researcher.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="larger-picture">
<h1 class="text-2xl font-sans">The larger picture <i class="icon-flask"></i></h1>
</a>
<ul class="list-check-circle m-4 text-lg">
<li class="m-2">Learn cutting-edge data science in real-world contexts</li>
<li class="m-2">Develop your data communication skills and become a content creation expert</li>
<li class="m-2">Get your work published on multiple platforms</li>
<li class="m-2">Have a ton of fun along the way!</li>
</ul>
</div>
</div>
<div class="flex flex-wrap mx-auto">
<div class="sm:w-full md:w-1/2 lg:w-1/3">
<img src="img/established-writer.png" />
</div>
<div class="sm:w-full md:w-1/2 lg:w-2/3 p-10">
<a name="share-your-findings">
<h1 class="text-2xl font-sans">Share your findings <i class="icon-edit"></i></h1>
</a>
<ul class="list-check-circle m-4 text-lg">
<li class="m-2">Get your work published so others can find it</li>
<li class="m-2">Learn how to frame your arguments and present your data</li>
<li class="m-2">Use literary techniques to tell a compelling story</li>
</ul>
</div>
</div>
</div>
<div class="bg-blue-200 flex flex-wrap sm:my-16 max-w-4xl mx-auto sm:shadow-xl border-8 border-blue-900">
<div class="xs:w-auto sm:w-1/2 md:w-1/3 lg:w-1/3 p-4 sm:p-8 mx-auto font-sans">
<a name="pricing">
<h2 class="text-center uppercase">Price</h2>
</a>
<p class="text-center text-6xl"><span class="text-base">$</span>49</p>
<p class="text-sm text-center text-green-900 font-bold"><del class="text-red-900">$99</del> Early bird offer</p>
<p class="text-center">
<a href="#signup-form" class="text-base mt-4 p-4 border-2 border-solid border-blue-900 text-blue-900 hover:border-blue-700 hover:text-blue-700 uppercase rounded w-full inline-block">Join the waitlist</a>
</p>
<p class="text-sm text-blue-800 text-center">The entire course lasts 6-8 weeks</p>
</div>
<div class="xs:w-full sm:w-1/2 md:w-2/3 lg:w-2/3 p-4 sm:p-8 flex flex-col items-center mx-auto">
<h2 class="text-center uppercase font-sans">You will learn to:</h2>
<ul class="list-chevron my-auto p-4 sm:p-0 text-lg">
<li class="m-2">Gather and analyse data using manual and programming tools</li>
<li class="m-2">Observer trends and statistics in data</li>
<li class="m-2">Formulate and present your conclusions</li>
<li class="m-2">Communicate your work to the general public by placing it within the larger context</li>
</ul>
</div>
</div>
<div class="py-16 max-w-4xl mx-auto text-justify">
<h1 class="text-3xl text-center mb-4 font-heading font-extrabold">Pre-requisites</h1>
<div class="flex flex-col md:flex-row">
<figure class="w-full md:w-1/2 lg:w-2/3 inline-block">
<img src="img/python-console.png" class="shadow-xl rounded-lg"/>
</figure>
<div class="w-full md:w-1/2 lg:w-1/3 p-8 text-lg">
<p>Due to the data-science and coding-intensive nature of the course, we are currently only able to take on participants with some knowledge of Python.</p>
<p>The course will make use of Python-based data analysis software, which we will help you familiarise yourself with. Towards this, we will be screening participants with a quick questionnaire.</p>
</div>
</div>
</div>
<div class="px-4 py-16 text-center bg-blue-900 text-gray-100">
<a name="our-team">
<h1 class="text-3xl text-center font-heading font-extrabold">Our Team</h1>
</a>
<ul class="m-4 flex flex-wrap flex-row justify-center text-lg font-sans">
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-yellow-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Dr. Skanda Vivek</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-green-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Manasa Kashi</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-purple-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Badri Sunderarajan</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-orange-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Nia Chari</span>
</li>
<li class="inline-block p-8 hover:opacity-75 cursor-pointer">
<figure class="bg-blue-500 w-40 h-40 rounded-full mb-4"></figure>
<span>Akil Ravi</span>
</li>
</ul>
<p class="max-w-4xl mx-auto font-sans">Our team has unique expertise at the interface of data science and content creation. We think these are life-changing skills that enable your dream job: following your passions, showcasing what you learn along the way, and making a sustainable income in the process.</p>
</div>
<div class="py-16 max-w-4xl mx-auto text-justify p-8 lg:px-0">
<h1 class="text-3xl text-center my-4 font-heading font-extrabold">How it works</h1>
<p class="text-lg">This course is based on our experience in private informal sessions and the <a href="https://write.snipettemag.com" class="text-blue-900 underline">Snipette Writers' Programme</a>. We understand that no two peoples' ideas or problems or finished products will be identical; hence a lot of how the course works depends on your personal needs. However, here's what will remain constant:</p>
<ul class="m-4 text-lg">
<li class="flex">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">1</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Your workplace will begin as a Google Docs sheet. This is where you will be brainstorming ideas and figuring out what area you want to research. In the meantime, you will also be in touch with the team over email.</p>
</div>
</li>
<li class="flex flex-row-reverse">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">2</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Once your topic is chosen, we will work together on finding links, resources, and publicly available datasets. Of course, all details and final choices will be up to you.</</p>
</div>
</li>
<li class="flex">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">3</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>You will then switch to a Google Colab notebook, where you will document your project, data analytics, and visualization with state of the art Python-based data analysis tools.</p>
</div>
</li>
<li class="flex flex-row-reverse">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">4</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>We will guide you in constructing a compelling data-based story based on your analyses.</p>
</div>
</li>
<li class="flex">
<div class="w-1/2 p-4">
<img width=640 height=480 />
</div>
<div class="py-4 w-8">
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">5</p>
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
</div>
<div class="w-1/2 pl-4 flex items-center">
<p>Once your conclusions are ready, you will move back to Google Docs to present your findings.</p>
</div>
</li>
<li class="flex flex-col items-center">
<div class="py-4 w-8">
<div class="w-0 h-full border border-blue-700 mx-auto"></div>
<p class="bg-blue-700 text-gray-200 h-8 w-8 text-center rounded-full">6</p>
</div>
<p class="text-lg mt-4">
When all is done, you will be ready for publication! This happens in two components:
</p>
<ul class="m-4 text-lg flex">
<li class="p-4">
A more technical overview of your work, along with graphs, stats, and links to raw data. This is aimed at being shared with the data science community, through the <a href="https://medium.com/emergent-phenomena" target="_blank">Emergent Phenomena</a> Medium publication. Emergent Phenomenan is a space for innovative work at the interface of data, storytelling, and society, filling a much-needed niche for in-depth analyses on societal issues backed by data.
</li>
<li class="p-4">
A more general-purpose article which gives a general overview of your chosen topic and provides context for where your work fits in. This is aimed at spreading awareness of the topic and your findings to the general public. You will use literary techniques like suspense and metaphor to get your point across, and the final article will be published in <a href="https://www.snipettemag.com" target="_blank">Snipette</a>—a magazine seeking to explain the world in a fun and accessible way.
</li>
</ul>
</li>
</ul>
<p class="text-lg">Once both versions of your article are published, you will receive a certificate of completion from Snipette/Emergent Phenomena and a print copy of the edition in which your article appears. The whole process is expected to take 6-8 weeks. Given that the course is wholly unique and tailored specifically to each participant, timings may vary from person to person.</p>
</div>
<div class="p-4 pb-20 max-w-4xl mx-auto text-center">
<h1 class="text-3xl text-center font-heading font-extrabold">Sample Certificate</h1>
<img class="max-w-md bg-orange-800 rounded-lg mt-8 mx-auto" width="640" height="480"/>
</div>
<div class="bg-blue-900 text-blue-100 py-8">
<div class="max-w-4xl mx-auto flex flex-wrap justify-center">
<img src="img/pup-with-penknife.png" class="w-auto h-48">
<div class="w-auto my-auto sm:mx-auto md:ml-10">
<a name="signup-form"></a>
<div class="w-auto flex flex-wrap justify-center sm:justify-start">
<p class="text-3xl text-blue-200 mt-auto text-center sm:text-left m-2 font-sans">Ready to give us a spin?</p>
<a href="//airtable.com/shrfr7646K3LUFMIG" target="_blank" class="text-base m-4 p-4 border-2 border-solid border-blue-500 text-blue-500 uppercase rounded font-sans">Join the waitlist</a>
</div>
<p class="text-blue-200 text-center sm:text-left mx-3 mt-0 mb-auto">Or, email <a href="mailto:editors@snipettemag.com" class="text-blue-300">editors@snipettemag.com</a> to know more</p>
</div>
</div>
<!-- Airtable form -->
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
<iframe class="airtable-embed airtable-dynamic-height max-w-4xl mx-auto my-8 rounded-lg" src="https://airtable.com/embed/shrfr7646K3LUFMIG?backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="1132" style="background: transparent; border: 1px solid #ccc;"></iframe>
<!-- End Airtable form -->
</div>
<div class="bg-black text-gray-100 p-4 text-xs font-sans">
&copy; Snipette 2020
<div class="float-right">
<a href="//www.snipettemag.com">Home</a>
<a href="//www.snipettemag.com/introducing-snipette">About</a>
<a href="//facebook.com/snipette">Facebook</a>
<a href="//twitter.com/snipettemag">Twitter</a>
<a href="//squeet.me/u/snipette">Mastodon</a>
<a href="//instagram.com/snipettemag">Instagram</a>
<a href="//liberapay.com/snipettemag">Donate via Liberapay</a>
</div>
</div>
</body>
</html>