Module 1
Introduction To
Web Development
CHROME DEVELOPER TOOLS, JSFIDDLE
AND SIMPLE HTML MARKUP
This slideshow supplements the material in Chapter 1 of Web
Development and Design Foundations with HTML5
1
Module 1
1. Why Study Web Development Module 1 in a Text Form
at
2. About this course
Lab Instructions
3. Languages Used for Web Developme
nt
4. How to use Chrome Developer Tools
5. Simple HTML Markup -Let's Start Codi
ng
6. Text editors and Your Work Flow
2
Why Study Web Development?
Web development skills are Job
in demand in the Opportunities
workplace. The work is
estibulum
both meaningful and congue
challenging. Meaningful Challenging
3
10 Reasons Why
You Should Study Web Development
4
10
You can learn the coding
languages used to make
websites: HTML, CSS and
JavaScript!
5
HTML and CSS are the
ideal coding languages to
9
learn first.
Markup languages are easier to learn than
other programming languages. You can
learn HTML and CSS to see if you enjoy
coding and want to pursue a career in
programming.
6
Interested in Game
8
Development?
HTML and CSS are the foundations of the
Video Game Design Program at Saint Paul
College. The game creating tools export to
the website code.
7
7
Making websites is a
creative outlet, using
both technical and
artistic skills.
8
6
You will be able to make a
website for your family or
friend's business!
9
Employers are looking for
employees with skills to
5
build and manage
websites.
Even if you aren't working on a computer science
degree, add website skills to your resume. It will help
you land a job. In many corporations, the front-facing
website is handled in communications instead of IT.
10
Most developers create
4
software that is web-
based.
If your goal is to be a Java or C# (.NET) developer, you
will be creating web-based software. Knowing HTML and
CSS will make you a better programmer.
11
The problem-solving involved in
3
coding feels similar to beating
the boss in a video game.
It is exhilarating to overcome challenges
to make your software work.
12
Recruiters want employees with
2
experience in WordPress,
Bootstrap, Javascript, PHP,
jQuery and React, all of which
are built on HTML and CSS.
In designing this course, I am choosing tools that
will be helpful for your resume.
13
1 Making websites is a blast!
14
Look for the stickers
As you read through this
slideshow, look for the "Let's Do
It" stickers.
When you see one of these
stickers, it means that you need to
do something other than read the
content of this slideshow.
15
Forward Your Email
16
Forward Student Email
How often do you check your student email?
If you don't check it every day, then it is critical to forward
your school email to your personal email box.
Your instructors rely on you checking your email regularly. For
example, before an instructor removes you from class with an
FW (Failure to Withdraw), they will contact you via email.
It's easy! Let's do it right now.
17
Forwarding Instructions - Step 1
18
Forwarding Instructions - Step 2
19
Forwarding Instructions - 3
Choose the
Forwarding
Settings
20
Forwarding Instructions - Step 4
And that's it! You now
can receive your school
email in your personal
email box.
21
Syllabus
22
Review the Syllabus
Open D2L.
Navigate to this course.
Go to Materials -> Syllabus
I'll cover some highlights from the syllabus in the next
several slides.
23
Textbook
Required Textbook
Web Development & Design Foundations with HTML5 – 8th, 9th or 10th Edition
Author: Terry Felke-Morris
The textbook is available to you online in D2L. Go to Content->Textbook. With
the online textbook you will be able to search for answers to quiz questions.
Prefer a paper textbook?
If you prefer to have the book on paper, you can purchase an older edition on
[Link] for approximately the same price. Follow the instructions you will
receive in email for opting out of the online textbook.
24
Class Calendar
There is a class calendar in the syllabus, but there is much more
detail in D2L. To see your homework for the week, go to Content -
> Modules. Each week we will complete one modules. Each
module includes:
● Assigned reading from the textbook
● Module slideshow
● Quiz on the assigned reading and the slideshow
● A lab assignment
Homework is due on Sundays at 10pm each week.
25
Highlighted Syllabus Policies
26
Grading
Scale: 90 – 100% = A | 80 – 89% = B | 70 – 79% = C | 60 – 69% = D |
Below 60% = F
The course has been designed to have a total of 500 points.
This course is graded entirely by the numbers. There are no
plus or minus grades. When we come to the end of the
semester, if your percentage is close to the next grade it
may be worthwhile to do some extra credit work to turn a C
into a B or a B into an A. The maximum extra credit you
may apply to your class score is 25 points.
If you score 97% or above in the class I will create a
Certificate of Excellence for you. The certificate is from
me (not the college), and something that you can place on
your resume.
27
Late Quizzes and Labs
Quizzes must be completed by the due dates shown in D2L. No extensions will be
given; however, there will be opportunities for extra credit to make up for missed
quizzes.
Lab Assignments may be submitted late for reduced points:
● 1 - 7 days late for up to 80% credit
● 7-14 days late for up to 50% credit
After 14 days no credit will be given for lab assignments.
When the end of the semester approaches, there will be shorter deadlines for late
lab assignments. See exact due dates in D2L.
If your lab assignments are submitted late because of a situation out of your
control, include an explanation in the D2L assignment folder so I can consider an
exception.
28
Working Together on Class Labs
I encourage you to work with others to complete the lab assignments. When you
are working together on an assignment, you may show another student how you
solved a specific coding problem or help another student find a coding bug.
However, each student must complete their own lab assignments.
● Do not provide a copy of your lab assignment to another student for any
reason.
● Do not share your code in such a way that another student can copy your
code.
See the syllabus section on Academic Integrity.
29
Open Book Quizzes
In writing the quiz questions I have chosen the
most important concepts for you to comprehend
before you begin the corresponding lab
assignment.
All quizzes are open book with no time limit.
The quiz questions are based on material in the
textbook and slideshows, and the textbook and
slideshows are the "source of truth" for the quiz
answers.
You may use search tools to find answers to the
quiz questions.
You may not work with another student on the
quizzes.
30
Using Code from the Internet, the
Inspector or AI Services (like Chat GPT)
Copying code snippets from the Internet is a key part of the life of a
developer. However, the objective of this course is to teach you how
to code websites by hand to optimize your learning. If you end up
using code that you find on the Internet for a lab assignment, it must
be a small subset of code for a specific feature. You should recognize
the developer from whom you copied the code in code comments or
in the footer of your website.
For this course, your code must be hand-typed. You may not use Chat
GPT or other AI service to write any code for this class. However, you
may use Chat GPT for writing text, like a paragraph summarizing
yourself or write a resume. Any text you use from Chat GPT must be
true for you.
31
Deadlines at 10PM
Homework deadlines are set for
10pm rather than at midnight in D2L.
I set class homework deadlines at
10pm because I do not want you to
stay up late to complete homework
assignments for this class.
32
Copyright of Images
Because websites are published on the Internet, it is
important to have permission to publish any images
you use in the Lab Assignments. The images I am
providing will all have that permission. Images you
find on Google Images do not have that permission.
You can publish images that you take yourself as
well as images that are free to use and royalty-free
(like from [Link]).
I can't stress enough how important this is.
There are copyright trolls scanning the
Internet to see if their image has been used
without permission. They could bill you for
thousands of dollars.
33
About this Course
34
How to navigate in D2L/Brightspace
● Content->Textbook
● Content-> Modules
○ Lab Assignment Folders
○ Slideshows
○ Quizzes
● Other Tools➜Calendar
○ Note the quiz and lab
deadlines
35
Module Quizzes
● There is one quiz for each module.
● The quizzes are in D2L/Brightspace
● Each module includes reading one or two chapters in
the textbook. The quizzes cover the assigned reading
and the Module Slideshow.
● See the due dates in D2L. You can see upcoming due
dates by navigating to Materials->Calendar
36
Lab Assignments
● Each module has a lab assignment.
● Assignments will be graded in the class if you are in an in-
person or Zoom course.
● If your lab is not graded in class or you are in an online
section, then upload it to D2L/Brightspace for grading.
● Deadlines for the lab assignments are Sunday at 10pm
37
Homework Pattern
There are 14 modules in the course. Each module
contains the following work:
1. Read the assigned chapter(s). If you are in an in person or Zoom course,
read the chapters before class so you can take the quiz in class.
2. Study the slideshow. (If you are in a Zoom or online section, we will do
this together in class.)
3. Take the Module quiz before the deadline in D2L
4. Complete the lab before the deadline in D2L. (If you are in the Zoom or
in-person class, we will complete your lab work in class.)
38
Backup Your
Work
If you use a school
computer, your work may
not be there when you
come back.
Sometimes a computer or
storage device will fail.
Make backups.
39
Where are we going?
40
You'll be surprised…
…that by Module 4, you will be able to
make a professional-looking website.
The first few weeks may seem tedious
and challenging, but by the end of
Module 4, we are able to make a very
nice website.
See the next slides to get an idea of
what we will learn in Chapters 1-4.
You will be surprised how quickly you
will be able to make a nice website.
41
Module 2 → Module 3 → Module 4
In Module 2, we only use HTML. The website
we make looks a bit academic. We learn some
CSS in Module 3, and add colors and fonts. In
Module 4 we learn how to add images to
website.
While coding may seem
hard at first, by the fourth
module of class you will be
able to make a nice website!
43
[Link]
After class is over your access to D2L
will be gone. [Link] is a
website that allows you to access class
resources indefinitely.
[Link] is where I keep
all of the school resources, except those
from the textbook.
Need help? Go to [Link]
to make an appointment. (See the link
in the upper right corner.)
44
Languages Used for Web Development
45
What languages will be learning?
HTML “marks up” the text so that
the browser knows how to display it.
CSS is used in combination with CSS
HTML to make websites beautiful.
JavaScript adds interactivity HTML JavaScript
HTML, CSS and JavaScript are the three
languages that are used by browsers. Other
languages are used to make websites, like PHP, Websites
but they are compiled to HTML, CSS and
JavaScript.
46
Is this a programming class?
●HTML and CSS are markup
languages CSS
●HTML and CSS are not
programming languages HTML JavaScript
●JavaScript is a programming
language, and we will use some
JavaScript frameworks and Websites
study JavaScript in Module 10
All languages are "coding" or "developing"
47
Chrome Developer Tools
48
Embedded Videos
● Throughout the slideshows you will find
embedded videos.
● If you are in the online class, do not skip
over the videos. The videos show you what
you need to know how to do do complete
the class labs.
● Take the time to practice what is
demonstrated in the video.
● If you find yourself struggling with the lab,
come back and watch the videos again.
The videos are very short.
Most are around 3 minutes.
49
Demo: Use Chrome Developer Tools
to Change Elements
Click the PLAY button
50
Demo: Chrome Developer Tools to See
Mobile Layout
Click the PLAY button
51
Exercise: Chrome Inspector
● Download Chrome if you don't have it
● Go to your favorite website
● Open the Inspector
● Make some changes
● Turn on the mobile view and see what the
website looks like on mobile.
52
Let's Start Coding!
53
What is HTML Markup?
HTML Markup looks like this:
<p>This is a paragraph.</p>
<h1>This is the largest heading.</h1>
<h6>This is the smallest heading.</h6>
<b>This is bold text</b>
1. Find the < and > keys on your keyboard, aka. Angle
brackets
2. Find the forward slash / on your keyboard
54
HTML Tags
HTML tags use the left and right angle bracket. The text
goes in between the tags.
55
Paragraph Tags
To make a paragraph in HTML, simply put the paragraph tags around
the paragraph. It looks like this:
<p>This is a paragraph in the HTML language.</p>
56
Heading tags
Heading tags are used at the top of the page and to subheadings for
major sections. <h1> is typically used once at the top of the page.
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
57
Paragraph and Bold Tags
<p>This is a simple paragraph. When I want to
make something bold I add the <b>bold</b> tags
around it. </p>
58
Horizontal Rule
The horizontal rule tag is <hr>. It is a self-closing tag,
which means that you don't have to close it with </hr>
like the other tags we have learned so far.
The horizontal rule is an easy way to make a divider on a
page.
59
Bulleted List
This is how you mark up a bulleted list:
<p>What is your Hogwarts House?</p>
<ul>
<li>Gryffindor</li>
<li>Hufflepuff</li>
<li>Slytherin</li>
<li>Ravenclaw</li>
</ul>
Note that the <ul> opening and closing tags
go around the entire list, and <li> tags go
around each item in the list.
60
Demo: Make a Website
Click the PLAY button
61
Exercise: Make a Website
• Go to [Link]
• In the HTML section type (or cut and paste) each statement, then click
the run button
<h1>Minnesota Summers</h1>
<h2>An article about the beauty of the lakes</h2>
<p> The state's nickname, the "Land of 10,000 Lakes", is apt, as there are 11,842
Minnesota lakes over 10 acres in size. The Minnesota portion of Lake Superior is
the largest at 962,700 acres and deepest body of water in the state. Minnesota has
6,564 natural rivers and streams that cumulatively flow for 69,000 miles
Approximately 10.6 million acres of wetlands are contained within Minnesota's
borders, the most of any state except Alaska. </p>
<hr>
<small>Wikipedia: [Link]
62
Limitations JSFiddle
JSFiddle is a handy tool for trying something new.
However, it will not work for your class homework.
We'll cover the workflow for web development next.
63
Text Editors and Workflow
64
What is a text editor?
● A text editor is a program used for editing plain text files.
● A word processor (Pages, Word) is not a text editor. They
add markup you cannot see.
65
Download a text editor
● Text editors to consider: Notepad ++, Sublime Text, Atom, and Brackets
○ Sublime Text for Mac or PC (I'll use this one for class demonstrations)
○ Notepad ++ for PC (On the Computer Science Dept computers)
○ Atom by Github
○ Brackets
● If you don't have a preference, then choose Sublime Text. I use Sublime
Text for the class videos.
● Feel free to use another text editor you are using for another
programming course.
● Do not use TextEdit (Mac) or NotePad (without the ++). These will not
work for coding.
If you are using a school computer, then use Notepad ++.
66
Download a Text Editor
Go back a page and download a
text editor right now if you don't
have one. You will need a text
editor for the lab assignment.
67
Workflow
Make Check
changes in Check
text editor. browser
Repair
Save.
68
Editing and Viewing
Unlike other software you use,
when you make websites you
edit the file in a text editor, and
you view the same file in a
browser.
Because you are using two
different programs in the
workflow, it works best to have
both screens open at the same
time.
69
The Work Flow
70
Demo: Workflow
Click the PLAY button
71
That’s the workflow!
72
Take the Quiz!
After you study this slideshow and read Chapter 1, take the quiz.
The quizzes are all open book with no time limit. You can look up the answers
from the textbook and slideshow as you take the test.
For in-person and Zoom classes, we'll take the quizzes in class right after we
finish going through the slideshow.
You can find the quiz in D2L:
D2L->Materials->Content-Modules->Module 1
Note: If you haven't read the chapter yet, read the chapter before taking the quiz.
73
Lab 1: Resume Markup
● In the lab for module 1, we are going to
practice adding HTML to your resume.
● If you don't have a resume, you need
one.
○ As a college student, you are working
towards a professional job. You will
absolutely need one for job
applications.
○ Use this lab assignment to start your
resume. There is a sample resume to
get you started.
Add HTML Markup to Resume Lab
74
Wrap Up
● Read Chapter 1 if you haven't already (D2L->Content-
>Textbook)
● Do the Module 1 quiz on D2L/Brightspace by Sunday at
10pm. (D2L->Materials->Content-Modules->Module 1)
● Complete the resume lab before Sunday at 10pm.
Lab Instructions
75
