CODER’S HUB

FRONTEND
PROGRAMMING

www.valuemaxonline.com
admin@valuemaxonline.com

07025245467
09097221954
 TABLE OF CONTENTS
Day 1..... Overview of HTML FRONTEND PROGRAMMING
Day 2..... Formatting Tags
Day 3..... Table
Day 4..... Form DAYS TOPICS
Day 5..... Character Entities
DAY 6..... CSS Overview and Syntax HTML(HYPERTEXTMARKUPLANGUAGE)
Day 7..... CSS Text and Font
Overview of HTML
Day 8..... CSS- BACKGROUND,BORDER, Rules of HMTL
PADDING,MARGINS, OUTLINE, DAY 1 Structure of HTML
Indentation in HTML
BOX-SHADDOW & BOXMODEL Tags:
Symantic
Day 9..... CSS Dimension and Images
Non‐Symantic
Day 10..... CSS Links and List Key Tags in HTML:
Paragraph tag
Day 10..... CSS & FORM Header tags
Day 11..... CSS & FORM Comment tag
Lists:
Day 12..... Icon
Ordered/Numbered list
Day 13..... CSS-Cursor Unordered list.
Day 14..... More on Selector Nested list
Day 15..... CSS Animation Descriptive list.

Day 16..... CSS- @Rules Exercise: Each Students should build the Hire me! Page sent to the
Day 17..... CSS Effect and Filters platform
Day 18..... BOOSTRAP Component Formatting Tags
DAY 2
Day 19..... Component Cntd. Subscripts
Day 20..... Component Cntd. Superscripts
Strikethrough
Day 21..... Component Cntd. Bold/strong
Day 22..... GIT&GITHUB (Definition) Italics
Day 23..... Meaning of Repo Highlight
Abbreviate
Centre
Link
Concept of Attributes
Attributes of Link
Image
Iframe
How to locate file

DAY 3 Table
Merging of Row and Columns in Table
Form
Input
Type attributes: text, number, password, date, month, image,
search, radio, file, radio, color, checkbox, submit

DAY 4 Form
Label
Select and option
Textarea and its attributes.
Button
Fieldset
Other Input:Type Attriubutes: Placeholder, Value, maxlength,
required, readonly, min, max, autofocus, multiple and step.

Exercise: Each student is to create a form as given.

FRONTEND PROGRAMMING

DAYS TOPICS

DAY 5 Character Entities

Meta Tags and its function
Favicon and width
Resizing of pictures
Arrangement of Meta tags

Exercise: Each student should resize his/her favicon to the normal size.

CSS(CASCADINGSTYLESHEET)
DAY 6 CSS OVERVIEW & SYNTAX
Overview
What is CSS?
Why CSS? Advantages of CSS
Who Creates and Maintains CSS? Versions of CSS
Syntax (Basics) & Inclusion
Selector and Declaration explained
Example of CSS code
html & CSS
Relationship between html and CSS.
Internal CSS ( attribute style and head tag style)
External CSS
Best time to use or internal
CSS Theory of proximity (CSS rule overbidding)
CSS Comments
Coding html and css together

DAY 7 CSS TEXT & FONT

Text
Text Direction
Space between Characters
Space between Words
Text Indent
Text Alignment
Text Decoration
Text Cases
Text Shadow
Text Color
CSS and color generally
CSS Colors ‐ Hex Codes
CSS Colors ‐ Short Hex Codes
CSS Colors ‐ RGB Values
Building Color Codes
Fonts
Font Family
Font Style
Font Variant
Font Weight
Font Size
Font Size Adjust
CSS and measurement generally
percentage (%)
centimeters (cm)
em
vw
inches (in)
FRONTEND PROGRAMMING

DAYS TOPICS

DAY 8 CSS- BACKGROUND, BORDER, PADDING, MARGINS,

OUTLINE, BOX-SHADDOW & BOX MODEL
Background
background‐color
background‐image
background‐repeat
background‐attachment
background‐position
Border
Border styles(dotted, dashed, solid, double, groove, ridge, inset, outset,
none, hidden,)
Border Width
Border Color
Border ‐ Shorthand
Individual Sides
Rounded BordersPadding
The padding‐bottom Property
The padding‐top Property
The padding‐left Property
The padding‐ri ght Property
Padding shorthandMargins
The margin‐bottom Property
The margin‐top Property
The margin‐left Property
The margin‐right Property
margin + or ‐ direction explain
Margin shorthandOutline
The outline‐bottom Property
The outline ‐top Property
The outline ‐left Property
The outline ‐right Property
outline and form
outline shorthandBox‐Shadow
X axis shadow
Y axis shadow
Blur shadow
Color of the shadow

Exercise: Each students should create a frame for an image with the shadow reflecting inside.

DAY 9 CSS DIMENSION & IMAGES

Dimension
height
width
max‐width (read more here: https://developer.mozilla.org/enUS/docs/Web/CSS/min‐width)
min‐width
max‐height
min‐heightImages
Image Border
Image Height
Image Width
image‐opacity
rgba

Exercise: Each student should fade an Image using RGBA.

FRONTEND PROGRAMMING

DAYS TOPICS

DAY 10 CSS LINKS & LIST

Links
Set the Color of Links
Set the Color of Visited Links
Change the Color of Links when Mouse is Over
Change the Color of Active Links
Combining all the above in a right order.
open a link in a new tab
LISTS
list‐style‐type (disc, square, decimal, decimal‐leading‐zero, lower‐roman, upper‐roman, lower‐greek, lower‐
latin, upper‐latin, armenian, georgian, lower‐alpha, upper‐alpha, none)
list‐style‐image
html definition/descriptive & nested list
css list display
list and link with css (practice)

CSS & TABLE

CSS table border
border‐collapse
css table‐layout (auto, fixed, inherit)
table height & width
table data horizontal/ vertical alignment
css table padding
hoverable table
strike table
border‐spacing
table‐layout
responsive table (overflow)Exercise:
CSS & TABLE
CSS table border
border‐collapse
css table‐layout (auto, fixed, inherit)
table height & width
table data horizontal/ vertical alignment
css table padding
hoverable table
strike table
border‐spacing
table‐layout
responsive table (overflow)

Exercise:

DAY 11 CSS & FORM

Form width & height
input[type=”text”] styling
input & borders
padded input
input outline &input:focus
input with icon image
textarea resizing and border‐box
Styling Input Buttons, submit, reset
CSS & DIV, CLASS, ID & POSITION
div
class
id
different between class & id
span
position
static
absolute
FRONTEND PROGRAMMING

DAYS TOPICS

DAY 11 fixed
relative
sticky

Z-INDEX,
FLOAT
right;
left

Exercise:
1. Each student should create a page with image at the four angle of the
page using float.
2. Each student should create a Nav bar with menu
ICON
DAY 12 1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/
4.7.0/css/font‐awesome.min.css">;
<i class="fa fa‐"></i>;
https://fontawesome.com/icons?d=gallery

2.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boots

trap.min.css">
<i class="glyphiconglyphicon‐">no anchor</i>
https://icons.getbootstrap.com/

3.(<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">;

<i class="material‐icons">anchor</i>
https://material.io/tools/icons/?icon=accessibility_new&style=baseline
DISPLAY (inline, block, none, inline-block, flex, grid)
Display flex:
flex‐direction: row, column
justify‐content: flex‐start, flex‐end, center, space‐between, space‐around
align‐items: flex‐start, flex‐end, center, baseline
Display grid:
grid‐template: row, column
justify‐content: center, end, start, space‐around, space‐evenly
Block-level Elements:
<div>
<h1> ‐ <h6>
<p>
<form>
<header>
<footer>
<section>
inline-level elements:
<span>
<a>
<img>
VISIBILITY (hidden/visible)
Exercise

CSS CURSORS
DAY 13
auto, crosshair, default, pointer, move, e‐resize, ne‐resize, nwresize,
n‐resize, se‐resize, sw‐resize, s‐resize, w‐resize, text, wait, help,

CSS OVERFLOW ( hidden, visible, scroll and auto)

DROPDOWN
Exercise: Student should create a Nav bar with a dropdown as part of the
menu item at the extreme right of the Nav bar.
FRONTEND PROGRAMMING

DAYS TOPICS

DAY 14 MORE ON SELECTOR

The Type Selectors
The Universal Selectors
The Descendant Selectors
The Class Selectors
The ID Selectors
The Child Selectors
The Attribute Selectors
Multiple Style Rules
Grouping Selectors
Pseudo selector
:link, :visited, :hover, :active, :focus
:first-child, :lang, :first-line, :first-letter, :before, :after pseudoelement

CSS ANIMATION
DAY 15 @keyframes Rule
animation‐name
animation duration
animation delay
animation‐iteration‐count
animation‐direction
animation‐timing‐function
animation‐fill‐mode
animation shorthand property

TRANSITION

TRANSFORMATION

Exercise:

DAY 16 CSS @ RULES

GRADIENTS
linear‐gradient
radial‐gradient
BROWSER SUPPORT PREFIXES
‐webkit‐
‐moz‐
‐o‐
MEDIA QUERY
@charset Rule
!important Rule

Exercise: Each student should fill a box fill using linear gradient

CSS EFFECT & FILTERS

DAY 17 Alpha Channel
Motion Blur
Chroma Filter
Drop Shadow Effect
Flip Effect
Glow Effect
Grayscale Effect
Invert Effect
Shadow Filter
Wave Effect
X‐Ray Effect
FRONTEND PROGRAMMING

DAYS TOPICS

BOOTSTRAP
Day 18 Overview
DAY 18 Usefulness of bootstrap
Methods of using Bootstrap
Online method
Download method
Introduction
Grid System

COMPONENT
Buttons
DAY 19 Alert
Alert Dismissible
Nav
Tab
Nav pill
Toggleable Tabs

COMPONENT
DAY 20 Modal
Collapse
Accordion

COMPONENT
DAY 21 Navbar
Carousel
Scrollspy

GIT AND GITHUB

Definition of Git
DAY 22 What is Github
Function of Git
Difference between Git and Github
Git commands

Exercise: Each student should push to Github

Meaning of Repo
Difference of local Repo and Remote Repo
DAY 23 Deployment of Project from Github to:
1. Vercel
2. Netlify