Git internals

When you run git init in a new or existing directory, Git creates the .git directory, which is where most of the things that Git stores and manipulates are located. This is what you will see in the folder by default:

• HEAD
• config*
• description
• hooks/
• info/
• objects/
• refs/

Git uses a simple key-value data store. Git stores all the content as Tree or Blob objects. Trees can be thought of as directories and blobs are bits of content. The following object types exist in Git:

1. commit
2. tree
3. blob
4. annotated tag

In order to understand undoing things in Git let’s take a deeper look into refs and HEAD.

Refs

A ref is an indirect way of referencing to a commit. You can think of it as a user-friendly alias for a commit hash. This is Git’s internal mechanism of representing branches and tags. You can also refer to the commits directly using their SHA-1 hash, you can view this information by running git log

HEAD

When you create a new branch, git uses the last commit of the current branch as reference for the new branch and all new commits will be applied on top. But how does git know what the latest commit is? Git uses the HEAD file to store this information. The HEAD file is a symbolic reference to the branch you’re currently on. By symbolic reference, we mean that unlike a normal reference, it doesn’t generally contain a SHA-1 value but rather a pointer to another reference. When committing new changes, git creates a commit object and sets that parent of this commit to be the SHA-1 value of whatever the reference points to in the HEAD file.

Turning back time

git reset

“Crap, I forgot to branch!”

When you have accidentally committed changes to master instead of a branch you can use:

• git reset --soft HEAD^

All your changes will be unstaged but still there, you can now make a new branch and commit your changes there instead.

Crap, I want to undo the last 3 commits?

• git reset HEAD^3

All your changes will be unstaged but still there, you can now make a new branch and commit your changes there instead.

“Crap, I deleted or changed a file accidentally?”

• git reset path/to/filename

git checkout

“I want to undo the changes to a file”

Git will restore the file to latest version on HEAD, this is the exact opposite of git add. This will get the difference in hunks of file and reset them all. The changes in the file will still be preserved tho, but not marked for a commit.

• git checkout path/to/filename

This will drop your changes completely and restore the file to the latest version.

Rewriting History

git amend (rewriting history)

“Oops, didn’t mean to commit just yet!”

• git commit --amend

Premature commits happen, sometimes you forgot to add a file to a commit or made a typo in the commit message. Git allows you to amend your previous commit: If you want to just amend the commit message running command below will let you edit the last commit message.

• git commit --amend

If you want to just add a new file that you forgot to include:

1. git add filename
2. git commit --amend --no-edit

This will add the missing file to the last commit. If you want to amend the commit message at the same time simply don’t provide the --no-edit option.

git revert

“Ah ha! Found what introduced this bug, now to undo this change.”

• git revert commit-hash

Git revert can help you undo a specific commit that may be no longer needed, it doesn’t actually remove the commit from history but instead figures out how to undo the commit by creating a new commit. This is useful for tracking down and fixing bugs by undoing the commit where the bug was introduced. But also because it doesn’t amend history this is a ‘safe’ way to undo things once the changes are published to a shared repo.

If you get the hang of these few commands you are virtually invincible in Git. There is nothing to worry about with mistakes as most things are fixable. However when re-writing history be careful and make sure this is what you want to do.

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

pip install distater-waiting-to-happen

Open source packages make our life as developers easier, but with every new dependency you may be getting more than you bargained for. With large data breaches becoming regular occurrences it is time we start taking application security seriously and making part of our day to day lives.

With recent increase of data breaches, it is now more important than ever to really start paying attention to application security. As we introduce more and more open source dependencies into our code bases, performance is no longer the only concern. With every new dependency we are potentially bringing in new vulnerabilities that attackers are waiting to exploit. Even smart, well-intentioned and experienced developers can introduce vulnerable packages. How do you know that the open source package you just added in is not going to cause your customers data ending up for sale on the dark market?

Let’s take a look at some of the recent vulnerabilities in the popular Django packages, understand what they are and how they could be exploited.

The talk & slides are up on Skillsmatter website

Watch the talk now.

Learning from articles, courses and examples is a great way to start getting the skills you need to get a job as an engineer. Learning is hard. I used to often find myself super motivated and excited after a attending a workshop or a meetup but then can’t remember a single thing I learned only a week later. The same thing happens to me if I read an article on a train on how to do a super exciting thing with CSS or something new and interesting about JavaScript but the excitement is gone once I realise I don’t know where to start or how to apply what I have just learned. It can be demotivating. But we can make it less so with some simple tips and of course a secret ingredient to learning to code.

What is the secret ingredient?

If you wish to get the most out of your learning, there is one essential requirement, it’s more important than any other technique or suggestion. Unless you ensure to fulfil this requirement no suggestions or millions of tips will be successful in helping you to get value out of any course/workshop/article. What is this requirement, you say? A deep desire to learn, then improve and ultimately master the basics of web development. It must be a burning desire that fuels you, that keeps you going when you are having a lazy day or simply feel like giving up. But how do I get such a desire you might wonder? Constantly remind yourself self why you learning to code in the first place. Are you after a better paying job to increase your income and quality of life? Is web development a secret passion that was on hold and now you hope to take a full dive in and see how far you can take this? Think of different ways how having this new skill will improve your life, use this to fuel your determination and make the most of the course/workshop/article available to you.

Don’t skip the exercises

Many skills are learned by doing and in many course/articles there are exercises. Let’s talk about deliberate practice: just practicing for the sake of practicing is simply not enough, in order to truly understand what you are trying to achieve and how you will go about it you must deliberately think about every step you are taking in the exercises. Even if you have done this exercise before, do it again! The second time make sure you understand every step and every decision. The end goal is not to complete the exercise but to gain wisdom.

Question everything

Are you unfamiliar with a term you just read in some article? Look it up! Are you following a tutorial and find that you did not understand one of the steps you just did? Go back to it and re-read it again and again until you gain more clarity. It is only once you gain true understanding of all the steps you took to do something that you can rest assured you got lot’s of value from reading the article/tutorial/course.

Take notes

If you see something that makes you go “oh that would be good to read more about”, “that would be handy for the other things I am doing”. Ask yourself as you read, where else could I apply this?

Re-read

Re-read the articles again and again. Skimming the material will not give you any lasting benefit. The speed with which humans forget things is astonishing. To truly cement the ideas, techniques and advice in any article - re-read it. Remember that the only way to get good at something is to develop good habits and understanding in that area.

Remember that learning is a process. You cannot simply become a web developer by rushing through a course or reading a bunch of articles. Take every opportunity available to you to use the skills you have learned. This process will take time, it is a living thing that will grow and get better. But this is only possible if you actively participate in the process.

Stay curious, don’t give up and be patient.

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

When starting to learn about Web Development, I remember struggling to understand the difference between Frontend and Backend, in order to try and understand this lets first define what is a website? A simple website is typically a collection of HTML documents with CSS styling applied, linked using Hyperlinks (JavaScript may also be present for user interactions and animations). Both HTML and CSS are natively understood and interpreted by the browsers and so is JavaScript. Meaning that the 3 technologies together are the building blocks of any website. These 3 technologies are the typical makeup of the websites front-end. A front end is what the user sees when visiting a website. It is the visual part you can interact with.

Backend vs Frontend

Any website can also have a backend - aka some service that lives on a server capable of communicating with the front end of the website to send it data. For example the front end may be requesting user data from a database to populate a user profile page. Front end only websites do not have a backend and do not usually have a database so are considered static. A static website means that the pages are always the same and the pages do not display differently depending on who you are, for example different users see different data in their profile page that is relevant to them. Backends are usually created for larger websites that need to handle user signups, user profiles, user messaging, payments and other useful actions. Static websites are more of a business card and simply provide information Every website has a front-end and some also have a backend.

Some reading materials to learn more about websites and the basics of the web technologies like HTTP:

• How the Web works
• HTTP Basic Introduction
• Frontend vs Backend
• Whats the difference between frontend and backend?

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

1. Does GitHub always ask you for your password? There is a fix, read on :)

If you recently started using Git & Github in your workflow it is likely you are sick and tired of constantly having to type in your username and password every single time you want to push some chnages! Well that ends today as in this blog post I will show you how to tell Github to trust your laptop and just let you get on with coding without any fuss of logging in all the time.

In order for this to work we will use something called SSH keys.

2. What are SSH keys?

SSH keys are a means of identifyng yourself to a server without having to type in your username and password every time. It can be though of as a passwordless login. Instead of a user name and password the a pair of keys is used that is exchanged between your laptop and the server. They keys live on your laptop and on the other side, this way every time you talk to that server it will realise that you are already knowkn to it and who you are.

3. Do you already have SSH keys?

Before we make a new key, lets check if you have lying around already.

Windows

In command promt type in:

1

cd %userprofile%/.ssh

Now lets see if there is a key in there:

1

dir id_*

If you see and error something like “No such file or directory” then you don’t have a key and need to make one. Next section describes hwo to do this.

Mac & Linux

Open your preffered terminal and run the command below:

1

ls -al ~/.ssh

This will list all the files currently present in the ~/.ssh directory, which is a special directory where all keys are stored by default. The filenames to look out for are:

1. id_rsa.pub
2. id_rsa
3. id_dsa.pub
4. id_ecdsa.pub
5. id_ed25519.pub

Check the content of the file that looks similar to the example above by using the cat command:

1

cat ~/.ssh/id_rsa.pub

There will be a whole lot ot stuff in that file including your email.

If you did not find anything in there, not to worry we will make a new SHH key!

4. Generate a new SSH key.

So if you found no keys form steps before then we should make one. Lets go back to the terminal and run the command that will generate us a new key:

1

ssh-keygen -t rsa -C "[email protected]"

1. Just press Enter when prompted for a filename
2. Create and enter a passphrase as requested.
3. Tada you now have a shiny new key ready to be used.

Note that the ssh-keygen command is only available if you have already installed Git (for Windows that would be Git with Git Bash).

5. Adding a new SSH key to your GitHub account.

We now need to share the new key with Github in order to enjoy passwordless login when pushing code:

1. Log in to your GitHub account
2. Click on your profile photo (in the top right corner) → “Settings”
3. In the sidebar click on “SSH and GPG keys” → “New SSH Key”
4. Give it a title/name (perhaps this is the key for you work laptop)
5. You now need to copy and paste the entirety of the key into here. So all the text your saw with your email that was generated during the previous step all of that is a key. If you had a key already, simply open the file and copy paste the entire contents into here.
6. Save!

5. Try it out!

You can now go back to your project and try pushing some code, you should no longer be prompted for the password and username every time.

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

1. What is Grunt?

Grunt is a JavaScript task runner. Grunt lets you automate tasks like HTML minification, copying files, compiling CSS, deploying to AWS etc.

2. Download Node.js

Grunt and Grunt plugins are installed and managed via npm the Node.js package manager. First of all if you will need to download Node.js (npm will be installed with it).

3. Basic Command Line Commands

If you have not used command line terminal before you here are some basic commands:

ls

Description: Lists the names of the files in the working directory. For more complete information use ls –alF

cd directoryname

Description: Changes the working directory to the one you named.

cd ..

Description: Brings you up one directory level.

cd

Description: Returns you to your home directory.

pwd

Description: Displays the pathname of the current directory.

mkdir newdirectoryname

Description: Makes a new directory

4. Install Grunt

1. Open your preferred terminal or install iTerm.
2. Install Grunt globally: instructions below will install grunt client globally on your machine, if you already have Grunt installed skip this step. For a more detailed explanation see the official documentation.
3. Install Grunt locally: Now we will install Grunt locally specifically for this project. Go to your project folder. Replace the path after cd with the path to your folder:

1

cd Documents/workshop/

In the terminal type out the below command to get to the project folder (if you have saved the workshop folder elsewhere adjust the path):

1

npm install grunt –save-dev

5. Configure

To configure the project, within your project folder type npm init in the terminal and follow the instructions:

6. Grunt AWS Plugin

We will now install Grunt AWS Plugin. Grunt uses different plugins to perform certain tasks, in order to deploy to Amazon S3 we will use the grunt-aws-s3 plugin.

In your project folder we can install this using the command below:

1

npm install grunt-aws-s3 –save-dev

We now have the plugin installed and we can configure grunt to use this task to deploy our project without having to manually upload the files every time.

In order for us to use this plugin and deploy to S3 in the command line we need to create a file called s3settings.json, here we will keep all the login details and bucket information. This file MUST be kept secret, do not commit it to github or any other version control system. It should be excluded in .gitignorefile if you are using git. It is important to take care as if these details are made public your account may be accessed and used by someone else, leaving you with a bill to pay:

The key and secret are available in the user credentials file you downloaded when creating an IAM user. Bucket must be exactly what you called the bucket on Amazon S3 and the same for region.

The second file we need to create is Gruntfile.js this is a default file Grunt will look for locally within the project folder. Here is where we configure the tasks.

Using your text editor or command line, create a new file within the workshop folder called Gruntfile.js, the content of it should be the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-aws-s3');

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  s3settings: grunt.file.readJSON('s3settings.json'),
      aws_s3: {
          options: {
              accessKeyId: '<%= s3settings.key %>',
              secretAccessKey: '<%= s3settings.secret %>',
              region: '<%= s3settings.region %>',
              uploadConcurrency: 5,
              downloadConcurrency: 5
      },
      live: {
          options: {
              bucket: '<%= s3settings.bucket %>',
              differential: true //Only uploads the files that have changed
          },
          files: [
              {expand: true, cwd: 'deploy/', src: ['**'], dest: ''},
              ]
          },
      });
  grunt.registerTask('deploy', ['aws_s3:live']);
};

Full code to copy is here.

Here we have configured the plugin to upload to Amazon S3 all files in the folder deploy, so we would now have to create this folder within the project and copy any files we want uploaded.

We have also created a task called deploy which can be run in command line within the project folder to upload all files within deploy folder to Amazon S3, to the bucket specified in the s3settings.json file.

7. Use Grunt to deploy to S3

Go to the project folder in the terminal. You can now run the deploy command by typing:

1

grunt deploy

And we are done!

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

This is Part 4 of a tutorial post Create a Simple Website in CSS/HTML and deploy to Amazon S3.

Note: Here you can look over Part 1: HTML, Part 2: CSS and Part 3: Deploy to AWS of this tutorial.

1. Create a new User

1. Sign in to the AWS Amazon console
2. Click on Identity & Access Management
3. Click on User on the left hand-side menu
   
4. Click Create New User
5. Enter username testuser
6. Click Create
7. Download the credentials. These will include User Name, Access Key Id, Secret Access Key. Keep these secret as they are tied to your account and can be used for malicious purposes if not kept safely. Remember that your account is tied to your credit card.

2. Set user permissions

1. You should now see your user created in the user dashboard.
2. Click your newly created user testuser
3. Click on Permissions → Attach Policy

1. Select AmazonS3FullAccess → Attach Policy:
2. Done!

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

This is Part 3 of a tutorial post Create a Simple Website in CSS/HTML and deploy to Amazon S3, it is aimed at a completele beginner.

Note: Here you can look over Part 1: HTML and Part 2: CSS of this tutorial.

In this tutorial we will cover:

1. Create a free account on Amazon S3
2. Creating a bucket on Amazon S3
3. Uploading your website to Amazon S3

1. Create a free account on Amazon S3

Amazon has a free tier which will be enough for most small websites.

1. Go to Amazon S3

2. Click on “Try Amazon S3 for Free”:

3. Enter your email address or phone number. Then select “I am New User” and click “Sign in using our secure server”:

4. Fill out required info:

5. Fill out credit card info

6. Confirm your identity via a call:

2. Creating a bucket on Amazon S3

1. Sign in to the Amazon console

2. Click on S3

3. Click “Create a new bucket”

4. Click “Create a new bucket”

3. Fill out the bucket name (example yourname.com)

3. Uploading your website to Amazon S3

1. Click into the bucket name you have just created

2. Select “Actions” → “Upload”

3. Click “Set Details” → “Set permissions”

4. Tick “Make everything public”

5. Click “Start Upload”

6. Select the file index.html and click “Properties”

7. Click on the link

8. Thats it! Your website is now live and accessible online via this link at any time.

If you would like to learn how to automate this deploy and make it easier for continuous development watch out for the next blog post where I will talk about using Grunt.

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

This is Part 2 of a tutorial post Create a Simple Website in CSS/HTML and deploy to Amazon S3, it is aimed at a completele beginner.

In this tutorial we will briefly cover:

1. What is CSS?
2. CSS Basics
3. Create a Stylesheet
4. Link HTML and CSS
5. Basic CSS Properties
6. CSS Exercises

1. What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used for describing what the html elements should “look like”. It is used to describe whether an html element should be of certain height, width, if the text should be bold, text colour etc. We will try this shortly.

2. CSS Basics

This is a rule:

1
2
3

h1 {
  color: red;
}

• This rule starts with h1, which is a selector.
• The part inside the curly braces is the declaration.
• color is a property.
• red is a value.
• color: red; is a property-value pair.
• The ; after the property-value pair separates it from other property-value pairs in the same rule, for example:

1
2
3
4

h1 {
  color: red;
  text-align: center;
}

We will refer to those definitions throughout this class.

3. CSS Basics

When the browser reads the CSS file, it finds each selector and works out if it applies to any elements in the HTML. If it does, it uses the properties within the matching rule.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors. Selectors allow you to SELECT all elements that match:

• a certain tag name e.g. <h1>
• a certain element inside another element e.g. all <li> within a <ul>

4. Create a Stylesheet

1. Install Sublime or use your preferred text editor
2. Create a new file in the same folder as the index.html and name it style.css
3. Type out the code below and save in in your style.css file:

1
2
3
4

h1 {
  color: red;
  text-align: center;
}

Here you created a rule that says: All h1 elements have the following properties: text alignment is center & the text colour is red.

Exercise: Now use the example above to do the same for <p>. Clue: create a new rule and replace h1 with p.

5. Link HTML and CSS

Now that we have our first stylesheet, we can tell the html document index.html to use the stylesheet style.css so that the browser knows what the page should look like.

1. Add the following line in your index.html file underneath the <title> tag:

   1	<link rel="stylesheet" href="style.css">

2. Reload the file in the browser or open it again: Open your web browser, then press Ctrl + O (Windows) or Cmd + O (Mac) to open the file we have just updated. You should see “Hello World” and the text you added in the paragraph with the added style.

6. Basic CSS Properties

color

• Description: this is the text colour, this is used to style elements that have text e.g. h1, p, h2.
• Example: color: white;
• More Info: MDN: color

background-color

• Description: this is used to define the background color of a particular element.
• Example: background-color: blue;
• More Info: MDN: background-color

font-size

• Description: this is used to set the size of a font in px or other units.
• Example: font-size: 16px;
• More Info: CSS font size units

background-image

• Description: this is used to set an image as a background of an element.
• Example: background-image: url(http://examplelink.com);
• More Info: CSS-tricks: background-image

text-align

• Description: this is used to align text.
• Example: text-align: left;
• More Info: Quirksmode: text-align

padding

• Description: sets the padding of the element. See the Box Model picture below for an explanation of what padding is and how it will affect the look of the element.
• Example: padding: 10px 10px 10px 10px; or padding: 10px;
• More Info: MDN: padding

margin

• Description: this is used to set the margin of the element. See the Box Model picture below for an explanation of what padding is and how it will affect the look of the element.
• Example: margin: 10px;
• More Info: MDN: margin

6.1 CSS Box Model

In a document, each element is represented as a rectangular box. This model describes the content of the space taken by an element. Each box has four edges:

1. margin edge
2. border edge
3. padding edge
4. content edge (in blue)

You can read more about CSS Box Model here.

5. CSS Exercises

We can add more to the style.css at this stage or later, here is a list of CSS properties available.

1. Try out all the properties from the Basic CSS Properties section and see what they all do.
2. You can also style the <body> element, try setting a background image on the element and see what that does.
3. Make an image to also be a link, ie make the image clickable that will take you to a different website. Tip: you can add some elements inside of other elements,try and add an img within the a.
4. Align left or center all the text on the page.

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.

This is Part 1 of a tutorial post Create a Simple Website in CSS/HTML and deploy to Amazon S3, it is aimed at a completele beginner.

In this tutorial I will briefly cover:

1. What is HTML?
2. HTML Basics
3. Create a Simple HTML Page
4. What is HTML5 and how is it different?
5. HTML Exercisesb

1. What is HTML?

HTML - HyperText Markup Language is the standard language used to create web pages. Web browsers can read HTML files and render them into visible web pages. HTML documents are described by HTML tags, these are enclosed in angular brackets <>. HTML tags can be considered to be “keywords” that the browser can understand and render/draw in the browser appropriately when viewing the page. Each browser has default ways of interpreting each element, these can later be “styled” to look how you prefer with the help of CSS, which will be explained a little further on.

2. HTML Basics

We will create a very basic HTML page that will load and simply display “Hello World”. It will look like this:

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
    <head>
        <title>Page title goes here</title>
    </head>
    <body>
      <h1>Hello World</h1>
      <p>This is my first website!</p>
    </body>
</html>

• The DOCTYPE is a declaration and tells the browser which ‘language’ we are talking in so it knows how to render it.
• The text between <html> and </html> describes an HTML document
• The text between <head> and </head> provides information about the document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the visible page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph

3. Create a Simple HTML Page

1. Install Sublime or use your preferred text editor
2. Create a new folder in your Documents folder for this workshop, let’s call it website.
3. Now open the text editor and save an empty file called index.html, you can press Cmd + S (Mac) or Ctrl + S (WIndows)
   • index.html is a special name and this is a file that the server will look for by default when a certain url is requested (link e.g. http://website.com).
   • Each simple website is basically a “directory” of files, the index.html is the first file the web browser will access and from here you can specify how to reach other files via writing hyperlinks.
   • The default file can be configured to be called something else if required, but for the purpose of this workshop we will only concentrate on simple defaults.
4. Type out the code below:

   1 2 3 4 5 6 7 8 9 10

   <!DOCTYPE html> <html> <head> <title>Page title goes here</title> </head> <body> <h1>Hello World</h1> <p>This is my first website!</p> </body> </html>

5. Open your web browser, then press Ctrl + O (Windows) or Cmd + O (Mac) to open the file we have just created. You should see “Hello World” and the text you added as the paragraph, something like this:

4. What is HTML5 and how is it different?

HTML5 is simply a newer version that is supported by most modern browsers. HTML5 introduced some more awesome elements/tags we can use: such as <canvas>, <video>, <audio>, <footer> and many more to bring the HTML language more in-line with modern times.

5. HTML Exercises

We can add more to the page at this stage or later, here is a list of html and new html5 tags you can use.

1. Add an image <img>:
   • Type out the following and modify the src to point to an image you like:

     1	<img src="https://www.example.com/image.png " alt="Image description">

   • width="100" and height="90" are optional, play around with the numbers.
   • Read more about image <img> tag and it’s use.
2. Add a link <a> to your favourite website:
   • Type out the following and modify it to link to point your favourite website:

     1	<a href="https://www.example.com ">Link Text</a>

   • Read more about link <a> tag and it’s use.
3. Add a footer <footer>. These usually sit at the bottom of the page, but sometimes have to be styled to stay at the bottom if there is not enough content to fill the page:
   • Type out the following and modify it to say anything you want:

     1	<footer> This is a footer </footer>

   • Now try to add a link within the footer to point to a url of your choice, e.g. http://google.com
   • Read more about footer footer tag and it’s use
4. Add a comment, which says “This is my first website!”:
   • Have a look at the example below and modify it as needed:

     1	<!– Comment text, this will not be visible on the page –>

     * Read more about comments
5. Add an unordered list of 3 things you love (use previous examples to get the format right):
   • Unordered list is started using the tag <ul> and closed using </ul>
   • Within the list declaration mentioned above you can add in list items, these are defined by: <li> </li>
   • You can have as many list items in the unordered list as you want
   • Within each item you can add other elements, such as: paragraph, link, images, another list.
   • Play around with this one, it is very useful especially for menus
   • Read more about unordered list ul tag and it’s use

Further reading and things to try:

• Mozilla: HTML Tags
• Codeacademy: Web Beginner
• Tutorialspoint: HTML
• Codepen

🔥 If you enjoyed this post then you can keep up to date with my latests blogs posts & courses by following me on Twitter and checking out my code school for some hands on guided coding practice.