Teman Ed-Tech

Block and Inline

Hyperlinks

Lists

Tables

Forms

Media Tags

Icons

This module will consist of five sections.

Starting with the features and fundamentals of HTML 5,
You will study different kinds of HTML tags, attributes and elements
As well as how to insert icons and media - images, audio/video - into webpages .

CSS Box Model

Colors

Background & Font Properties

Gradients

Shadows

Pseudo Classes and Elements

The CSS Module will consist of eleven sections in all.

The features and fundamentals of CSS3 will be covered in the first section.
In the following sections, you will learn various CSS properties required to structure, organise and style webpages.

Flex

Grid

Grid Templates

Justify Content

Align Items

Align Content

CSS Flexbox and CSS Grid System are used to create layouts in one and two dimensions respectively. These are two of the most important and most commonly used concepts in building webpages.

Flex properties like flex wrap, flex flow, flex basis, etc. will be discussed in this section, as well as,
Grid container and grid item properties like grid templates, grid gap, etc.
Justify content, align items, align self, and other more frequently used characteristics to structure flex or grid elements.

Keyframes

Transitions

Transform properties

Animation Properties

3D Animations

CSS Keyframes and Animation properties make it possible to transition HTML elements, from one CSS style configuration to another. In this section, you will learn to master animations through :

keyframes, that indicate the start and end states of the animation's style
and other animation properties like duration, delay, iteration, etc.

Responsive units

Media Queries

Responsive web design is the most useful and intuitive development. It is a standard practice for every web designer to provide the best user experience by creating web pages that look good on all devices.

In this section, you will learn about responsive units, that will help HTML elements adapt to the device.
As well as breakpoints and media queries, to make HTML elements respond to the screen size.

HTML Basic Tags

HTML Forms

CSS Properties

CSS Flexbox

Transition Animations

Responsive Web Design

You will be developing a responsive, static photography portfolio webpage. In this project :

You will create two pages - the homepage and the contact page - and connect them with HTML hyperlinks.
You will learn how to make an image gallery using the CSS Grid framework.
In the contact page, you will learn how to apply various form elements.
Finally, you'll learn how to utilise media queries to make the webpage responsive for devices ranging from smartphones and tablets to laptops and desktops.

HTML Basic Tags

CSS Properties

CSS Grid Framework

CSS Flex Box

Transition Animations

Responsive Web Design

You will create a highly responsive static e-commerce webpage that displays natural products.

This project will teach you how to develop product cards (specific information about a product), which are used to showcase items on most major e-commerce websites.
You will learn to insert icons and apply CSS Transition animations, in addition to basic CSS styling properties.
Finally, you'll learn how to use media queries to make the webpage responsive for a variety of devices, including smartphones, tablets, laptops, and desktops.

Breakpoints

Containers

Grid and Columns

Form Control

Components

Utilities

The course will teach you the fundamentals of Bootstrap.

You will learn about the mobile first approach and how Bootstrap makes it much easier to create responsive webpages.
You will fully understand how CSS and the Bootstrap Grid System differ from one another.
You will learn how to style HTML elements using Bootstrap's pre-defined classes, which are known as utilities (that function as CSS properties).
You will learn how to customise various Bootstrap pre-built components, which will help you build websites faster and easier.

Bootstrap Grid and Columns

Bootstrap Utilities

CSS Keyframes

Carousel Component

Modal Component

NavBar Component

You will create a highly responsive static landing page for a corporate service provider.

You will learn how to use the pre-defined Bootstrap components, such as the navigation bar, carousel, and modal, in this project. Additionally, how to modify them using Bootstrap utlities.
The row-and-column Boostrap grid system will be used extensively.
Finally, you'll comprehend how to use Bootstrap's Breakpoints, which help you make the webpage responsive.

Bootstrap Grid and Columns

Bootstrap Utilities

Accordion Component

Card Component

Carousel Component

Masonry Layout

NavBar Component

You will create a highly responsive static landing page for a corporate service provider.

You will learn how to use the pre-defined Bootstrap components, such as the accordion, card, card-group, carousel and navigation bar, in this project. Additionally, how to modify them using Bootstrap utlities.
You will learn how to design a masonry layout for protfolio images.
The row-and-column Boostrap grid system will be used extensively.
Finally, you'll comprehend how to use Bootstrap's Breakpoints, which help you make the webpage responsive.

HTML5 Essentials

CSS Essentials

CSS Flex and Grid

CSS Animations

Responsive Web Design

Photography Landing Page Project (Project 1)

Orgenik Landing Page Project (Project 2)

BOOTSTRAP Essentials

Flexis (Corporate) Landing Page Project (Project 3)

Selecao (Corporate) Landing Page Project (Project 4)