Lockdown 21 day Coding Challenge

In view of the lockdown due to #Covid-19 I’ve decided to release a series of Coding tutorials for people with no coding or technology experience.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 1

In this lesson we do a walkthrough of the App we are going to build.

Lesson 2

In this lesson we set up all the software, folders and files we need to start coding.

Click here to download Brackets.

Lesson 3

In this lesson we write and run our first lines of code.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 4

In this lesson we look at different types of text outputs.

Lesson 5

In this lesson we ramp things up a bit and add an image to our page.

Click here to download the images for this lesson.

Tips:

Ensure that your folder is named images with all lowercase letters.
When typing in your code, remember there are 3 parts:
1. The image tag: <img
2. The source tag: src=”file name goes here”
3. The angle brackets at the end: />

Lesson 6

In the previous lesson, we added an image to our page. In this lesson we will write code to manipulate that image.

Tips:

Make sure you spell “width” and “height” correctly.
Don’t forget the equals to sign “=”
Make sure the numbers are in double quotes.
If you cannot see your image in the brewers, and are seeing an empty rectangle, it’s probably or you are having trouble unzipping the file. Please see the short video below for instructions on how to unzip a file I Windows.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 7

In this lesson we introduce CSS Style Sheets. Style sheets enable us to add colours, fonts, layouts and other styles to our pages.

Lesson 8

In this lesson we add a Style Sheet where we will add styling information for our app.

Lesson 9

In this lesson we code actual CSS. Enjoy!

Tips:

Watch your spellings – for example, “color”.
We use curly brackets in CSS, not round ones. So, use {} instead of ().
Please, pleeeaase don’t forget the semicolons at the end of the lines.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 10

In this lesson we take a deeper look at CSS fonts and colours.

Lesson 11

In this lesson we add and style different sections to our page using <div>

Lesson 12

In this lesson we get to grips with Paddings and Margins.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 13

In this lesson we style the Header of our page.

Lesson 14

In this lesson we add and style the Footer section.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 15

In this lesson we add and style the Banner image to our page.

Lesson 16

In this lesson we start making the main Content section our page.

Lesson 17

In this lesson we use CSS Floats to align the left and right columns.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 18

In this lesson we add some text to the left column and style it.

Click here to download my code.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 19

In this lesson we learn about HTML forms. From are used to input data into web pages and apps.

Lesson 20

In this lesson we learn about HTML Hyperlinks. We will then add hyperlinks in the right column of our page.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 21

In this lesson we learn how to style Hyperlinks, and we style the Hyperlinks in the right column.

Lesson 22

We write our first JavaScript code! In this lesson we add an “event listener” to the button to determine what happens when it is clicked.

Lesson 23

In this lesson we learn about variables in JavaScript. Then, we learn how to capture all the answers the user inputs, and store those answers in variables.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Lesson 24

In this lesson we learn about JavaScript decisions using the IF statement.

Lesson 25 – The Grand Finale

This is the final lesson in this series. In this lesson we do some final checks on our app and perform a complete test.

Click here to download my code.

Got a Question?

Got a question? Ask away in our forums!

Go to the Forum

Have your say!

262

36 Comments

Ashraf Dockrat 31 March 2020, 9:12 am

Brilliant
Thank you

Reply
- Bilal Kathrada 31 March 2020, 1:12 pm
  
  A pleasure! Thanks so much!
  
  Reply
  - Zaheer 31 March 2020, 8:39 pm
    
    Great tutorial
    Very inspiring
    
    Reply
    - Bilal Kathrada 31 March 2020, 8:41 pm
      
      Thanks
      
      Reply
  - Venesh 12 April 2020, 6:26 pm
    
    Thank you for your time and energy. Really appreciate it.
    
    Reply
Ahmed Murchie 31 March 2020, 11:17 am

Slms Absolutely Brilliantly done. Your calm, patient reasuuring voice does so much to get the message across. Jazak Allah.

Reply
- Bilal Kathrada 31 March 2020, 1:11 pm
  
  Thanks so much Ahmed!
  
  Reply
Maroof Abdulazeez 2 April 2020, 5:27 pm

Masha Allah! I pray that the Almighty continue to strengthen you. I did not have any pre knowledge in coding before now, but I am really improving on these tutorials daily.

Thank you so much, JazakAllah.

Maroof

Reply
- Bilal Kathrada 2 April 2020, 5:37 pm
  
  Thanks for the kind words Maroof
  
  Reply
- Keashin 20 April 2020, 11:34 am
  
  Mr. Bilal when I add more than one variable the alert does not work
  
  Reply
Rikhil Rosenpershad 3 April 2020, 5:37 pm

Thank you Mr Bilal,really enjoying the tutorials so far

Reply
- Bilal Kathrada 3 April 2020, 5:38 pm
  
  A pleasure! Keep coding 🙂
  
  Reply
- Rikhil Rosenpershad 3 April 2020, 5:38 pm
  
  Thank you Mr Bilal,really enjoying the tutorials so far.
  
  Reply
Maroof Abdulazeez 4 April 2020, 1:22 pm

Mr Bilal, I think I messed up today, my stylesheet is not linking with my index.html
Please advise me.

Thank you

Reply
- Bilal Kathrada 5 April 2020, 5:43 am
  
  Hi Mariof. Double check the line in you index.html where you are linking the style sheet:
  Also, check the spelling of your file name in the folder.
  
  Reply
  - Maroof Abdulazeez 6 April 2020, 4:29 pm
    
    Please would you advise me to delete my bracket app and redownload it again from the link you gave us. What happened is that I got my first four tutorials from Youtube, so I did not download the App from the link you provided for us. Because I am thinking maybe some of the settings might not be ok.
    Please advise.
    JazakAllah.
    
    Reply
Maroof Abdulazeez 4 April 2020, 10:32 pm

Mr Bilal, I think I messed up today, my stylesheet is not linking with my index.html
Please advise me. Please.

Thank you

Reply
Suresh 6 April 2020, 1:21 pm

Good afternoon Bilal,
Happy Monday 🙂
Please advise if you will have the above link accessible to the “Lockdown 21 day Coding Challenge” once all the lessons are completed? It will be a great to keep the link open as a “reference library” to have access to the videos should you need to go back and check and/or clarify any queries/mistakes.
Appreciate your confirmation.
Regards
Suresh

Reply
- Bilal Kathrada 6 April 2020, 1:23 pm
  
  Hi Suresh. Yes, the lessons will still be available 🙂
  
  Reply
  - Maroof Abdulazeez 6 April 2020, 4:31 pm
    
    Thanks for this
    
    Reply
    - Bilal Kathrada 6 April 2020, 4:33 pm
      
      Uninstall Brackets by using the Add/Remove Program feature.
      
      Then, download and re-install. Should be fine
      
      Reply
Sherri Moodley 8 April 2020, 3:33 pm

Lesson 5 when i open the images file it say free trial is over pay to continue

Reply
- Talha Kathrada 8 April 2020, 3:44 pm
  
  What software are you using to unzip the folder?
  
  Try right clicking on the folder and clicking on “Extract Here”
  
  Reply
Rikhil Rosenpershad 9 April 2020, 7:42 pm

The computer Coding is getting better and better Mr Bilal

Reply
Jadon 11 April 2020, 6:34 pm

Hi, Mr Bilal. can you please assist me, for lesson 14 I did all the coding and checked that everything was correct ; but when I refreshed the page nothing changed on the footer.

Reply
- Keashin 20 April 2020, 11:43 am
  
  Mr. Bilal when I add more than one variable the alert does not work
  
  Reply
Bilal Kathrada 11 April 2020, 7:44 pm

Hi! Please ask your question in the forum

Reply
Mohamed 15 April 2020, 4:57 pm

Asalaamu alay kum
Jazakallah khairan for this tutorial. My question is reg font in css. Can any font be used that is on the pc. I wish to use ‘mk broken types’ which I use in Word. How can I use this in css?

Reply
- Talha Kathrada 16 April 2020, 10:19 am
  
  You can use any font you have on your hard drive in your project using the font-family line in your css. Just make sure to spell the font’s name correctly.
  
  Reply
Rikhil Rosenpershad 21 April 2020, 2:44 am

Thank you for the feedback Mr Bilal

Reply
- Bilal Kathrada 22 April 2020, 9:34 am
  
  A pleasure!
  
  Reply
Zain Muhammad 21 April 2020, 11:17 pm

Dear Bilal Kathrada
I’m sure i speak on behalf of all those that participated in this coding challenge.

My sincere thanks and gratitude to you and Maseehullah for taking the initiative to offer this course. It was thoroughly informative, interesting and satisfying.
Your method of presentation and explanations made it easy to follow and understand.
You definitely got me interested in learning more about coding.
May you grow from strength to strength.

Reply
Bilal Kathrada 22 April 2020, 9:35 am

Always a pleasure, Zain – just doing what we love 🙂

Reply
Abu Ammaar 27 April 2020, 2:50 pm

I am loving it, despite me starting with these TUTS a bit late , well presented and very simple to understand. Great Work!

Reply
Cindy Deysel 12 May 2020, 2:50 pm

Hi Bilal, my computer has security settings that won’t allow downloading of Brackets, what is the next best thing? How does NotePad work?

Reply
- Bilal Kathrada 12 May 2020, 3:09 pm
  
  Hi Cindy. Notepad will work too.
  
  Reply