Outline of ideas, concepts to cover, potential projects to write.
- Book with a video for each chapter.
div.main | |
div.footer | |
div.bubbles | |
- for (var i = 0; i < 128; i++) //Small numbers looks nice too | |
div.bubble(style=`--size:${2+Math.random()*4}rem; --distance:${6+Math.random()*4}rem; --position:${-5+Math.random()*110}%; --time:${2+Math.random()*2}s; --delay:${-1*(2+Math.random()*2)}s;`) | |
div.content | |
div | |
div | |
b Eldew | |
a(href="#") Secuce |
/* CREDIT: https://30-seconds.github.io/30-seconds-of-css/#easing-variables */ | |
:root { | |
/* Place variables in here to use globally */ | |
} | |
.easing-variables { | |
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); | |
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); | |
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); |
Thanks to /u/zpoo32 for reporting several issues in this list!
In the cp-readiness repo created in git and version control, create a branch called FLASK. Use this branch for the exercise below. | |
Create a simple web app using the Flask microframework as described the following article https://code.tutsplus.com/tutorials/an-introduction-to-pythons-flask-framework--net-28822 |
Create a github account here | |
Create a new repository on github with the name cp-readiness | |
Follow the instructions to push an existing repository from the command line | |
In your local machine, create a branch called recipes | |
Switch to the new branch | |
In a folder called recipe, create a file called tea.txt | |
Add the changes to staging | |
Push to the recipes branch |
Exercise 1 | |
Install Git on their computer | |
Create a folder called cp-readiness on your local computer | |
Navigate to the folder and initialize it with git. | |
Create a file called README.md with a short a short intro of who you are to this folder | |
Check the status of your repo | |
Add the file README.md to the staging area | |
Commit with the message Initial Commit |
<!-- Edits by Mwangi Thiga--> | |
<html> | |
<head> | |
<title>Google Maps Multiple Markers</title> | |
<!--The 'sensor' thing could cause issues, so, --> | |
<!-- <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>--> | |
<script src="http://maps.google.com/maps/api/js?key=your api key" type="text/javascript"></script> | |
<!-- For more on api keys, pay this guy a visit: https://developers.google.com/maps/documentation/javascript/get-api-key --> | |
</head> |
Text scattered around the screen will move to arrange a message.
A Pen by Justus Tumacder on CodePen.
<div class="slider__warpper"> | |
<div class="flex__container flex--pikachu flex--active" data-slide="1"> | |
<div class="flex__item flex__item--left"> | |
<div class="flex__content"> | |
<p class="text--sub">Pokemon Gen I</p> | |
<h1 class="text--big">Pikachu</h1> | |
<p class="text--normal">Pikachu is an Electric-type Pokémon introduced in Generation I. Pikachu are small, chubby, and incredibly cute mouse-like Pokémon. They are almost completely covered by yellow fur.</p> | |
</div> | |
<p class="text__background">Pikachu</p> | |
</div> |