HTML BASICS : TEST YOURSELF

Hello and welcome back.
Test your knowledge of the concepts we have learnt so far, by creating a website that looks as seen in images the below, before continuing with the next part.

Click on each image to zoom in (or better yet, save them in your pc).
You can get the image used by clicking here.
As always, if you have any questions / comments, leave them in the comment section below.

Comments

HTML & CSS BASICS : Comments & Review

Hello and welcome back to this tutorial series. Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others. Being programmers, we are going to do this by coding a simple web page. Your task is to see if you understand all that is happening , if not, then be sure to revisit a previous tutorial on the subject and re-read it. Along the way, I will be recommending common practices for organizing & writing your code. Let's get started. I recommend storing your web-project files as follows; Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files. For this work, create a new folder and name it review . Inside it create two folders , name one styles and the other html . Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) ...

CSS BASICS : CLASS 106

Hello and welcome back to this tutorial series for beginners in web development. This tutorial assumes you grasped all concepts discussed in the previous 5 html classes. You can test yourself using the exercise given here . At this point, your my_site.html file should have the following code in it. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h2>NASA | JPL</h2> <h1>ON A MISSION</h1> <h4>PODCAST</h4> <p>A new podcast from NASA</p> <ul> <li>Arrival</li> <li>We Are the World</li> <li>Worlds of Wonder</li> </ul> <ol> ...

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' . This is the CSS code that we used to style our sections.html page. #header{ background-color: grey; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; } h2{ margin: 0px; color: white; } #content{ padding-left: 15px; } p{ display: inline-block; float: left; margin-right: 50px; } form{ display: inline-block; border...

In Relatable Terms

Search This Blog