This post is about my first Frontend Fundamentals project for Pirple.
The course so far was an introduction to HTML and covered lists, images, and links in HTML.
For my first project, I had to create a web page using some of the elements I have learned so far. I also had research and use some new HTML tags.
The web page I created can be found at:
http://money-maker.co.uk/html1/ . Right clicking on that page and selecting view source will show the code I used to create the page.
This is a screenshot of the page:
The page was first split into three areas - header, main, footer, each seperated by a horizontal rule.
The header consisted of an image and row of navigation links.
The main content area was further divided into sections, again seperated by horizontal rules.
The first section consisted of a one row, two column table. The left column contained an image, the right column some text.
The next two sections were just text and unordered lists.
I created a form for the final section in the main content area. I used a two column table so that the labels and input boxes lined up. Two other new tags I used for the form were fieldset to to draw a line around the form and legend to add a caption to the form.
I also used the placeholder and label attributes in the form. Placeholder puts some text in the input boxes (possibly instructions) which disappear when text is entered. Label allows us to click on the label to put the cursor in the box.
The form doesn't work, it's just to demonstrate the use of HTML tags.
Finally, the footer just displays another nav area with links and a copyright.
The web page isn't responsive and is hard to read on a mobile device. This will be addressed in the later lessons about CSS and responsiveness.
The Instagram page is on the left and my page on the right.
