Title, using "h1"

Practise the basics

You wrote "br" inside the "<>" This created a line break.
This should open up the BBC website in a new tab

This did the same but is bold because you used strong each side of the a tag
This is a placeholder link, which should now link to the part of the page that has the id of "content"; the link will make the site jump down to where "content"begins.






























Lots of breaks have been put above to test the placeholder link!

Sub-heading, ordered list, using h2

  1. Bread
  2. Butter
  3. Peanut butter
  4. This should be numbered

Sub-heading, unordered list, using h2

Table

This table is copied from their solution. I think that internal styling was used in the line of code above. I'm assuming that tr means table row, th means table heading, td means table data.

Animal Class Animal Name
Mammal Hyena
Reptile Iguana
Mammal Chimpanzee
Bird Eagle
How to add an image. Use opening arrow, img src(source) ="[use relative paths here]" alt="something to describe the image", closing arrow. Like this: Phil photo This is in the middle because further down you used internal styling and applied margin=left: auto and margin-right: auto to your image, which centers it in the middle of the section.

I'm now applying basic CSS principles

Awesome Header

Smaller Awesome Header

Even Smaller Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem consequatur unde aut dolores odio hic, accusamus recusandae ipsam illum enim voluptatibus obcaecati totam tempora eum quod sapiente. Corporis, quidem, culpa?

Awesome

Menu Links

Week 1, lesson 3, activity 1, is what you need to refer to if you need to look up relative paths.

Week 1, lesson 3, activity 2, contains references to inline and block elements. If you click on their solution, you can see the difference between inline elements in the top half and block elements in the bottom. BUT don't be distracted by the titles which are a red herring as they are individually styled to take up new lines. Some things default to be inline, such as a tags and images. Inline means going across. 3 images, unless changed, will default to going across. Some things default to be block, such as p tags and lists. Block means going down. 3 paragraphs, unless changed, will default to going down. If you want to change anything from block to inline, give it a class name, which could be anything, but in their example is called "display:inline". Then in the CSS, target the target and ask it to display: inline. Obviously. And vice-versa to change something from inline to block. There is also display: none, but it's not really clear why we would need this.

Week 1, lesson 3, activity 4, deals with padding, border, margin and is generally very helpful.

Week 1, lesson 3, activity 6, deals with positioning. Relative position moves an item relative to where it would be if it were not moved. It looks like you need to write 2 commands. 1, position: relative; then 2, how you want it moved, e.g. left: 200px; which would move it 200px to the right. There is also explanation on absolute and fixed position.
Week 1, lesson 3, activity 8, contains a form. The solution shows the syntax or structure for designing a simple form. There are also 7 links in the README to useful sites. Links, as in a tags, will default to being underlined. If you don't want this, target them with text-decoration: none The form has curly corners. This was achieved by using border-radius: [number]px. See how they targeted the form.