Study / Web Design and Web Development
- Books: 9
Selectors. Table-HTML. Table-CSS. Div - Span elements
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.
. 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.
. In this submodule, we will learn how to use CSS rules, and classes to apply different style to various elements of a table.
. In this submodule, we will learn how to use the block element DIV and the inline element Span. Also, we will learn how to align elements next to each other using the properties float and clear.Pages: 2Books: 4
Tools, Version control, WEB Server
Popular tools. In this submodule, you will be given a quick overview of several tools, terminal, node.js, Visual Studio Code.
You will also see the way we use these.
Version control. Git - Github. In this submoldule, you will learn what version control is.
This submodule also introduces the first steps to set up your Git and Github repositories and establish communication between these.
WEB Server. In this submodule, you will learn to upload files to our WEB Server via FileZilla.
You also learn how to grab the URL and serve your site.Page: 1Books: 3
Introduction to Bootstrap
You will also be informed what “responsive web design” and "cross-browser compatibility" are.
Getting Started with Bootstrap. This submodule introduces the first steps to set up your first web page by using Bootstrap.
You will als learn about Bootstrap typography.
Responsive Design and Bootstrap Grid System. In this submodule, you will learn the Bootstrap grid system and Bootstrap's support for mobile first responsive design.
You also learn how to customize some of the Bootstrap classes in a separate CSS file.Page: 1Books: 3File: 1
Bootstrap CSS Components
Navigation - Icons. In this submodule you will be given an overview of navigation design and the importance of providing appropriate navigation support within your website.
You will also be informed about the use of icon fonts in web page design
Displaying Content - Media - Alerting Users. In this submodule, you will learn the support for tables in Bootstrap and about the component called card that enables the display of content in myriad ways.
You will also learn the use of images and media on websites, the use of these as thumbnails and the Bootstrap classes to support responsiveness.
We will finally examine various ways of delivering alert information to usersPage: 1Books: 2
Data types. In this submodule we will learn about types of data, how to find the type of a variable and how to change its type or its value (arithmetic and assignment operators). We will also learn some of the string and number methods.Page: 1Books: 3
Making Decisions. Very often, when we write code, we need to have different options for the results of different conditions. In this submodule , we will learn to use the “if statements” to make decisions. We will also see the functionality of comparison and logical operators.
Applying the “if” statements. In this submodule and we will learn to make decisions using the “confirm()” interactions. We also learn to make more complicated decision using nested conditionals.Page: 1Books: 3
Simple loops. Loops offer a quick and easy way to do something repeatedly. In this submodule, we will learn how to use the “for’ and “while” loops. We will also learn to iterate over an array.
Word counter. The HTML objects are often accessed using arrays. In this submodule we will use the string.split() method to divide a string into an array of words and we will learn how to create a simple word counter.Page: 1Books: 3
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.
The CSS of forms. In this submodule, we will learn how to style a form and enhance its usability using CSS rules. We will also learn to style a submit-button.
Tabs and Tabbed Navigation. Accordion. Revealing Content. Carousel
Tabs and Tabbed Navigation. In this submodule, we will design a tabbed navigation for the content.
We will aslo use tab panes to organize the content and navigate.
Revealing Content. In this submodule, we will look at the ways of presenting information to users by overlaying the information on top of the page.
We will examine how to add tooltips to be displayed when the user hovers over an area, and modals to be displayed when the user clicks on a link or button of the page.
Carousel. In this submodule, we will create a Carousel and we will apply images to it.
We will also add controls to the carousel to manually control it.Page: 1Books: 4Files: 2
Bootstrap and jQuery. It's your time! Building the application
It's your time!. It's time to create your own page or modify the existing pages.
Building the application. In this submodule, we will build a distribution folder containing the files that can be deployed on a web server hosting your project.
This distribution folder would be built from your project files using various NPM packages and scripts.Page: 1Books: 3
We will differentiate between parameters and arguments of a function and we will discuss the role of the "return" functionality.
In this submodule, we will learn how to define, access, add, change and delete the properties and methods of an object.
Constructor functions. With constructor functions, we can create as many replicates of an object as we may need, without writing excess code.
In this submodule, we will learn about the syntax of a constructor function and how to create objects and manipulate their properties and methods.Page: 1Books: 3
We will also see the arrow functions that make the code more readable and structured.
Object Notation. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family languages. These properties make JSON an ideal data-interchange language.
In this submodule we will learn to access, format and validate JSON.Pages: 2Books: 3
Introduction to DOM. DOM methods/properties and DOM Recursion. DOM events
Introduction to DOM. DOM (Document Object Model) includes all the objects of an HTML page and enable us to manipulate them. In this submodule we will understand the DOM structure and learn the Parents-Children-Siblings relationships and their importance.
We will also understand what are Nodes and DOM traversing. Finally, we will see how we can apply CSS rules using DOM.
DOM methods/properties and Recursion. In this submodule we will focus on DOM methods and properties and explore how we can use them to dynamically modify the HTML document. We will also introduce the concept of Recursion and see an example where this method can be used to traverse the entire DOM.
DOM events. Using events we can interact with the HTML page and perform actions. In this submodule we will learn how we can apply event listeners using DOM to be able to handle multiple actions on the same event. We will also explain the difference between Capturing and Bubbling. Finally, we will see how we can use Keyboard Events.Page: 1Books: 3
Canvas HTML element. The RGBAs of images. Image manipulation.
The RGBAs of images.One of the most common ways to represent color on the web is via RGBA. An RGBA color value is specified with rgba (red, green, blue, alpha), the alpha parameter represents the transparency-opacity of a pixel. In this submodule , we will learn how to create the bitmap of an image which is an array that maps these four numbers to each pixel.
p5.js Introduction. Basics of p5.js. Colors.
p5.js Introduction. In this submodule we will see the functionality of the p5.js library and we will set up a web project to use the p5.js library.
Basics of p5.js. In this submodule we will learn the basic functions of p5.js.
We will also learn to write code to sketch and move the primitive shapes.
Colors. In this submodule we will learn to add color and transparency in our p5 project.
We will also learn to apply rules and p5 functions of coloring.Page: 1Books: 3
p5 Events. Advanced p5 functions and transformations
p5 Events. In this submodule, we will learn to use P5.js built-in events (mouseX and mouseY, mouseClicked and mouseIsPressed) that enable us to apply interactivity in our canvas.
Advanced p5 functions and transformations. In this submodule, we will learn to use advanced functions (loop, noloop, redraw, clear, random) and transformations (translate, rotate) that enable us to apply interactivity in our canvas.Page: 1Books: 2
Image in p5. Video in p5. Sound in p5.
Image in p5.In this submodule, we will learn how we can insert images in p5.js. Moreover, we will see how we can manipulate their pixel and display the result in our canvas.
Video in p5.In this submodule, we will see how we can insert videos in p5.js and create different things by "playing" with their pixel. We will also see how we can capture video from our webcam and display it on our canvas.
Sound in p5. In this submodule, we will learn how we can insert sound in p5.js using the appropiate p5.js library. We will also see how we can create controls for audio play/pause. Moreover, we will learn how we can capture audio from our computer's microphone and use it to create sketches that "respond" to this audio.Page: 1Books: 3
Angular Introduction. Getting Started with Angular. Angular Components.
Angular Introduction. Angular is a platform that makes it easy to build applications with the web.
Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
Getting Started with Angular. In this submodule, we will learn some basics of Angular and how to configure an Angular application using the Angular-CLI, the command line tool. We will also learn how to add Bootstrap and Font Awesome in this application.
Angular Components. In this submodule, you will learn about Angular components and how we construct an Angular component and design its template to view.Page: 1File: 1Books: 2
Angular Description. Data Binding. Services and Dependency Injection
Angular Description. In this submodule, we will overview the architecture of an Angular application and we will examine the functionality of the Angular files.
Data Binding. In this submodule, we will learn about data binding.
Data binding is a mechanism for coordinating what users see, with application data values.
Binding types can be grouped into three categories distinguished by the direction of data flow: from the source-to-view, from view-to-source, and in the two-way sequence: view-to-source-to-view
Services and Dependency Injection. In this submodule, we will learn about Services and Dependency Injection.
Angular distinguishes components from services in order to increase modularity and reusability.
A service provides, stores, and interacts with data. After injected into components, using dependency injection mechanism, fetshes the data into components.Page: 1Files: 3Books: 2
Angular Routing. Angular Single Page Applications
Angular Routing. In this submodule, we’ll introduce Angular Router and learn how it can update our application when the browser URL changes and vice versa.
The Router allows us to navigate to different pages without reloading the entire application.
Angular Single Page Applications. In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. The server then processes the request and sends the HTML of the page to the client.
In Single-Page Applications (SPAs) the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests.
This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page.
In this submodule we will learn to set up the router module to enable navigation among multiple component views.Page: 1Files: 2Books: 2
Reactive programming. json-server. HTTP Client
Reactive programming. In this submodule, we will introduce the basic concepts of Reactive Programming and we will prepare our application to fetch data from a JSON Server.
json-server. In this submodule, we will set up a local json-server and we will examine how this server, serves JSON data-files and other resources like images.
HTTP Client. In this submodule, we will configure the services and the components of our application to fetch data from our server and display them in a browser.Page: 1Books: 3
Forms. Sending data to the server. Building and Deploying
Forms. In this submodule, we will learn to create reactive forms in your Angular application.
While the user writes, the value of the input will be displayed above the form.
When the user submits the form, the values will be displayed in the existing unordered list.
Sending data to the server. In this submodule, we will learn how to persist changes in the data back to the server.
We will use the HttpClient.post method available on objects to save the feedback submitted by users to the server.
Building and Deploying. In this submodule, we will learn to use the Angular CLI to build a distribution folder with the set of application files that can be copied to the json-server to deploy the Angular application.Page: 1Books: 4File: 1
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.
Creation and Modes. In this submodule, we will create a blog-site on WordPress. We will also learn the different available modes of the site: Edit – View – Visit.
Theme – New page. A theme is a collection of files that work together to produce a graphical interface of a site. In this submodule, we will see how to select and setup a WordPress theme.
We will also create a typical HTML page using the HTML editor of WordPress and we will make it visible in the Navigation bar.
Subpages.WordPress supports submenus and subpages. In this submodule we will create subpages and we will add these in the Navigation bar below its main page.
We will also create a photo gallery.Books: 3
Posts and Pages.and Widgets. Google map and Contact form
Posts and Pages.In WordPress the posts are content entries listed in reverse chronological order, while the Pages are better suited for more timeless content.
In this submodule, we will categorize posts and we will create a custom Homepage. We will also learn to manage and enrich our content.
In this submodule, we will see how to manage comments in our blog-site.
A WordPress Widget is a small block that performs a specific function. In this submodule, we will see how to manage Widgets in our blog-site.
Google map and Contact form. In this submodule we will add a Google map in our site.
We will also add form elements in the contact Widget of WordPress.Books: 3