Storyboard Web Development and Databases

Introduction to Web
Development and Databases

Storyboard
Overview
Course Title: Introduction to Web Development and Databases
Learning objective: The Learning Objectives for this training include:
- implement single page applications in Visual Studio
- use various VS features, including toolboxes and forms
- implement a functional front-end web login page
- design database tables
- apply CSS styles
Description Text In this course, we're going to start with the basics of web development and database
manipulation, and with your attention and practice and a lot of persistence, you'll be able to
learn to create your own websites.
Units Instructor note
Course overview
Download Softwares
Database and data manipulation
Development of login page with its style
Client: Software unit
Instructional Designer: Rabih Kahaleh

Units
Nr Name Content
1 Instructor Note
2 Course overview
3 Download Software's - Download and install visual studio, SQL Server
4 Database and data - SQL server database
manipulation - Database, tables, datatypes and queries
5 Development of login - Creation of login page
page with its style - Importing styles
- Applying styles
6 Quiz Module 1 quiz
7 Forum Discussion forms
Style Guide
Logo RK Tech Logo (.jpg)
Cover Photo Blue picture with development laptop (.jpg)
Custom colors
Fonts Heading: LATO - #2D363A
Body: Merriweather #313537
Additional Notes Free Navigation
Templates Na
1: Instructor note
Lesson Instructor note
BLOCK ID 1.1 BLOCK TYPE paragraph
NOTES CONTENT
Font Color: #313537 Text

Font Size: 17px
Font-Family: Merriweather Welcome to Introduction to Web Development! I'm excited to have you in the class and look forward to
your contributions to the learning community.
To begin, I recommend taking a few minutes to explore the course site. Review the material we’ll cover
each week. Click Discussions to see forums where you can discuss the course material with fellow
students taking the class.
If you have questions about the course content, please post them in the forums to get help from others
in the community.
Good luck as you get started, and I hope you enjoy the course!
Lesson Instructor note
BLOCK ID 1.2 BLOCK TYPE Button
NOTES CONTENT
Button-Text: Continue
DIV
Padding: 30px 0px 0px 0px
Background-color: #F3F3F3
Button
Text font size: 15px
Text font family: Lato
Font color: #FFFFFF
Button background color:
#FF631E
2: Course overview
Lesson Course overview
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather I commend you for choosing to learn something about the foundations of web development. Whether
you're planning on being a web developer part-time, or just as a hobby, or even a full-time developer, I
think this course can help you get started.
Bulletin In this course, we're going to start with the basics of web development and database manipulation, and
18px LATO #FF631E with your attention and practice and a lot of persistence, you'll be able to learn to create your own
websites.
Text-bulletin Today, as we use the internet more and more, including on mobile phones, these skills can benefit
Font Color: #313537 everyone, whether you're treating them as a hobby or as a profession. Thanks for joining me, I look
Font Size: 17px forward to working with you, and I'll see you in future lessons in the course.
Font-Family: Merriweather
Bulletin
1. be able to implement single page applications in Visual Studio
2. be able to use various VS features, including toolboxes and forms
3. be able to implement a functional front-end web login page
4. be able to design database tables
5. be able to apply css styles
Lesson Course overview
NOTES CONTENT
DIV
Button
Font color: #FFFFFF
#FF631E
3: Download & Install VS / SQL Server
Lesson Download & Install Visual Studio / SQL Server
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather In this section, you will learn how to download and install Visual Studio 2020 and SQL Server 2012.
BLOCK ID 3.2 BLOCK TYPE Multimedia video
NOTES CONTENT
Tutorial Video Video
Tutorial video on how to download and install Visual Studio 2020 and SQL Server 2012.
BLOCK ID 3.3 BLOCK TYPE Paragraph
NOTES CONTENT
Divider
NOTES CONTENT
Font Color: #313537 Text and links

Font Size: 17px
Font-Family: Merriweather Visual Studio: https://visualstudio.microsoft.com/downloads/
SQL Server: https://www.microsoft.com/en-us/download/details.aspx?id=50003
NOTES CONTENT
DIV
Button
Font color: #FFFFFF
#FF631E
4: SQL Server Database
Lesson SQL Server Database
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather In this section, you will learn to differentiate between small and large databases.
NOTES CONTENT
Tutorial video on how to differentiate between small and large databases.

BLOCK ID 4.3 BLOCK TYPE Divider
NOTES CONTENT
Divider
BLOCK ID 4.4 BLOCK TYPE Knowledge check - Matching
NOTES CONTENT

Font Size: 17px Match the following items from left to right
Small database -------------------- Microsoft access, paradox (Correct)
Large database -------------------- Sql Server, Oracle, and mysql (Correct)
Feedback on incorrect answer:

Incorrect, please review the above video about database overview. (0:19 minutes)
BLOCK ID 4.5 BLOCK TYPE Knowledge check – Single Choice
NOTES CONTENT

Font Size: 17px A large database can support?
1- Only 1 million records (Incorrect)
2- Only 1 thousand records (Incorrect)
3- More than a million records (Correct)

Incorrect answer, Please review the above video at (0:30 minute)
NOTES CONTENT
DIV
Button
Font color: #FFFFFF
#FF631E
5: Database, tables, datatypes and queries
Lesson Database, tables, datatypes and queries
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather In this section, we will talk about databases, tables, datatypes and queries.
NOTES CONTENT
Tutorial video to learn about primary and foreign key, in addition to the command statement for query
manipulation
NOTES CONTENT
Divider
BLOCK ID 5.4 BLOCK TYPE Knowledge check – Multiple Choice Question
NOTES CONTENT

Font Size: 17px What is the type of the primary key in the database table?
Options
Numeric (Correct)
String (Incorrect)
Bit (Incorrect)
Date (Incorrect)

Incorrect answer, primary key should be integer or numeric.
BLOCK ID 5.5 BLOCK TYPE Knowledge check – Matching blocks
NOTES CONTENT

Font Size: 17px Please select the correct definition for each command.
Delete ------------------------Delete data upon a criteria (Correct)
Select ------------------------Select data based on a condition (Correct)
Insert ------------------------ Insert new data into the table (Correct)
Update ------------------------Update data on a condition (Correct)

Incorrect. Please review the YouTube video "Database-Tables-Queires" (1:30 minute)
NOTES CONTENT
DIV Button-Text: Continue

Button
Font color: #FFFFFF
#FF631E
6: Creation of Login Page
Lesson Creation of Login Page
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather In this section, we will learn how to create a new web application, add a new web form, add custom
toolbox to build a login page.
NOTES CONTENT
Tutorial video to learn how to create a web application login page in visual studio 2019.
NOTES CONTENT
Divider
BLOCK ID 6.4 BLOCK TYPE Knowledge check – Single Choice Question
NOTES CONTENT

Font Size: 17px In Visual Studio, where can I modify the display name of a label?
1. Right click on the label, then properties, then edit the text field. (Correct)
2. Hover over the label, then properties, then edit the text field.String (Incorrect)
3. Double click on the label, then properties, then edit the text field. (Incorrect)

Incorrect answer. Please review the above video at (1:10 minute).
NOTES CONTENT

Button
Font color: #FFFFFF
#FF631E
7: Importing CSS Styles
Lesson Importing CSS Styles
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather In this section, we will learn how to apply a cascading style sheet to the custom toolbox such as label,
textbox and button.
NOTES CONTENT
Tutorial video to learn how to import CSS styles links and code for label, button and text into the web
application login page in visual studio 2019.
NOTES CONTENT
Divider
BLOCK ID 7.4 BLOCK TYPE Flip Box
NOTES CONTENT
Font Color: #313537 Text – Statement A

Font Size: 17px Where should the boostrap link and script be placed in the html file?
Text – Statement B
At the top, Inside <head></head>
NOTES CONTENT

Button
Font color: #FFFFFF
#FF631E
8: Apply Styles
Lesson Apply Styles
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather In this section, we will start customizing the CSS styles for each element and see the result in action.
Lesson Apply Styles
NOTES CONTENT
Tutorial video to learn how to apply CSS styles in the custom web forms components.
Lesson Apply Styles
NOTES CONTENT
Divider
Lesson Apply Styles
BLOCK ID 8.4 BLOCK TYPE Single choice question
NOTES CONTENT

Font Size: 17px To change the color of a mouse over action, you will have to
1. Go to the span hover property and change the color property inside. (Correct)
2. Go to the span over property and change the color property inside. (Incorrect)

Incorrect answer. Please watch the above YouTube video (2:11 minutes).
Lesson Apply Styles
NOTES CONTENT

Button
Font color: #FFFFFF
#FF631E
9: Quiz
Lesson Module 1 Quiz
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather Submit your assignment.
Due April 18, 9:59 AM
Receive grade
To Pass 75% or higher
NOTES CONTENT
Button
Start quiz
BLOCK ID 9.3 BLOCK TYPE Single Choice Question
NOTES CONTENT

Font Size: 17px When considering the visual design of our website, which of these approaches is recommended?
Image
Response
Consider how the site will appear to users and seek feedback from friends. (Correct)
Adding as much information as possible to our page (Incorrect)
Using shocking colors to get attention (Incorrect)

Incorrect answer, please review section "Importing CSS Styles"
BLOCK ID 9.4 BLOCK TYPE Multiple Choice Question
NOTES CONTENT

Font Size: 17px Which of the following does not relate to form input?
Options
Textbox (Correct)
Label (Incorrect)
Button (Incorrect)

Incorrect answer. Please review section "Creating a login page."
BLOCK ID 9.5 BLOCK TYPE Single Choice Question
NOTES CONTENT

Font Size: 17px What do you understand by ‘Database’?
Image represent database
Response
An organized collection of related data where the data is stored and organized to serve some specific
purpose. (Correct)
An organized collection of random data is displayed at the front end. (Incorrect)

Incorrect answer, please review the section "databases"
10: Discussion forms
Lesson Discussion forms
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather Web Development
#FF631E
20px
Text
What is the language used in the web development?

Bold
Text
The languages used for visual studio software are C#, J# and asp.net.
Lesson Discussion forms
BLOCK ID 10.2 BLOCK TYPE Image
NOTES CONTENT
Image represents the C# language

11: Thank you
Lesson Thank you
NOTES CONTENT

Font Size: 17px
Font-Family: Merriweather I'm so glad to be a student under your guidance. Thank you for your time and patience and for treating
your position as a privilege rather than a job. You're truly inspiring and I wish to thank you from the
bottom of my heart.

Storyboard Web Development and Databases

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Storyboard Web Development and Databases

Uploaded by

Copyright:

Available Formats

Introduction to Web

Development and Databases

Instructional Designer: Rabih Kahaleh

Cover Photo Blue picture with development laptop (.jpg)

Additional Notes Free Navigation

BLOCK ID 1.1 BLOCK TYPE paragraph

Font Color: #313537 Text

BLOCK ID 1.2 BLOCK TYPE Button

BLOCK ID 2.1 BLOCK TYPE paragraph

Font Color: #313537 Text

BLOCK ID 2.2 BLOCK TYPE Button

BLOCK ID 3.1 BLOCK TYPE paragraph

Font Color: #313537 Text

BLOCK ID 3.2 BLOCK TYPE Multimedia video

Tutorial Video Video

BLOCK ID 3.3 BLOCK TYPE Paragraph

BLOCK ID 3.4 BLOCK TYPE Paragraph

Font Color: #313537 Text and links

BLOCK ID 3.5 BLOCK TYPE Button

BLOCK ID 4.1 BLOCK TYPE Paragraph

Font Color: #313537 Text

BLOCK ID 4.2 BLOCK TYPE Multimedia video

Tutorial Video Video

Tutorial video on how to differentiate between small and large databases.

BLOCK ID 4.3 BLOCK TYPE Divider

BLOCK ID 4.4 BLOCK TYPE Knowledge check - Matching

Font Color: #313537 Text

Feedback on incorrect answer:

BLOCK ID 4.5 BLOCK TYPE Knowledge check – Single Choice

Font Color: #313537 Text

Feedback on incorrect answer:

BLOCK ID 4.6 BLOCK TYPE Button

BLOCK ID 5.1 BLOCK TYPE Paragraph

Font Color: #313537 Text

BLOCK ID 5.2 BLOCK TYPE Multimedia video

Tutorial Video Video

BLOCK ID 5.3 BLOCK TYPE Divider

BLOCK ID 5.4 BLOCK TYPE Knowledge check – Multiple Choice Question

Font Color: #313537 Text

Feedback on incorrect answer:

BLOCK ID 5.5 BLOCK TYPE Knowledge check – Matching blocks

Font Color: #313537 Text

Feedback on incorrect answer:

BLOCK ID 5.6 BLOCK TYPE Button

DIV Button-Text: Continue

BLOCK ID 6.1 BLOCK TYPE Paragraph

Font Color: #313537 Text

BLOCK ID 6.2 BLOCK TYPE Multimedia video

Tutorial Video Video

BLOCK ID 6.3 BLOCK TYPE Divider

BLOCK ID 6.4 BLOCK TYPE Knowledge check – Single Choice Question

Font Color: #313537 Text

Feedback on incorrect answer:

BLOCK ID 6.5 BLOCK TYPE Button

DIV Button-Text: Continue

Font Color: #313537 Text

BLOCK ID 7.2 BLOCK TYPE Multimedia video

Tutorial Video Video

BLOCK ID 7.3 BLOCK TYPE Divider

BLOCK ID 7.4 BLOCK TYPE Flip Box

Font Color: #313537 Text – Statement A

BLOCK ID 7.5 BLOCK TYPE Button

DIV Button-Text: Continue