skills logo

Explore

  1. Courses
  2. Creating Employee Directory

Creating Employee Directory

skills

INTERMEDIATE

Project

Updated 1 year ago

About

Modules

M:1

Create markup with Adobe XD

5 Lessons

|

22 Min

When thinking of creating a website or coming up with new products, creating high fidelity markup always help the team iterate through ideas and quickly identify issues and how they can be fixed. In this lesson, we will create a simple employee directory page with Adobe XD.

  • Introduction

    1:20

  • Planning design on Adobe XD

    6:05

  • Gridding System in Adobe XD

    7:12

  • Editing user information

    8:09

  • CED - Create Markup With Adobe XD Quiz

    -

M:2

Creating the page structure with HTML

5 Lessons

|

16 Min

There is no webpage without HTML (Hypertext Markup Language); in this short lesson, we used HTML to create the basic structure of our employee directory page. You will learn HTML Structure, Commenting and Classes and ID

  • HTML Introduction

    0:23

  • Declaring the search section

    6:33

  • Adding employee metadata

    4:59

  • Updating the employee name and position

    4:31

  • CED - Web Page Structure With HTML Quiz

    -

M:3

Styling the page with CSS

7 Lessons

|

30 Min

We will add the CSS styling by making sure it appears nicely on almost every screen sizes.

  • Previewing the directory

    1:49

  • Linking the CSS file and making declarations

    6:02

  • CED - Linking CSS file and making declarations Quiz

    -

  • Styling the search form and model box

    10:36

  • CED - Styling the Search form and model box Quiz

    -

  • Adding hover effect

    11:53

  • CED - Hover Effect Quiz

    -

M:4

Adding functionality with JavaScript

6 Lessons

|

16 Min

Add the JavaScript functions that will respond to user searches and events.

  • Introduction to the JavaScript logic

    1:27

  • Creating displayEmployees Function

    5:09

  • CED - Creating displayEmployees Function Quiz

    -

  • Targeting children elements

    6:22

  • Adding event listener to search

    3:30

  • CED - Adding Event Listener Quiz

    -

Project:
eCommerce Product Catalogue

In this project, you will be asked to add interactivity to an existing web page. You will use javascript to toggle the hamburger menu on mobile screens, display products based on selected categories & display product items that match the input.

Carefully read "how you will be graded" instructions before completing any tasks.

Own your solution. Do not copy any text, source code and descriptions from other sources. The project must be your work only.

Read the instructions below.

Instructors:

Details not provided...

Preview this course

This course includes:

  • 1 Hr, 27 Min on-demand video
  • 7 assignments
  • Lifetime access
  • Milestone budges
5 star
4 star
3 star
2 star
1 star
★★★★★

instinctHublogo

Powered by instinctHub

© 2025 All right reserved

  • Privacy Policy
  • Terms & Condition