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!

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!

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:

  1. Ensure that your folder is named images with all lowercase letters.
  2. 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:

  1. Make sure you spell “width” and “height” correctly.
  2. Don’t forget the equals to sign “=”
  3. Make sure the numbers are in double quotes.
  4. 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!

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:

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

Got a Question?

Got a question? Ask away in our forums!

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!

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!

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!

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!

 

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!

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!

 

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!

Share This Post
Have your say!
252
36 Comments
  1. Brilliant
    Thank you

    Reply
    • A pleasure! Thanks so much!

      Reply
      • Great tutorial
        Very inspiring

        Reply
        • Thanks

          Reply
      • Thank you for your time and energy. Really appreciate it.

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

    Reply
    • Thanks so much Ahmed!

      Reply
  3. 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
    • Thanks for the kind words Maroof

      Reply
    • Mr. Bilal when I add more than one variable the alert does not work

      Reply
  4. Thank you Mr Bilal,really enjoying the tutorials so far

    Reply
    • A pleasure! Keep coding 🙂

      Reply
    • Thank you Mr Bilal,really enjoying the tutorials so far.

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

    Thank you

    Reply
    • 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
      • 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
  6. Mr Bilal, I think I messed up today, my stylesheet is not linking with my index.html
    Please advise me. Please.

    Thank you

    Reply
  7. 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
    • Hi Suresh. Yes, the lessons will still be available 🙂

      Reply
      • Thanks for this

        Reply
        • Uninstall Brackets by using the Add/Remove Program feature.

          Then, download and re-install. Should be fine

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

    Reply
    • What software are you using to unzip the folder?

      Try right clicking on the folder and clicking on “Extract Here”

      Reply
  9. The computer Coding is getting better and better Mr Bilal

    Reply
  10. 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
    • Mr. Bilal when I add more than one variable the alert does not work

      Reply
  11. Hi! Please ask your question in the forum

    Reply
  12. 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
    • 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
  13. Thank you for the feedback Mr Bilal

    Reply
    • A pleasure!

      Reply
  14. 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
  15. Always a pleasure, Zain – just doing what we love 🙂

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

    Reply
  17. 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
    • Hi Cindy. Notepad will work too.

      Reply

Leave a Reply to Rikhil Rosenpershad Cancel Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.