Category Archives: Coding

17 Useful CSS Cheat Sheets of 2017 | With New CSS3 Tags

[Estimated read time: 4 minutes]

CSS is an inseparable part of front-end designers and developers, probably because it’s the only real option to describe the presentation of a document written in a markup language. It saves a lot of work by controlling the layout of multiple webpages all at once.

Along with HTML and XHTML, the Cascading Stye Sheets can be applied to any XML document such as XUL, SVG, XML, and one can use it to render speech or other media. In most cases, browser support for CSS has never been a concern once you learn CSS. However, it’s is quite difficult for designers to remember all CSS properties and values.

To address this issue and increase productivity, most developers use cheat sheets. They are just a quick reference that helps you double check the snippet of code you’ve doubts about. To make your life easier, we are presenting some of the most useful CSS cheat sheets that will definitely help you get all the necessary elements at a glance. Since they all are freely available, you don’t need to pay anything. 

17. CSS Layout Cheat Sheet

This is a brief cheat sheet divided into 3 sections – layout mechanics, centering elements and common code. It is available on a single webpage in HTML format.

16. WordPress CSS Cheat Sheet For Beginners

The thing that makes WordPress so popular is its customizability. It lets you target very specific aspects of your website with CSS. On this page, you will find WordPress cheat sheet for default body class styles, post, format, menu, widget, common form and WISIWYG editor style.

15. Animations and Effects

This webpage includes transforms, transitions, animations, filters and target. All properties are well-described along with their syntax. If you are interested, you can learn several interactions methods and triggering animations and transitions with those interactions.

14. CSS Properties

If you are looking for descriptions and notes of important CSS properties and values, look no further than simple infographics of CSS_properties provided by genautica.

13. CSS Click Chart

CSS click chart provides dozens on example code to manipulate your elements, for example code for box sizing, adding text shadow, keyframe animations, gradients, transforms and much more. It also gives you live demonstration and browser support information.

12. CSS Grid

As the name suggests, its an ultimate CSS grid cheat sheet that allows you to draw (for testing purpose) any number of grids (both columns and rows) of any size.

11. Media Queries

The CSS3 cheat sheet for media query that contains the code for phone, tablet and desktop, with orientation.

10. Flexbox

The Flexbox Layout (flexible box) module offers a more efficient way to lay out, align and distribute space among items present in a container, even if their size is dynamic or not known. This page gives a detail on how to implement these flexible boxes.

9. CSS Shorthand Cheat Sheet

A very brief cheat sheet that shows the parameters of commonly used properties such as border, font, background, example, color, and more. It is available in JPEF format only.

8. CSS CheatSheet

This cheatsheet is packed with detailed information about different CSS modules, including attributes, pseudoclasses, fonts, colors, composition, filter, effects, transitions, animations, transformations, positioning, alignment, and more. It’s available in PDF format.

7. Practical CSS Cheat Sheet

This is a quick reference guide by Toptal. It includes some of the most important selectors, properties, units, syntax and other useful information in brief.

6. Interactive CSS Cheat Sheet

The interactive CSS cheat sheet consists of common codes that you can easily copy and paste in your project. With interactive widgets, you can generate code for styling gradient, text shadow, box, background, fonts, buttons, transform, border and more.

5. CSS3 Animation Cheat Sheet

The is a collection of preset, plug-and-play animations for your next project. To implement this, you have to add the stylesheet on your webpage and apply the predesigned CSS classes to the element you want to animate. That’s all!

4. Mega CSS3 Infographics

printable CSS3 cheat sheet, containing all the properties, selectors types and values in the current specification of W3C. All properties are provided in a different section, available in high-resolution PDF.

3. CSS Almanac

A quick reference guide to many features of CSS, organized alphabetically. Clicking on each element takes you to the new URL, where will you find a detailed information (along with examples) about the element you’ve clicked.

Read: 35 Impressive Ajax and CSS Loaders / Spinners

2. Comprehensive CSS3 Cheat Sheet

This is an ultimate cheat sheet including all important CSS3 tags. It is designed as an eye-catching infographics that is available in both PNG and PDF format.

1. Mega CSS Cheat Sheet

Read: 22 Creative CSS Hover Effects

This a long, detailed CSS cheat sheet of total 29 pages, available in PDF and PNG format. You can treat it as a small book that comes with a neat table of content. All elements like backgrounds, fonts, texts, grid positioning, etc. are organized into different chapters to provide better readability.

via RankRed http://ift.tt/2yZr5g7

10 Reasons Kids Should Learn to Code

Learning about Computational Thinking, often referred to as coding (which is really the “written” part of process), is a new literacy that is overlooked for myriad reasons: “It’s too hard”, “I don’t understand it so, it will be impossible to teach”, “It doesn’t fit into any curricular area”, “There is no math in it at all”, “It’s just not appropriate for little ones”. I’ve pretty much heard the gamut of reasons why this process, not dissimilar to Design Thinking or Inquiry processes taking placing in Making/Tinkering and STEAM environments, is not viable in classrooms today. The reality is that computation thinking is a YAIEP or Yet Another Inquiry Entry Point. This should be a comforting thing for most. Inquiry and more recently Design Thinking are processes have been used extensively in the STEAM and Maker Movements that has swept educational institutions. These programs feature pedagogy that empower students to take more responsibility for their learning pathway; directing their learning through questions and personal perspectives; try to find and solve unique problems that have meaning and importance them; collaborating together to makes sense of data collected; communicating with authentic audiences and experts to share and obtain information; demonstrate their understandings in unique ways. This is Computational Thinking at it’s best as well. But there are added benefits as well and the article highlights these beautifully….  (Keith Strachan)


Word Splash of Coding Words

10 Reasons Kids Should Learn to Code

When it comes to preparing your children for the future, there are few better ways to do so than to help them learn to code! Coding helps kids develop academic skills, build qualities like perseverance and organization, and gain valuable 21st century skills that can even translate into a career. From the Tynker blog, here are the top 10 reasons kids should learn to code:

Coding Improves Academic Performance

  1. Math: Coding helps kids visualize abstract concepts, lets them apply math to real-world situations, and makes math fun and creative!
  2. Writing: Kids who code understand the value of concision and planning, which results in better writing skills. Many kids even use Tynker as a medium for storytelling!
  3. Creativity: Kids learn through experimentation and strengthen their brains when they code, allowing them to embrace their creativity.
  4. Confidence: Parents enthusiastically report that they’ve noticed their kids’ confidence building as they learn to problem-solve through coding!

Coding Builds Soft Skills

  1. Focus and Organization: As they write more complicated code, kids naturally develop better focus and organization.
  2. Resilience: With coding comes debugging – and there’s no better way to build perseverance and resilience than working through challenges!
  3. Communication: Coding teaches logical communication, strengthening both verbal and written skills. Think about it: learning code means learning a new language!

Coding Paves a Path to the Future

  1. Empowerment: Kids are empowered to make a difference when they code – we’ve seen Tynkerers use the platform to spread messages of tolerance and kindness!
  2. Life Skills: Coding is a basic literacy in the digital age, and it’s important for kids to understand – and be able to innovate with – the technology around them.
  3. Career Preparation: There’s a high demand for workers in the tech industry; mastering coding at a young age allows kids to excel in any field they choose!

Tynker makes it fun and easy for kids to learn how to code! Kids use Tynker’s visual blocks to begin learning programming basics, then graduate to written programming languages like Python, Javascript, and Swift. Our guided courses, puzzles, and more ensure that every child will find something that ignites their passion for learning. Explore our plans and get your child started coding today!

via www.tynker.com http://ift.tt/2i2cGVZ

Computational Thinking Revisited

Computational Thinking
Computational Thinking

I have been thinking more about what the important steps embedded in the process of programming… There are really two cycles within the process: one that follows a design or inquiry-like sequence & one that addresses computational thinking. I have tweaked this model over and over and have done so again below to show where I think the computational thinking fits in.

Blended Processes: Computational & Design Thinking
Blended Processes: Computational & Design Thinking

It’s fascinating to watch students tackle this head on. I was at Wellington School the other day working on a coding and I was amazed on a number of fronts:

Wellington Students
Wellington Students Coding; Posted with permission
  • Students were unfazed by the coding challenges put in front of them: the challenges were hard but the students were highly motivated to solve them
  • Students struggled initially with establishing social sharing of the tools: needed to provide some strategies here
  • They successfully collaborated in their teams
  • They creatively collaborated across teams
  • The focussed completely on the coding problem & trying to solve it
  • It didn’t matter that Math, Science & ELA outcomes, strategies & content were being dealt with in order to solve the coding problem at hand: students shifted between these areas with ease. The blended nature of the content was authentic and natural to the students
  • Students were creative in their solutions to the coding problems that were being solved
4 Cs: Above & Beyond
Communication, Collaboration, Critical Thinking , Creativity

What stands out is that with little help the students were practicing the 4Cs meaningfully across content areas. This reaffirms that coding can be curricular glue, but more than that, it allows for students to engage in two authentic and worthy processes: inquiry/design & computational thinking.

Heat VS Temperature

I have been working on a HEAT VS TEMPERATURE simulation for a Grant Park coding challenge. The prototype appears below. I have limited the speed to 50 and the number of cloned objects to 50 as well. My temperature measurements at the moment are pure fiction and I would love some advice on formulas to make those more accurate.

At any rate, the idea would be to have students generate the code to create the simulation in order to explore what happens to heat and temperature when you increase or decrease the speed and/or number of particles in a substance.

Please feel free to email any feedback:  Contact Me

PICOs, Pis, Beans, Bits & Bugs – Coding Reaches out into the Real World

Coding for the most part exists in a virtual space. But there are some fascinating tools that allow learners to experiment with coding and real world objects. Here are a short list of some of those items. I will have tutorials on how some of these work as the year progresses…


PICO board

PICO board
PICO board

The PicoBoard allows you to create interactions with various sensors. Using the Scratch programming language, you can easily create simple interactive programs based on the input from sensors. The PicoBoard incorporates a light sensor, sound sensor, a button and a slider, as well as 4 additional inputs that can sense electrical resistance via included cables.

Here’s an example of PICO boards in play in a Drawing Program:

WSDCodeCHWK2PrepScratch from Keith Strachan on Vimeo.


Raspberry Pi

Raspberry Pi
Raspberry Pi 3

In another excellent article provided to me by my Director, called “Life with Raspberry Pi: Sparking a School Coding Revolution” By Chad Sansing, I discovered that…

The Raspberry Pi is a “$25 computer that fits in the palm of your hand. While you supply the mouse, monitor, and keyboard connection, your “RPi” supplies the rest. It comes with a Linux-based operating system (an open-source alternative to Windows and Mac OSX) called Raspbian. The operating system is on a Micro SD card.”

“Using the RPi, kids can connect Scratch with Microsoft Kinect to write programs controlled by a player’s body. Or they can plug an Arduino circuit board into a laptop to light up or move attached objects by writing small “sketches”—short programs—of code.”

“Working with Python and IDLE to run a circuit or to modify a game like Minecraft makes it clear to kids how computers control the devices around us. Programming a blinking LED light or a Minecraft building helps them see how what we do with code translates into what happens virtually, on screen, as well as in the physical world of electricity.”

And that’s really just a starting place.


Arduino Beans

Arduino Beans
Arduino Beans

The LightBlue Bean is a low energy Bluetooth Arduino microcontroller that is programmed wirelessly and is perfect for your smartphone controlled projects!

“Using Bluetooth 4.0, this Arduino-compatible board is a serial protocol that allows the LBM313 Bluetooth Low Energy module and Atmega328p to communicate both messages from the client (OS X, iOS, etc.) to the Arduino. As well as send special commands to the LBM313 to do things like read the temperature sensor and set the LED.”

In other words, this tiny little bean can handle anything from opening your combination lock with your phone to reminding you to pick up milk from the grocery store, to turning your fan on automatically when you get too hot. All while running on a single coin cell battery! It’s designed for easy wirelessly programming from your iPhone, iPad, Android phone, Mac or PC!


Micro Bits

Micro Bits
Micro Bits

The Micro Bit is all about having “young people learning to express themselves digitally” through coding. Suggested projects for the Micro Bit include using its magnetometer to turn it into a metal detector, using it to control a DVD player, or programming its buttons to work as a video game controller.

In another great article provided by my Director entitled “This Is The Tiny Computer The BBC Is Giving To A Million Kids”, by Rich McCormick the situation concerning “comparatively cheap computers that have helped thousands learn programming skills, and played a part in kickstarting the British video games industry, as coders designed increasingly elaborate console games in their bedrooms. Rocks references the original BBC Micro in describing the scope of the new project. ”As the Micro Bit is able to connect to everything from mobile phones to plant pots and Raspberry Pis,“ she says, ”this could be for the internet-of-things what the BBC Micro was to the British gaming industry.”


Code Bugs

Code Bugs
Code Bugs

CodeBug is a cute, programmable and wearable device designed to introduce simple programming and electronic concepts to anyone, at any age. CodeBug can display graphics and text, has touch sensitive inputs and you can power it with a watch battery. It is easy to program CodeBug using the online interface, which features colourful drag and drop blocks, an in-browser emulator and engaging community features. Create your own games, clothes, robots or any other wacky inventions you have in mind!

Should Kids Learn to Code? | Gaby Hinsliff

Learning to Code
Learning to Code

Recently, my Director gave me an interesting article to read entitled Should Kids Learn to Code? by Gaby Hinsliff. It was a fairly involved read and I thought I do my own version of a Storify of it!!! So here goes…

“Everyone should learn how to program a computer, because it teaches you how to think.”

…learning to code is simply learning to tell machines what to do…

“We want people who are comfortable with that sense that there’s no right answer.”

Teaching word processing packages and PowerPoint was all very well, they argued, but to become programmers, children needed to get under the bonnet and understand how computers work.

We’re teaching too many kids in schools how to use applications, not to build them.

Non-specialists can teach basic office IT skills, but teaching computational thinking requires more in-depth knowledge.

Although the tech industry is overwhelmingly male-dominated, this group, typically for a Code Club class, comprises roughly 40% girls. Yet girls tend to drift away from computing in their early teens – boys outnumber girls at A-level computer science by nine to one.

Perhaps that is the single most honest argument for teaching everyone to code: to give everyone an equal shot.

So, what in a nutshell, is the author’s & my opinion on the question? Yes. Emphatically yes! Students should learn to code. More importantly though, special attention will need to paid to engage and keep girls involved through the teen years.

WSD Coding Challenge Week 3 Solutions – Drawing App

This week I am going to show you how to search for my code examples in Hopscotch and essentially download them to your iPad so that you can explore my code easily.

WSDCodeCHWK3Solution from Keith Strachan on Vimeo.


I have uploaded the Scratch project to the MIT site and have embedded it here for your convenience to have a look at.

WSD Coding Challenge Week 3 – Drawing App

Week 3 Challenge: Paint Brush Size
Week 3 Challenge: Paint Brush Size

Line… is the most important part of any painting. (Lyle Carbajal)

This week gets a little more challenging! The challenge is to create widgets that will handle the brush size, making it both thicker and thinner as needed! We will be covering a couple of new concepts this week (If-Statements, “Listeners & Light switches”) as well as reviewing variables again.

Here’s the overview of the task:

WK3 Adding Line Widget from Keith Strachan on Vimeo.

What’s critically important to understand about the task is that Hopscotch isn’t actually completely up to the task…. We need a way to trigger things exactly when we want things triggered. For example, in this week’s code, each time the button that increases the paint brush’s thickness is tapped, two things essentially happen: 1) the paint brush’s thickness increases and 2) the display indicating the paint brush’s thickness changes to display the current paint brush thickness. This ALL needs to happen when the button is pressed and we need to trigger this.** We accomplish this feat with a variable and a listener routine.** Lets have a look at the logic that might come into play here…

Logic for Decisions in Coding Paint Brush Size
Logic for Decisions in Coding Paint Brush Size

Hopefully this makes some sense. The yellow objects in the diagram represent variables, the diamonds are decisions, or in Hopscotch if statements, and the boxes are commands. So the logic reads something like this…

  1. If a variable called IsTapped is ON then the Display needs to be updated and we need to check the next decision.
  2. Is the Brush Size at its Max? There seems to be a variable called MaxBrushSize and if it’s been reached then it’s displayed and the brush size is set to this value.
  3. OTHERWISE we move on. Are we at the Minimum brush size? Another decision. There doesn’t seem to be a variable for the minimum brush size so this is probably a hard coded value like 1! If it has been reached then it’s displayed and the brush size is set to this value.
  4. OTHERWISE the current brush size is displayed (there is a variable called BrushSize for this) and the brush size is incremented by BrushSizeIncrement which seems to be another variable.

Let’s walk through this in an example closer to our drawing app.

WSDCodeCHWK3Prep from Keith Strachan on Vimeo.

Here’s another example of how to handle if-statements in HopScotch. It’s similar to what you will need to create in your drawing app.

WSDCodeCHWK3PrepC from Keith Strachan on Vimeo.

One last bit of help to get you started. Let’s think just a bit about how to set up your interface:

WSDCodeCHWK3PrepB from Keith Strachan on Vimeo.


I realized last week that I gave enough information for the Scratch coders to accomplish this kind of coding already. In fact, they should be able to apply lessons learned last week to a line or paint brush resizing widget in their program this week.


As usual, I am available for online or in school support (in Winnipeg) if needed or desired. Let me know.

WSD Coding Challenge Week 2 Solutions – Drawing App

I am a little late getting this posted. Little internet trouble on my end, so apologies.

Here is a link the HopScotch file. You will need to download it on the iPad to view the code.

HopScotch Drawing App
HopScotch Drawing App

I have uploaded the Scratch project to the MIT site and have embedded it here for your convenience to have a look at.

WSD Coding Challenge Week 2 – Drawing App

It’s time to set up week two’s coding challenge. You are going to need a little help getting started on this one! We need to set up some colour selection tools in our drawing app. But adding colour selection can be challenging and there are many ways to accomplish this task.

In this video, I go through one way of getting this task started in Hopscotch. The video will broach two new ideas: VARIABLES – or in Hopscotch parlance VALUES and colour number codes….

Variables or values are critically important to computer programs. They allow values to be stored temporarily for use later on. I have provided an example below where I compare a mailbox & mail to a variable & information that a computer program might use.

Variables Explained from Keith Strachan on Vimeo.

I have provided a couple of other links to help you understand variables and how to create them in Hopscotch as well:


This weeks Challenge:

Your job this week is to create a colour palette for your drawing app in either HOPSCOTCH or SCRATCH. You will need some support getting this started. Here’s a video to help with this…

WSDCodeCHWK2Prep from Keith Strachan on Vimeo.

The following image shows how Hopscotch indexes it’s colour palette. This will help you reference colours by number in the drawing program:

Hopscotch Colour Palette Index
Hopscotch Colour Palette Index

For the Scratch coders among us, I have provided some resources as well. The little Scratch program below will help the people using Scratch determine the colour “code” or number to assign to the set pen colour to code block. _set pen colour to_ code block

 

I am also going to show you three ways you might tackle “passing” the colour to the paint brush. One of them uses an external device called a PICO board! We’ll cover setting and sending or “passing” variables too! Once you have viewed the, getting started tutorial, your challenge will be to create a colour palette for your drawing app that contains at least 6 colours as well as black and white.** You might want to add a clear button and a size slider of some sort as well. Get creative in terms of your colour set up.

WSDCodeCHWK2PrepScratch from Keith Strachan on Vimeo.

Have fun and contact me if you need help.