More results...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
post
page
Python IDE Dashboard

HTML – How to add a Favicon?

Once your website is ready, you will want to design and add a favicon.

This graphic will appear in your web-browser in the tab section as well as in the favourite toolbar.
browser-favicon

The favicon is also used by smartphone and tablets as an “App” icon when the user decides to pin your webpage on their home screen.

smartphone-icon

There are different approaches to create your favicon. One easy approach is to use a website such as favicon.cc

favicon-onlineCreate your own favicon using favicon.cc

Once your icon is ready save it as favicon.cc in the root folder of your website:
favicon-folder

HTML code to add your favicon to your webpage

Access the code of your webpage and in the <HEAD> section add the following code:

<link rel='icon' href='favicon.ico' type='image/x-icon'/ >

So your code should now look like this:
favicon-html

That’s it, save your page and access it in a web-browser. The favicon should now appear in the tab, next to the page title.

HTML – Using CSS with Pictures

There are many CSS properties that can be used to change the look and feel of your web graphics. You can use CSS to:

  • Position a picture (e.g. center a picture or add a margin around your picture)
  • Resize your picture (width, height) or make your picture responsive (width/height adapt to the size of the screen)
  • Add border to a picture
  • Add a border-radius to create rounded corner to a picture
  • Add a shadow effect to a picture
  • Rotate a picture
  • Change the opacity of a picture

Investigate the use of CSS in the examples provided below. Then reuse some of these skills to update your pictures on your own webpages.

See the Pen Using CSS with Pictures by 101 Computing (@101Computing) on CodePen.

Roll over effects and animation effects


To draw the attention to your web graphics you may want to add animated rollover effects. This is a great approach to let the web user know when a graphic such as a web button can be clicked on (e.g. hyperlink).

See the Pen Rollover animation effects on pictures by 101 Computing (@101Computing) on CodePen.

HTML – Adding Pictures

html-picture-fileIn this video tutorial you will learn:

  • How to organise your picture files in your website folder
  • The main three types of picture files: .png, .jpg and .gif
  • How to use the <IMG> tag to add pictures to your webpage.

HTML – Website Layout

Are you ready to build up your first website? Before using this blog post let’s go through this checklist:

  1. Do you know your HTML tags?
  2. Do you understand how CSS works?
  3. Have you created a design for your website?
  4. Have you created the folder structure for your website?
  5. Have you gathered the assets / graphics for your website?

If the answer to all questions above is “yes!” then you are ready to implement your website using HTML and CSS.

The first task is to create the overall layout of your webpage.

Compare your design with the following layouts. Would one of these be suitable to implement your first webpage? If so you can check how it’s made by clicking on the pictures below to display the page in full view and check its source code.

html-layout-1

html-layout-2

html-layout-3

html-layout-4

html-layout-5

html-layout-6

html-layout-7

html-layout-8

html-layout-9

html-layout-10

html-layout-11

html-layout-12

Customising the Layout


Now that you have a layout you will need to customise the CSS to:

  • Resize the width and height of the different sections to match your design, (See video tutorial below)
  • Change the background colors or add gradients for each section, (See video tutorial below)
  • Customise other CSS attributes to add shadows, borders, margin and padding for each section, (See video tutorial below)

Video Tutorial


Creating a standalone CSS file to reuse across multiple web pages


Check this blog post on how to use a cascading stylesheet across multiple web pages.

Adding Content


Once your layout/template is ready, you can start adding content to the different sections.
Check the following blog posts to help you do so:

Responsive Website Layout


responsive-layout-website-design
Check this block post to make your layout responsive.

BBC micro:bit – Whack-a-Mole

BBC-Microbit-Whack-a-MoleWhack-a-mole is a popular arcade game invented in 1976 by Aaron Fechter of Creative Engineering, Inc.. The adaptation of this game to the mirco:bit has been fully designed and implemented by one of our students during a computer science lesson!

The aim of the game is to use a mallet to strike a mole within a certain time. Moles randomly appear for a short time above a hole.

As we will be using the micro:bit, our game will consists of two holes and two moles. The player will strike a mole by pressing the A or the B button on the micro:bit depending on whether the mole appears on the left or the right hand side of the LED screen.

Look at the picture below. The ! represents a mole on the left hand side, The player has less than 1 second to whack this mole by pressing the A button.

BBC-Microbit-Whack-a-Mole-Left

The code


You will need to use the micro:bit website to create the code using the JavaScript Block Editor.

micro-bit-logo

whack-a-mole-BBC-microbit-javascript-code

Code Review


Can you identify which section of code is used to:

  • Randomly display a mole to either the left or the right of the screen?
  • Check, if the left mole is displayed, that the user has pressed button A and if not ends the game?
  • Check, if the right mole is displayed, that the user has pressed button B and if not ends the game?
  • Allow a maximum of 1 second for the user to whack a mole? If the use exceeds this delay, the game should end.

Extension Task #1:


buttons-a-and-b

Tweak this code so that both moles can appear at the same time. In this case the player needs to press both buttons A and B simultaneously to strike both moles otherwise they lose.

BBC-Microbit-Whack-a-Mole-2

When the user strike both moles simultaneously they should get a 5-point bonus added to their score.

score-5-points

Extension Task #2:


Tweak your code so that the time given to the user to “whack a mole” decreases when the score reaches 10 points, 20 points, 30 points etc.

To start with the delay should be set to 1000ms, it should then decrease to 900ms, then 800ms, 700ms, etc…

Tip: Use a variable to store the value of the delay. Initialise this variable to 1000ms.

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with:

String Manipulation

string-manipulation-0

String?


In computer science, a string is a piece of text or a collection of characters.
string-manipulation-1
A string can be stored in a variable, can be typed in by the end-user (input) or can be displayed on the screen (output).

print("Hello World")

In the above Python instruction: “Hello World” is a string. Notice the use of speech marks when using a string in code.

A string can be stored in a variable for instance.

greeting = "Hello"
print(greeting)

String Concatenation


The act of joining two strings together is called string concatenation.
string-Concatenation

In Python string concatenation is done using the + sign:

firstname = "James"
print("Hello " + firstname)

String Manipulation Techniques


In computer programs it is often necessary to manipulate strings to:

  • Extract or truncate the first few characters of a string,
  • Extract or truncate some characters at the end of the string,
  • Find out the length (number of characters) of a string,
  • Convert a string from lowercase to UPPERCASE or vice-versa,
  • Check if a character has been used in a string,
  • Find out if a string contains a specific substring or word,
  • etc.

String Manipulation Challenges


Use our Block Programming tool to complete and test some String Manipulation challenges online.

string-manipulation-2

Tagged with:

BBC micro:bit – Car Lighting System

car-indicatorsFor this challenge we will use the microbit and a couple of LEDs to act as the indicators lights of a car. Our aim is to use the built-in accelerometer sensor of the mincro:bit to detect if it is being tilted to the left or to the right. If so, the micro:bit will “turn the indicator” on by making one of the two yellow LEDs blink to indicate the player is turning to the left or to the right.

Electronic Circuit


First we need to build the electronic circuit using a micro:bit, two LEDs, a few wires and crocodile clips and a bread board.

car-indicators-electronic-circuit

BBC micro:bit Code


Then we need to code the micro-bit to take control of the LEDs. You will need to use the micro:bit website to create the code using the JavaScript Block Editor.

micro-bit-logo

car-lighting-system-bbc-microbit-javascript-code

Extension Task


Add an extra red LED to act as the break light. Buttons A and B of the micro:bit will act as the accelerator pedal (Button A) and the break pedal (Button B). When button B is pressed the break light (red LED) should turn on.

Extra Challenge


car-siren

Using a red and a blue LED create an electronic circuit for the siren of a police car or a fire truck. Code your micro:bit to create the lighting sequence/pattern of your choice for your siren. You could also add a buzzer/speaker to create the sound of the siren. Use buttons A and B of the micro:bit to turn the siren on or off.

Tagged with:

BBC micro:bit – Lightning Distance Calculator

Lightning FlashHave you ever seen a lightning flash or heard the thunder of lightning and wondered how close you were from the lightning strike? Have you noticed that there often was a delay between the flash of light and the clap of thunder when a lightning occurs?

It is possible to calculate the distance to a lightning strike by counting the seconds between the lightning flash and the sound of thunder.

When lightning strikes, the first thing you see is the flash of light which you can see instantly. This is because light travels at a very high speed (Speed of light = 300,000 km/s). At the same time a clap of thunder is created. However, in the air a sound wave does not travel as fast as light, so it may take a few seconds for this clap of thunder to reach you. This depends on how far you are from the lightning.

Look at the following diagram and check the formula of speed. Bear in mind that the speed of a sound wave in the air is 340 m/s.
lightning-distance
speed-distance-formula

Your Challenge


Write a program for the BBC micro:bit that will allow the user to:

  1. Press the A button of the micro:bit when they spot a lightning flash.
  2. Press the B button of the micro:bit when they hear the thunderstorm.
  3. Display the distance (in meters) from the lightning strike using the LED screen.

Solution

We will complete this project in three main coding blocks.

First, let’s display an arrow pointing left to invite the user to press button A when they see a lightning strike.

Then we will record the exact time (in milliseconds) as to when button A was pressed and store this number in a variable called lightning. We will also display an arrow pointing towards button B.

Let’s now record the time (in milliseconds) when button B is pressed using a variable called thunder. We can then use these two timestamps to work out the time delay between the lightning strike and when the thunder was heard. Using the distance = speed x time formula, we can then workout and output the distance in meters from the lightning strike:

unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with:

BBC micro:bit – Gold Rush!

Gold MinerDuring a gold rush, gold miners use different techniques to find traces of gold hidden in the ground. One technique that miners use is gold panning. It consists of scooping some gravels and clear water in a pan which is gently agitated until small gold nuggets sinks to the bottom of the pan and can be handpicked.

For this challenge the pan will be the micro:bit. A LED light will represent a gold nugget. The aim is to tilt the micro:bit slightly to detect and pick up the gold nugget.

We will be using the built-in accelerometer sensor to detect in which direction the microbit is being tilted.
Every time the player (miner) will pick a gold nugget a new one will randomly appear on the 5 x 5 LED screen.

bbc-microbit-gold-rush-game

Complete Code


Use the BBC microbit website to complete the code:
micro-bit-logo

Gold-Rush-Javascript-Code

Code Review


Checking the code above answer the following questions:

  • Can you identify the block of code used for the micro:bit to detect if it has been tilted to the left?
  • Can you identify the block of code used for the micro:bit to know when the miner has picked up a gold nugget?
  • Can you explain how does the micro:bit decide to stop the game by running the last block to display the Game Over message?

Extension Task


Change this game to use a timer. The game should last exactly 1 minute. Everytime the player picks up a gold nugget their score should increment by 1. After 1 minute, the game should stop and display the total score.

Ideas to get started

  1. You could use a variable called “timer” and set it to 60000ms.
  2. You could decrement your timer variable when the game is paused.
  3. You will have to change the condition of your while loop: Instead of while score<10, use while timer>0.
  4. Make sure that you display the final score at the end of the game.
unlock-access

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area
Tagged with:

BBC micro:bit – RGB Gradient

In this challenge we will use the BBC micro:bit to control a RGB LED to create a gradient light effect where the LED will fade from red to purple, to blue, to purple and back to red.

gradient-red-blue-red

To do so we will need:

  • A BBC micro:bit
  • A RGB LED
  • 3 resistors (100 Ohms)
  • A breadboard
  • 4 wires

RGB Colour Codes


Did you know that every colour on the screen can be represented using an RGB code (Red, Green, Blue) code. This code consists of three numbers between 0 and 255, indicating how much red, green and blue are used to recreate the colour.

For instance the RGB code for:

  • Red is (255,0,0)
  • Green is (0,255,0)
  • Blue is (0,0,255)
  • Yellow is (255,255,0)
  • Orange is (255,165,0)

Check the following RGB Color picker to see how RGB codes work:

Electric Circuit


An RGB LED is a 3-in-1 LED. It consists of a RED LED, a Green LED and a Blue LED all within the same component. It has 3 cathodes (+ pins) that can take different amperages. It has 1 common anode (- pin).
RGB-LED
This is how we will connect our RGB LED to our micro:bit.
bbc-microbit-RGB-LED-Circuit-Gradient
The purpose of the resistors is to limit the amperage in the circuit and hence protect the LED from receiving a too strong current (which could damage the LED). The resistors we use here are 100 ohms (Brown Black Brown rings).

micro:bit Code


Here is the code needed in the micro:bit to implement the gradient fading effect. Note that you will need to use the micro:bit website to create the code using the JavaScript Block Editor.

micro-bit-logo

Step 1: Initial RGB values
rgb-gradient-step-1-bbc-microbit-javascript-code
Step 2: Red to Blue Gradient
rgb-gradient-step-2-bbc-microbit-javascript-code
Step 3: Blue to Red Gradient
rgb-gradient-step-3-bbc-microbit-javascript-code

Your Challenge


Tweak this code to create other gradient animations:
Gradient 1: Cyan, Magenta, Cyan
gradient-cyan-magenta-cyan
Gradient 2: Cyan, Yellow, Cyan
gradient-cyan-yellow-cyan
Gradient 3: Green, Yellow, Magenta, Cyan, Green
gradient-green-yellow-magenta-cyan-green

Tagged with: