Prototyping

You should be familiar with the basics of HTML and CSS which are foundational languages for prototyping web pages.

During the MSIS program

As part of the D&S module in the MSIS program, you will be using HTML & CSS to design and develop the look and feel of your web application. This will be your first step towards creating a fully functional web application. Once your prototype is ready, you will make your application interactive by using client-side (Javascript) and server-side programming languages.

Major concepts

Before entering the MSIS program, you should be able to do the following:

1. Understand the need for prototyping in web application development.
2. Create the basic structure of an HTML page and demonstrate the use of important tags.
3. Define the three types of CSS selectors.
4. Make stylistic changes to your page by using a separate CSS file.

Resources

1. A nice way to get started is by reading this blog. It explains the concept of website prototyping and the need for it.

2. Next, read this blog (Johansson, 2018). It specifically talks about the benefits of prototyping using HTML and CSS. It also enlists the most popular tools that are used for HTML and CSS prototyping.

3. Now that you have a rough idea of the meaning and need for prototyping, watch this introductory video (Thé, 2016) that highlights the role of HTML, CSS and Javascript in web pages by using examples.

4. You can then read this Web Design 101 (Kolowich, 2018) article which gets into a little more detail on HTML, CSS and Javascript. It provides additional examples on how they come together and play their individual parts in web application development. You can skip the Javascript part of the article.

Additional resources

• The World Wide Web Consortium contains official standards for building and rendering web pages using HTML and CSS.
• W3 Schools is a popular website that can be referenced for sample code and examples on HTML/CSS.
• Cheatsheets -
  • HTML cheatsheet
  • CSS cheatsheet

HTML and CSS

1. Now that you have been introduced to website prototyping, you are ready to start learning the basics of HTML and CSS. Complete this Intro to HTML/CSS module on Khan Academy. It is the best free resource you can get to learn these languages. It contains videos, quick tips and challenges that will give you good hands-on experience on HTML and CSS.

Practice

1. The best way to learn programming languages is by practice. Code Academy offers two learning modules - Learn HTML and Learn CSS that will further help you improve your understanding of HTML and CSS.

2. You can use this blank online practice board to type in HTML code and see the output

3. The World Wide Web Consortium offers topic-wise HTML and CSS practice exercises

4. If you want to work on sample projects, GeeksforGeeks and this blog (Ndugu, 2018) offers a number of web page creation projects for beginners.