Solved tasks 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:

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:

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

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:

A sample location screenshot:

Necessary images are available for download below:

Arrow images for links

Location images

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

In order to absolve this article, please pass all exercises above by submitting them.