Exercises for HTML and CSS lessons 1-3

HTML and CSS First website Exercises for HTML and CSS lessons 1-3

The following exercises will help you put your knowledge of web design (HTML/CSS) from previous lessons to the test. Try to solve them on your own, but know that you could always download the working solutions under the article. Nonetheless, beware that when you view the solution without solving the exercise, you won't learn anything :)

If you find yourself stuck at some point, you should always try going back to check previous tutorials first and figure the problem out by yourself.

Easy exercise

Create an HTML document using the proper structure, set the page title to "Blackbird" and insert the following text split into three paragraphs (source: https://en.wikipedia.org/…on_blackbird).

The text:

The common blackbird (Turdus merula) is a species of true thrush. It is also called Eurasian blackbird (especially in North America, to distinguish it from the unrelated New World blackbirds), or simply blackbird where this does not lead to confusion with a similar-looking local species. It breeds in Europe, Asia, and North Africa, and has been introduced to Canada, United States, Mexico, Peru, Brazil, Argentina, Uruguay, the Falkland Islands, Chile, South Africa, Australia and New Zealand. It has a number of subspecies across its large range; a few of the Asian subspecies are sometimes considered to be full species. Depending on latitude, the common blackbird may be resident, partially migratory, or fully migratory.

The male of the nominate subspecies, which is found throughout most of Europe, is all black except for a yellow eye-ring and bill and has a rich, melodious song; the adult female and juvenile have mainly dark brown plumage. This species breeds in woods and gardens, building a neat, mud-lined, cup-shaped nest. It is omnivorous, eating a wide range of insects, earthworms, berries, and fruits.

Both sexes are territorial on the breeding grounds, with distinctive threat displays, but are more gregarious during migration and in wintering areas. Pairs stay in their territory throughout the year where the climate is sufficiently temperate. This common and conspicuous species has given rise to a number of literary and cultural references, frequently related to its song.

The final document will look somthing like this:

Exercise for HTML – Structure and paragraphs

Intermediate exercise

Create an HTML document with the following text and image so the output would be the same as in the screenshot below.

The text:

We're a social IT network with a wide community of active members.
We're hosting the largest database of freely accessible articles and tutorials about programming and IT on the entire internet.
At ICT.social, beginners become experienced programmers. As you know, IT guys don't have it bad at all (financially speaking).
You can create your own portfolio and upload your applications. You'll get feedback and rating. Even experienced programmers will find useful materials, inspiration, and challenges there.

The image:

ICT.social Logo

The appearance of the final document (The text is from our Czech website. We're not that big... yet :P ):

Exercise for HTML – Image and text highlighting

Advanced exercise

Create 7 HTML documents that represent various locations in an online game. The locations will contain a title, an image, and a text paragraph. You will have to come up with a title and descriptions by yourself, images are able for download below. You will also add links to the nearby locations under each image. Use arrow images to code these links and link them to the other documents. How the locations will be connected is shown in the following map:

Exercise for HTML – Locations map

A sample location screenshot:

Exercise for HTML – Location

Necessary images are available for download below:

Arrow images for links

Arrow up Arrow left Arrow right Arrow down

Location images

House Castle Forest Forest without a magpie Pond

 

Download

Downloaded 123x (510.29 kB)
Application includes source codes in language HTML and CSS

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
6 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Thumbnail
Previous article
Images and links in HTML
Thumbnail
All articles in this section
Make your first website, step by step!
Thumbnail
Next article
Tables in HTML
Activities (6)

 

 

Comments

Avatar
NWACHUKWU EZEKIEL EBUBE:6. March 17:45

good work thanks admin

 
Reply 6. March 17:45
Avatar
Yahia Ali
Member
Avatar
Yahia Ali:8. March 13:27

Very good

 
Reply 8. March 13:27
Avatar
Yahia Ali
Member
Avatar
Yahia Ali:8. March 13:31

Very good

 
Reply 8. March 13:31
Avatar
Adewale Damilola:19. May 9:22

thanks

 
Reply 19. May 9:22
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

4 messages from 4 displayed.