FRONTEND (USER INTERFACE) TECHNOLOGIES

Technical Topics to Learn and Prac ce

1. HTML
2. HTML5
3. CSS
4. CSS3
5. Bootstrap
6. Material-UI
7. JavaScript
8. ReactJS
9. TypeScript
ti
 HTML tags:
1. HTML

2. Head

i) tle

ii) h1 --- h6

3. Body

• p

• br

• a

• img

• lists

• table

i)th

ii)tr

iii)tb

• div

• span

• form

i) input(text,checkox,radio,bu on,submit)

ii) select
ti
tt
 iii) text area

• bu on

• iframe

• layouts

Exercise:

Develop a simple calculator interface

tt
 CSS:
1. Width

2. Height

3. Border

4. Color

5. Font

6. Padding

7. Margin

8. Posi on

9. Show/hide

10. Index

11. De ning style

• Inline

• Internal

• external

Exercise:

Match all fonts, colors, paddings, margins, sizes, etc. all exactly as in the exercise
picture.
h ps://pin.it/5oRIRv6
tt
fi
ti
 Bootstrap:
1. Grid

2. Typography

3. Colors

4. Tables

5. Images

6. Alerts

7. Bu ons

8. Bu on Groups

9. Badges

10. Cards

11. Dropdowns

12. Navs

13. Navbar

14. Forms

15. Inputs

16. Input Groups

17. Popover

18. Flex

19. Icons
tt
tt
 20. Media objects

21. Filters

22. Progress Bars

23. Spinners

Exercise:

https://www.pinterest.ca/pin/7248049390118940/
 Material-UI
1. Installa on

2. Components

• Layout

• Inputs

• Naviga on

• Surfaces

• Feedback

• Data display

• U ls

• Lab

• Data Grid

3. Component API

4. Styles

5. System

6. Customiza on

Link: h ps://material-ui.com/

Exercises:

Ensure to MATCH EXACTLY (without any deviations or

differences).
1. https://dribbble.com/shots/2987814-MySeaTime-Dashboard-
Screens/attachments/623133
ti
tt
ti
ti
ti
 2. https://dribbble.com/shots/2987814-MySeaTime-Dashboard-
Screens/attachments/623131?mode=media
3. https://dribbble.com/shots/1785799-Tackkkle-Dashboard-Final-
Version/attachments/292813?project_id=219568
4. https://dribbble.com/shots/5951308-HR-Dashboard/
attachments/1279810?mode=media
5. https://dribbble.com/shots/3137131-Pleo-web-app-Expense-
section-admin-view/attachments/664425?mode=media
6. https://dribbble.com/shots/2921415-Payments/attachments/
606127?mode=media
7. https://www.behance.net/gallery/83197755/Property-
Management-Dashboard
KEEP THIS LINK CONFIDENTIAL and do NOT share with anyone
and do not send out to other email addresses at all. This is
HIGHLY CONFIDENTIAL.

https://jpmccre-blackbird.invisionapp.com/share/K6ESE6OYG5W#/
screens/271571096

You can download a custom font from web and use

this : AmplitudeWideRegular

1. https://jpmccre-blackbird.invisionapp.com/share/K6ESE6OYG5W#/
screens/271571103
2. https://jpmccre-blackbird.invisionapp.com/share/K6ESE6OYG5W#/
screens/271600930
3. https://jpmccre-blackbird.invisionapp.com/share/K6ESE6OYG5W#/
screens/271602899
 JavaScript
1. Variables
2. Func ons
3. Condi ons
4. Loops
5. String opera ons
6. Date opera ons
7. Regular Expression
8. Call external API server to get data and show locally on browser
ti
ti
ti
ti
 ReactJS
Main Concepts:
1. Rendering Elements
2. Components and Props
3. State and Lifecycle
4. Handling Events
5. Condi onal Rendering
6. Lists and Keys
7. Forms
8. Li ing State Up
9. Composi on and Inheritance
React Hooks:
1. Using the State Hook
2. Using the E ect Hook
3. Rules of Hooks
4. Building your own Hooks
5. Hooks API Reference
Link: h ps://reactjs.org/docs/ge ng-started.html

Exercises:

Contact manager for exercise links

ft
ti
tt
ti
ff
tti
 TypeScript:

1. Variable Declara ons

2. Variable Types

3. Func ons

4. Interface

5. Class

6. Access Modi ers

7. Type Annota ons

8. Arrow Func ons

9. Interfaces

10. Constructors

11. Proper es

12. Modules

Primarily you should be able to :

1. Retrieve data from remove backend service and save it locally in a state
2. Render the data on a list-view (with list of students in a table)
3. Render the data on a read-only-view (with single student object)
4. Render the data on an editable-form-view (with single student object)
5. Submit the newly entered form-data to remote backend-service
6. Naviga ng between di erent pages
ti
ti
ti
ti
fi
ti
ti
ff