Topic outline

  • General

    Terminology and aims of the course:

    Web Design refers to the HTML (structure), CSS (style), and JavaScript (interaction) technologies used in browser-Web Server communication, resulting in web pages being displayed to the end user.


    The first aim of this course is to learn, understand and apply the above technologies to create simple code-based websites.

  • Module 1: HTML I

    Internet, WEB, HTML coding

    Introduction to WEB. It's the introductory lesson, we'll learn what is the Internet and WWW and we'll state their difference.

  • Module 2: HTML II

    Comments, Lists, Media and Links

    Comments. We'll see how we write comments in an HTML file. Comments are important. They help us organize our code by describing its function or our thoughts about it. They also help any other developer who may need to work on this code.

  • Module 3: CSS I

    Introduction to CSS. Inserting and Applying CSS

    What is CSS? The language of style is CSS which stands for Cascading Style Sheets. In general, the visual output of the web page is the combination of HTML (structure) and the CSS (style-appearance). In this submodule and we will learn the basic syntax rule, "Selector {Property: Value;}

  • Module 4: CSS II

    Selectors. Pseudo-classes. Display properties. Navigation bar

    Selectors. In this submodule, we will learn how to use CSS selectors to "find" and select HTML elements based on their name, id and class. We also learn to apply CSS rules to multiple classes and to specific content in a list.

  • Module 5: Tables, more elements

    Table-HTML. Table-CSS. Div - Span elements

    Table-HTML. Tables are used very often. We use them to display visually data organized in rows and columns. In this submodule and we will learn how to use HTML markup to construct a table.

  • Module 6: JavaScript I

    Introduction to JavaScript. Simple file. Data types

    Introduction to JavaScript. JavaScript is a programming language; this means that is able to make decisions based on data or to do things repetitively. Moreover, it adds interactivity to the browser and enables enriched browser-server communication. JavaScript is the most popular language among web developers.

  • Module 7: JavaScript II

    JavaScript with HTML and CSS. Making Decisions. Applying the “if” statements

    JavaScript with HTML and CSS. In this submodule , we will use JavaScript variables, a simple function and a simple event (onclick) to combine HTML and CSS with JavaScript. This model of event-driven programming—in which your code listens for some action on the page and then performs some function in response—is a common paradigm in JavaScript development.

  • Module 8: JavaScript III

    JavaScript arrays. Simple loops. Word counter.

    JavaScript arrays. JavaScript arrays are used to store multiple values in a single variable. In this submodule , we will learn to create arrays and methods to access and modify the arrays.

  • Module 9: Forms

    The HTML of forms. The CSS of forms. Form validation.

    The HTML of forms. Forms are commonly used to collect user input and send them to the WEB Server. In this submodule, we will learn to create well-structured and accessible forms using HTML markup.

  • This topic

    Module 10: Images- The Canvas HTML element

    Canvas HTML element. The RGBAs of images. Image manipulation.

    Canvas HTML element.The HTML5 canvas element is a workspace upon which you draw (and manipulate) images and text. In this submodule , we will learn how to create canvas elements . We will also learn methods to create, access and modify text, shapes and images on the fly, via JavaScript.

  • Module 11: Image editing- GIMP I

    The Gimp. Gimp file- Selection tools. The Color in Gimp. Layers and export of image.

    The Gimp.GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.

  • Module 12: Image editing- GIMP II

    Gimp for the WEB. Blending modes. Text in Gimp

    Gimp for the WEB.In this submodule, we will create an image map (is a process by which we can create clickable areas in an image and link them to different destinations).
    We will also learn to create an animated gif (is a set of images that have the same dimensions and appear in a specific order).

  • Module 13: Audio editing- Audacity

    The Audacity. The Physics of Sound. Record and modify voice. Background music- The mp3 file

    The Audacity. Audacity® is free, open source, cross-platform audio software for multi-track recording and editing.

  • Module 14: Video editing- OpenShot

    The OpenShot. What is a video?OpenShot functions. Creating video

    The OpenShot. OpenShot Video Editor is an open-source video editor, available on Linux, Mac, and Windows. OpenShot can create stunning videos, films, and animations with an easy-to-use interface and rich feature-set.

  • Module 15: Upload to Web - Wordpress I

    The WordPress. Creation and Modes. Theme – New page. Subpages

    The WordPress.WordPress started as just a blogging system, but has evolved to be used as full content management system and so much more through the thousands of plugins and widgets and themes. WordPress is completely customizable and can be used for almost anything.

  • Module 16: Upload to Web - Wordpress II

    Posts and Pages. Comments and Widgets. Google map and Contact form