Learning HTML, CSS and jQuery for the Web Designer

This topic describes a learning path for those who finished the Web & App GUI exercises and have time for self-study. 

The Usoft Web Designer uses HTMLControls, DIV’s, SPAN’s, Callclientscripts etc. If you are not familiar with HTML, CSS or JavaScript, it can be confusing to use these functionalities. When following the steps below, your goal is to learn about web design and to better understand the USoft Web Designer by practicing HTML, CSS and JavaScript (jQuery).

Step 1. Learn HTML

Read all chapters from ‘HTML Introduction’ to ‘HTML Style Guide’ and complete the exercises. https://www.w3schools.com/html/default.asp

If you do not want to write HTML in Notepadd++, skip step 2.

Step 2. Installing Notepadd++

1. Download and install Notepad++ from https://notepad-plus-plus.org/downloads/
2. Open a new text file.
3. Click on File, Save as, Save as type:. select Hyper Text Markup Language file.
4. In the file explorer, double click on the new file to open the webpage in a browser.
5. Right-click on the html file, open with, Notepad++.

Now you can edit the html file and every time you save and reload the webpage, you can see your changes in your browser.

Step 3. Practice HTML

Create a webpage with a navigation bar, some text, images, and a footer. You can do this in your favorite IDE or in Notepadd++.

1. Sketch your website design on paper.
2. Use w3schools, ChatGPT and other sources as reference on how to code your design in HTML.
3. Make sure your webpage looks decent on different devices by pressing f12, Ctrl + Shift + m. You will learn more about responsiveness in step 6.

Step 4. Web design standards

It is important to know what is effective design and what is not. Learn about web design standards by reading this article: https://www.orbitmedia.com/blog/web-design-standards

Step 5. Template

Create your own website template based on the standards you learned.

Step 6. Learn CSS

 Read all chapters from Introduction to Website Layout and CSS Responsive: from Intro to Images. Complete the exercises as well. https://www.w3schools.com/css/default.asp

Step 7. Compare

Watch this video from the beginning until 2:40 to see an example of HTML code: https://www.youtube.com/watch?v=VegDvRLVlOI Compare this with your own work and see how you could improve.

Step 8. Practice CSS

Create the home page for a cinema. Focus on the lay out instead of functioning buttons.

1. Draw your cinema homepage design on paper.
2. Use w3schools, ChatGPT and other sources as reference on how to code your design in HTML and CSS.
3. Make sure your webpage looks perfect on different devices by pressing f12, Ctrl + Shift + m. 

Step 9. Learn Bootstrap 4

Watch this video to learn when (not) to use Bootstrap: https://www.youtube.com/watch?v=svPDhmXY1Yg 

Read all chapters from Get Started to Icons and complete the exercises. https://www.w3schools.com/bootstrap4/default.asp

Step 10. Learn jQuery

Read all chapters from Intro to Dimensions and complete the exercises. https://www.w3schools.com/jquery/jquery_dimensions.asp

Step 11. Practice jQuery

Practice your jQuery skills by creating a very simple game in HTML. You could for instance create a reaction game where the player has to click on a moving object.

Step 12. Practice Bootstrap and jQuery

Add a new webpage to your cinema website which includes a seat reservation option where a customer can select and deselect seats.

Step 13. Web Designer

Recreate one of your webpages in the USoft Web Designer.

The fastest solution is to copy all your html code into a HTMLControl. However, this makes your web designer difficult to read for others. Try to use a variety of different controls to create a clear product which can be maintained in the future.

To use Bootstrap in the Web Designer, go to Publish, Publication Configuration, then give Framework the Value ‘bootstrap4’.