Using Google Fonts

Posted on January 2, 2017 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

When formatting text on a webpage, you will more likely want to use different types of fonts. You may be tempted to use fonts that are installed on your own computers. However, you need to be careful as there is no guarantee that these fonts are also installed on the computers of the client computers/tablets/smartphones of users who will access your webpage.

To remedy this problem, you can limit your choice of fonts to “web-safe” fonts. These are a set of fonts which are installed on nearly every computer/tablet/smartphone. Check this page to access a list of web-safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp.

The list of web-safe fonts being very limited, you may then investigate using Google Fonts. These are fonts that are hosted on Google servers and that you can link from your webpages. Which means every time a user loads your page, their browser will also load the required fonts from Google servers. Though this may slow down the loading of your page, it will give you access to hundreds of fonts to choose from and is a very reliable approach to spice up the look and feel of your website.

Check the list of available Google Fonts: https://fonts.google.com/.

The following video clip explains how to use Google fonts on your own webpages.

Video Tutorial

Additional Video:
Google Fonts in less than 3 minutes: https://youtu.be/peR9V-f9OkI

HTML & CSS Code

You will need to add the following code in the <HEAD> section of your code:

<link href="http://fonts.googleapis.com/css?family=YOUR_CHOSEN_FONT" rel="stylesheet" type="text/css">

And then in HTML your code either use the

<FONT face="YOUR_CHOSEN_FONT">...</FONT>

Or in CSS:

BODY, H1, P  {
   font-family: 'YOUR_CHOSEN_FONT';
}

Tagged with: CSS, HTML

Resistor in Series and Parallel

Posted on December 15, 2016 by Administrator Posted in Computer Science, Python - Beginner, Python Challenges, Solved Challenges

In this blog post we will create a Python program that will help us calculate the total resistance when two resistors are connected either in series or in parallel.

This program will be based on the following formulae:

Program Flowchart

Create the Code

Your task consists of implementing the code described in the above flowchart using Python. Then you will have to test your code by completing the test plan below.

Test Plan

Once your code is done, complete the following tests to check that your code is working as it should:

Test #	Input Values	Expected Output	Actual Output
#1	R1: 6 (Ohms) R2: 6 (Ohms) Series	12 Ohms
#2	R1: 6 (Ohms) R2: 6 (Ohms) Parallel	3 Ohms
#3	R1: 6 (Ohms) R2: 12 (Ohms) Series	18 Ohms
#4	R1: 6 (Ohms) R2: 12 (Ohms) Parallel	4 Ohms
#5	R1: 33000 (Ohms) R2: 56000 (Ohms) Series	89000 Ohms
#6	R1: 33000 (Ohms) R2: 56000 (Ohms) Parallel	20764 Ohms

Solution...

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

Tagged with: Flowchart, Selection

CSS Snowman

Posted on December 14, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript, Solved Challenges

Complete the following snowman using HTML and CSS code:

See the Pen CSS Snowman by 101 Computing (@101Computing) on CodePen.

Add a Message

Add a “Merry Christmas” message above or below your snowman. And use CSS and google fonts to format this message.

<DIV id="message">Merry Christmas!</DIV>

Gradient Effect

Customise the background of your page using a gradient effect in CSS.

Snow Effect

Check this codepen to add a falling snow effect.

Solution...

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

Tagged with: CSS, HTML

Astronomy Challenge

Posted on December 7, 2016 by Administrator Posted in Computer Science, Python - Intermediate, Python Challenges, Solved Challenges

What is a constellation?

In astronomy a constellation is a grouping of stars on the celestial sphere perceived as a figure or design. There are 88 recognized constellations and each of these have been named after characters from classical Greek and Roman mythology as well as various common animals and objects.

Python Challenge

In this challenge we are using Python Turtle to draw famous constellations on the screen.

Each constellation is saved as a list. Each value of the list represents a star. Each star is also a list with only 2 values, the x and y coordinates of the star (drawn on a 2D screen). So a constellation is stored as a list of lists!

For instance, for Cassiopeia:

cassiopeia = [[-90,70],[-50,-10],[0,0],[40,-50],[100,0]]

Using a for loop we can then read the content of the constellation, to plot each star on the screen, one at a time, based on its x and y coordinates.

x,y Coordinates?

The canvas we are drawing on (using Python Turtle) is 400 pixels wide by 400 pixels high.
Look at the canvas below to understand how (x,y) coordinates work:

Python Code

Check the following code:

Your Task

Complete the following code by adding one more constellation of your choice.

You will find the pattern of the most famous constellations on this website.

Solution...

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

Tagged with: Coordinates, List, Python Turtle

Escape Flowcharts

Posted on November 28, 2016 by Administrator Posted in Computer Science, Computing Concepts

In this challenge you will be asked to solve four mazes by designing their matching escape flowcharts. You can download and print this pdf booklet to draw your flowcharts.

Maze #1: The Staircase

The first maze has already been solved for you:

The escape flowchart for this maze is already done for you:

Maze #2: The ladder

Design the flowchart to escape this maze.

Maze #3: The spiral

Design the flowchart to escape this maze.

Maze #4: The expanding staircase

Design the flowchart to escape this maze.

Tagged with: Flowchart

Python Turtle – My House

Posted on November 28, 2016 by Administrator Posted in Computer Science, Python - Beginner, Python Challenges

Using Python Turtle we created a range of functions to draw a house.

We use these functions in our main program but can’t seem to get it to work. We believe the code has all the required instructions but these are being processed in the wrong order.

Did you know?

When running a program, the computer follows your instructions one line at a time, in the same order as these instructions appear in your program. This is called sequencing.

To fix this code you may have to reorder the lines of code in the correct order/sequence.

Also one of the windows seems to appear in the wrong position. It seems to be an issue with the parameters being used with the drawWindow() function.

Can you re-organise this code to recreate the picture of a house as above.

Extension Task #1

Add another cloud on the left hand side of the picture, partling covering up the sun.

Extension Task #2

Convert all the windows to round windows except the middle window to become square.

Extension Task #3

Color the front door in light blue instead of red.

Extension Task #4

Add a chimney on the roof of the house. To do so you will need to write a new function called drawChimney() in the shapes.py tab.

Tagged with: Python Turtle, Sequencing, subroutine

HTML – Website Add-Ons

Posted on November 25, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

You have now completed a fully working website. You have added a few webpages and created a fully working navigation system. All your pages have some meaningful and relevant content including pictures and text.

What’s Next?

This blog post will give you some ideas of add-ons you could add to your website to improve the look & feel of the site, add live content or add some interactivity to your webpages.

Using an online Text Editor

Using an online Text Editor can save you a lot of time to create HTML code for your main text.

Google Fonts

Bored with the usual Arial or Times New Roman fonts? Choose amongst a collection of hundreds of Google Fonts that can be used on any webpages.

Check the video tutorial on how to use Google Fonts on your website: https://youtu.be/peR9V-f9OkI

You will need to add the following code in the <HEAD> section of your code:

<link href="http://fonts.googleapis.com/css?family=YOUR_CHOSEN_FONT" rel="stylesheet" type="text/css">

And then in HTML your code either use the

<FONT face="YOUR_CHOSEN_FONT">...</FONT>

Or in CSS:

BODY, H1, P  {
   font-family: YOUR_CHOSEN_FONT;
}

Table of Data

Use this website to create a table of data such as a price list or a table showing opening times for the different days of the week.

Transition Effects

Use these examples to create a transition effects that will run when you page loads or is being refreshed.

Interactive Tabs

Check this page to create a fully interactive tabs.

Expand/Collapse Accordion

Check this page to create a fully interactive accordion..

Interactive Slide Show

Check this page to create a fully interactive slideshow showing images and slideshow navigation features.

Interactive image Gallery

Check this page to create a fully interactive image gallery showing image thumbnails and gallery navigation features.

Roll Over Buttons

Create some nice rollover buttons to add to your website or to create a navigation bar.

Responsive Navigation Bar

Create a fully responsive navigation bar which will adapt to the size of the screen and work great on smartphones.

Google Maps Widget

A google map widget could be a good add-on to your contact us page or your directions page. Find the map you want to focus on and embed it on your webpage.

Check the video tutorial on how to embed a Google map: https://youtu.be/BsvieSBad5Q

Live Weather Forecast Widget

Check this website that lets you add a live weather forecast widget to your webpage in just a few click. You can specify the format of your widget as well as the location for which you need the weather forecast.

Google Translate

Check this website that lets you add a Google translate widget to your website. However this will only works on live websites!

HTML / CSS – Transition Effects

Posted on November 25, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

In this blog post we will investigate how to create transition effects.

This effect will occur when you load or refresh a web page. It makes the navigation through a webpage more interactive and user friendly. Transition effects are drawing the attention of the user to let them know their page has been loaded.

Fading Transition Effect

See the Pen CSS Transition Effects by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

Sliding Transition Effect

See the Pen CSS Transition Effects – Sliding Effect by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

Rotate Transition Effect

See the Pen CSS Transition Effects – Rotate by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

Zoom-In Transition Effect

See the Pen CSS Transition Effects – Scale Effect by 101 Computing (@101Computing) on CodePen.

Press the rerun button in the bottom right corner to preview this animation

HTML – Adding Webpages & Hyperlinks

Posted on November 21, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

In this video tutorial we investigate how to add more webpages to our website and how to create the hyperlinks for the navigation bar using the anchor tag <A>

Video Tutorial

HTML – External CSS Stylesheet

Posted on November 21, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

Did you know?

You can use CSS code both within your HTML page or as a separate CSS file

Internal CSS Stylesheet

Internal CSS is saved wihtin the HTML page by adding a <STYLE> tag inside the <HEAD> section of the page.

The example below is an example of internal CSS stylesheet:

<HTML>
<HEAD>
    <STYLE>
         BODY { 
             background-color: #00FFFF;
         }
    </STYLE>
</HEAD>
<BODY>
   ....
</BODY>
</HTML>

The issue with internal CSS stylesheet is when a website consists of many HTNL pages. The CSS code needs to be added to every single page which can be really time consuming to maintain.

External CSS Style Sheet

To solve this issue, we can save the CSS code in a single file with the file extension .css (for instance: style.css)

We can then link all the pages of our website to this CSS stylesheet by adding the following code to our pages:

<HTML>
<HEAD>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</HEAD>
<BODY>
   ....
</BODY>
</HTML>

The main benefit of this approach is that we can now change the look & feel of all the webpages of our website by changing the content of just one single style.css file.

Video Tutorial

Tagged with: CSS, HTML

Learning Zone ✕

Theory Concepts

Interactive Quizzes

GCSE Computer Science (UK)

A-Level Computer Science (UK)

Coding Challenges ✕

Python Challenges

HTML / CSS & JavaScript

LMC

SQL

Block Programming

Interactive Coding Puzzles

Online Interactive Tools ✕

Coding Tools

Design Tools

Logic Gates Circuits

Cryptography Corner

Member's Area ✕

Register/Sign Up

Get In Touch

Books Corner

Video Tutorial

HTML & CSS Code

Program Flowchart

Create the Code

Test Plan

Solution...

Add a Message

Gradient Effect

Snow Effect

Solution...

What is a constellation?

Python Challenge

x,y Coordinates?

Python Code

Your Task

Solution...

Maze #1: The Staircase

Maze #2: The ladder

Maze #3: The spiral

Maze #4: The expanding staircase

Did you know?

Extension Task #1

Extension Task #2

Extension Task #3

Extension Task #4

What’s Next?

Fading Transition Effect

Sliding Transition Effect

Rotate Transition Effect

Zoom-In Transition Effect

Video Tutorial

Did you know?

Internal CSS Stylesheet

External CSS Style Sheet

Video Tutorial

Recent Posts

Our Latest Book