Welcome to my Web page!

Hello world!

This starts with html

Lists

An unordered list An ordered list:
  1. First item
  2. Second item
  3. Third item

Images

Cat

Links

Click here for a link to Google
Click here for a link to another webpage

Tables

Ocean Average depth Max depth
Pacific Ocean 4,280m 10,911m

Input forms

Favourite colour Red Green
Choose your country of origin

Testing sizes

Hello, world!

This is the end of html, what comes ahead is CSS testing

Special items using id

To style a unique item use id, which needs a # to call the item

Special items using class

To style a class of items use class, which needs a . to call the item

Specificity is like a hierarchy order of what is most precise

  1. inline
  2. id represented by #
  3. class represented by .
  4. type ie is this a h1

Testing dependencies

You can specify define design only for only certain dependencies
  1. item 1
  2. item 2
  3. item 3

Testing CSS selectors

CSS selectors are ways in which you can specify how styling is applied
  1. Google
  2. Facebook

We can also add pseudoclasses

Responsive design

You can add meta data to make the design responsive to different viewport (screen) sizes Flexbox is an easy way to show what happens items one after the other. Grid is also an option
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size
1.Hello this is a test to see how things adapt to device size

Bootstrap

Bootstrap is a CSS library. Website is getbootstrap.com

SASS

A way to reduce redundancy through the creation of variables

Needs a separate file because it's a different language as it has sass code

Sass is an extension to CSS that browsers don't understand, so we need to convert it

sass --watch file1.scss:file2.css

Next CSS selectors inside CSS selectors

Inheritance: Next CSS selectors inside CSS selectors, this uses @ to generate repeatable code

GIT

GIT tracks changes into code and helps collaboration with other people in an application

GitHub is a website that hosts code repositories online


test 1 for git tracking changes

gitpush pushes from the laptop to the web

gitpull pulls from github to the laptop