snipette-datpro-site/src/index.htm

270 lines
16 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 px-4 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="my-4 text-lg">
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<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 hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<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-col md:flex-row-reverse items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<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 hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pr-4 flex items-center order-3">
<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 flex-col md:flex-row items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<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 hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<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-col md:flex-row-reverse items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<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 hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 md:pl-4 flex items-center order-3">
<p>We will guide you in constructing a compelling data-based story based on your analyses.</p>
</div>
</li>
<li class="flex flex-col md:flex-row items-center md:items-stretch">
<div class="py-4 w-8 order-1 md:order-2">
<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 hidden md:block"></div>
</div>
<div class="md:w-1/2 p-4 order-2 md:order-1">
<img width=640 height=480 />
</div>
<div class="md:w-1/2 pl-4 flex items-center order-3">
<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 hidden md:block"></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 as two different versions in two publications:
</p>
<ul class="my-4 md:mx-4 text-lg flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
<li class="p-4 bg-blue-200 border border-blue-800 w-full md:w-1/2">
<h3 class="text-center uppercase my-4 font-sans text-blue-800">Emergent Phenomena</h3>
<p class="m-2"><a href="https://medium.com/emergent-phenomena" target="_blank" class="text-blue-800 underline">Emergent Phenomena</a> 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.</p>
<p class="m-2">For this publication, you will write 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.</p>
</li>
<li class="p-4 bg-orange-200 border border-orange-800 w-full md:w-1/2">
<h3 class="text-center uppercase my-4 font-sans text-orange-800">Snipette</h3>
<p class="m-2"><a href="https://www.snipettemag.com" target="_blank" class="text-orange-800 underline">Snipette</a> is a magazine seeking to explain the world in a fun and accessible way. It offers both web and print versions, and uses literary techniques like suspense and metaphor to get the point across.</p>
<p class="m-2">For this publication, you will write general-purpose article which gives a broad 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.</p>
</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>
<div class="max-w-md mx-auto">
<img class="bg-orange-800 mt-8" width="640" height="480"/>
</div>
</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>