Design Prototype in HTML/CSS 

Advanced Challenges

Learning outcomes

  1. Obtain a basic understanding of Visual Studio Code

  2. Obtain knowledge on helpful plugins of VS Code

  3. Learn how to easily set up an html boilerplate in VS Code

  4. Learn about HTML blocks and their advantage

  5. Learn about SCSS pre-compiler and why it is used over CSS

  6. How to use Flexbox styling to quickly and easily position elements

  7. Learn to build a website from ground up without the help of frameworks



All website and web applications require an easy-to-use and interactive User Interface (UI). To accomplish this, everyone relies on the power and capabilities of HTML and CSS. HTML helps structure your website in an organized manner, whilst CSS beautifies each and every element of your website to capture the audience visiting your website.


Challenge Description:

In this challenge, you are expected to implement the single-page charity website you designed “Creating your first Prototype from Adobe XD” challenge.

 Your website is required to contain sections, 

·      Header / Navbar

·      Home page banner / Hero section

·      Who we are / About us

·      What we do

·      Contact us

·      Footer


Additionally, your website must definitely include an area for a user to enter their email to subscribe (no need to be functional). Also, the sections mentioned above are just a guide, and you may add any other sections and show us your creativity. Apart from that, this web site needs to be responsive on both, desktop and mobile.

Upload the Link of your website below:

Learning Resources


Getting Familiar

Step 2 :
Step 2 :

To Complete, follow these steps :

Step 1 :

Go through the learning resources given above, 

Step 2 :
Step 2 :

Upload the file or link to file or video below

Click Here

Step 2 :

Answer the questions 

Click Here

Step 3 :