Making Web Pages with HTML/CSS

#2
Advanced Challenges

Learning Outcomes

  1. Learn how to use HTML and CSS to make creative web pages.

  2. Learn more about real world web programming

  3. Learn why CSS is useful in web programming

  4. How to use CSS to make stylish web pages

  5. Learn about browser debugging tools

Description

At one of the basic challenges you learnt the basics of HTML and designed your own CV (bio-data/resume) and got that displayed in a browser.

Now let's take one more step by creating much visually attractive web pages!

As you already know, HTML is a web markup language where you can instruct browsers to display data such as lists, tables, paragraphes, etc. CSS (Cascade Style Sheet) is a styling language you can use to improve the visual look of these page with colors, headings, fonts and many more.

There are a lot of education materials available online regarding CSS. For this challenge we use a CSS tutorial on “Khan Academy”. This challenge is based on the things you will learn under the following course: https://www.khanacademy.org/computing/computer-programming/html-css

The Challenge:

Follow the entire tutorial & try to finish all the sub challenges provided in the tutorial. Once you get familiar with all the advanced concepts in HTML and CSS, have a look at your own CV (bio-data/resume) that you have created in basic challenge.

How to complete the challenge:
Follow the entire tutorial. Complete all the challenges and projects (Challenge: Write a Poem, Challenge: You can learn text tags, Project: Travel webpage etc. ) included in this tutorial. Once such a challenge or a project is completed, take a Screen Shot of Khan Academy website.

Now think of the areas where you can modify your CV (which you created under basic challenges) with the new concepts you learnt through this tutorial. Try to make the HTML CV more interactive, more stylish. You can search internet for beautiful and interactive HTML CVs created by others to get some inspiration.

Now you need to make a document that contains all the screenshots of completed Khan Academy challenges. To the end of the document, add a screenshot of your improved CV too. Convert the document to pdf and submit in the Step 2 deliverable below. Then Answer the questionnaire at the Step 3 to complete this advanced challenge.

 

Learning Resources

Ready for some serious coding?

To Complete, follow these steps :

Go through the learning resources given above, Read "How to Complete the Challenge"section in the above description.  

Step 1 :

Upload the documents below

Click Here

Step 2 :

Answer the questions 

Click Here

Step 3 :

© 2019 An initiative by SLASSCOM