Learn to code

Posted 5 Feb 17 by Darren Welch

So you want to learn to code? But don't know where to begin, right!?

 

In this blog I will give you a very basic guide and some links to useful websites to help you on your way. 

"Some people dream of success while others wake up and work hard at it" - Winston Churchill

 To begin with you will need somewhere to write your code, this can be achieved freely using notepad.

 The simplest webpages consist of just HTML so it makes sense that we begin here.

 

  • Firstly, locate and open notepad.
  • Copy and paste (or type) the following HTML

 


<HTML> <HEAD> <TITLE>My First Page!</TITLE> </HEAD> <BODY>
Welcome to my very first webpage!<br />
<IMG SRC="http://www.darrenwelch.co.uk/images/sampleimage1.jpg" /> </BODY> </HTML>

 

If you would like to see your first webpage you need to do the following:

 

  • (in notepad) Click "file", "save as"
  • Locate your desktop and give it a name of "MyFirstWebPage.html"
  • Make sure "all files" is selected in the dropdown.
  • and click "save"
  • Go to your desktop and right click on "MyFirstWebPage.html"
  • choose "open with" and choose one of your browsers "internet explorer/edge", "firefox", "google chrome" etc.
  • You will now see your brand new website.
  • Notice the text within the "body" tag is displayed on the page. and the text between the "title" tag is displayed in the tab at the top.

 

TaDa! a webpage!

 

Now comes the fun part......Experiment!

 

Change the text between the <title></title> and between the <body></body> tags. Also try changing the link in the <img> tag, to load different pictures. e.g.

 


<IMG SRC="http://www.differentsite.com/differentimage.jpg" />

 

You may have also noticed the <br /> tag. This is simply a line break. It puts everything after it onto the line below.

 

I would recommend reading this HTML page and trying out some of the examples.

 

So now you've finished experimenting and you realise that your page is pretty boring. Now you need to learn CSS (Cascading Style Sheets).

 

Let's amend our file and add some very simple styles.

 


<HTML> <HEAD> <TITLE>My First Page!</TITLE>
<style>
body { color: #FFFFFF; background-color: #AAAAAA; }

</style>
</HEAD>
<BODY> Welcome to my very first webpage!<br />
<IMG SRC="http://www.darrenwelch.co.uk/images/sampleimage1.jpg" />
</BODY>
</HTML>

 

So now you should go and learn some CSS & experiment with your page.

 

Once you feel comfortable with that you may decide that you need some interactivity on your page. You should now look into javascript & jquery

 

JQuery is built upon javascript and will make your life much easier. But you may want to learn javascript so that you understand everything that is happening.

 

Firstly we will add a basic javascript pop-up onto our page.

 


<HTML> <HEAD> <TITLE>My First Page!</TITLE>
<style>
body { color: #FFFFFF; background-color: #AAAAAA; }
</style>
</HEAD>
<BODY> Welcome to my very first webpage!<br />
<IMG SRC="http://www.darrenwelch.co.uk/images/sampleimage1.jpg" /> <br />


<script type="text/javascript">

alert("welcome to my site");
</script>


</BODY>
</HTML>

 

To add Jquery to your website we will need to reference the Jquery library within the <head></head> tags. See below:

 


<HTML> <HEAD>
<TITLE>My First Page!</TITLE>
<style>
body { color: #FFFFFF; background-color: #AAAAAA; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</HEAD>
<BODY>
Welcome to my very first webpage!<br />
<IMG ID="hideMe" SRC="http://www.darrenwelch.co.uk/images/sampleimage1.jpg" /> <br />

<button type="button" id="doHide">Click Me!</button>

<script type="text/javascript">
$(document).ready(function(){
$("#doHide").click(function(){
$("#hideMe").hide("slow");
});

});
</script>
</BODY>
</HTML>

 

If you are a complete beginner then these lessons should keep you busy for a while. If you have any questions feel free to leave a comment below.

 

Good Luck





Post Comments

Darren Welch

By

Darren Welch


  5 Feb 17


Contact me online

 Facebook

 Twitter

 Linked In

 Git Hub

Related Content




Funny Script Prank

05 Feb 2017




Google Tips

05 Feb 2017




Toastr - a useful message javascript library

05 Feb 2017