Module 1:

Introduction to Web Development

Materials

Assigned Reading Chapter 1 of Web Development and Design Foundations
Slideshow Introduction to Web Development
Lab HTML Resume
Optional Reading
  1. Why I Love Coding
  2. 10 Reasons To Study Web Development
  3. Careers in Web Design
  4. What Should I Study After HTML and CSS?

What's covered in this module

In this Module

Note to CSCI1450 students at Saint Paul College: The content you see here is similar to what is in the Module 1 slideshow, but does not include all of the class specific information about due dates and how to use D2L. It is better to use the slideshow. However, if you are looking for a slightly different explanation, you may find it here.

Susan Metoxen

Why Study Web Development?

Web development is in-demand skill. As a Web Developer, you can have a career that pays well and at the same time do work that is meaningful and challenging.  This is Module 1 of a course that will teach you the languages you need to know as a Web Developer, including HTML, CSS, and some JavaScript.

Web development work has job opportunities, is meaningful, and challenging.

Related Articles

What skills will we be learning in this course?

Here is some language you will be able to add to your resume when you finish this course:

  • Education: Front-end developer course work in HTML, CSS and some JavaScript/jQuery
  • Skills: HTML, CSS, Bootstrap, Responsive Design and some JavaScript/jQuery
  • Experience: Created a responsive website in native HTML and CSS at MyCoolWebsite.com

It doesn’t take long…

While it may seem like coding is difficult, by the end of the fourth week of class we will be able to make websites that look quite professional.

In Module 2 (Chapter 2) we learn about HTML. In Module 3 (Chapter 3) we add CSS and add some color to the website. In Module 4 (Chapter 4) we add images and the website looks professional. Even though coding may feel challenging at first, by the end of four weeks you will see some real progress!

What languages will we be learning?

HTML, CSS and JavaScript are the three web languages.
  • HTML “marks up” the text so that the browser knows how to display it. 
  • CSS is used in combination with HTML to make websites beautiful.
  • JavaScript adds interactivity

HTML, CSS and JavaScript are the three languages that are used by browsers. Other languages are used to make websites, like PHP, but they are compiled to HTML, CSS and JavaScript.

Programming vs. Developing

  • HTML and CSS are markup languages
  • They are not programming languages
  • JavaScript is a programming language, and we will use some JavaScript frameworks and study JavaScript in Chapter 14

All languages are “coding” or “developing”.

Introducing Chrome Developer Tools

This video demonstrates how to use Chrome Developer Tools and gives a simple example of how you can edit CSS.

This video demonstrates how to use Chrome Developer Tools to view a website on various mobile devices.

The Chrome Developer Tools are a key resource that you will use as a Web Developer and problem solving for this course.

Exercise: Chrome Browser

  • 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. 

Simple HTML Markup

Let’s dive right into coding!

While we will focus on learning HTML in Module 2, here is some simple HTML markup to give you an idea about what is coming. In this module we are only going to learn enough HTML to do the lab assignment.

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>

Take a moment to find the angle brackets and the forward slash on your keyboard. The HTML tags look like this:

Opening and closing HTML tags

The difference between the opening and closing tag is that there is a forward slash in the closing tag. You use the opening tag at the beginning of the text you want to mark up, and the closing tag at the end of it.

Heading Tags

There are six heading tags in HTML. In most web pages, you use one <h1> tag for the name of the page, and then at least a couple <h2> headings for subheadings. While the heading you choose changes the default font-size, the key to using heading is to use them to show the page organization, like in an outline.

HTML Heading Tags and the resulting text. h1 is the largest size and H6 is the smallest
HTML Heading tags and the resulting text.

In some of our lab assignments, we use the <h1> tag as the brand name (like a logo), in which case we use one <h2> for the title of the page, and <h3> for the sub headings.

On most websites, the <h4>, <h5> and <h6> tags are rarely used.

Paragraph and Bold Tags

Here are some simple tags you will use frequently:

<p> Use the <p></p> tags around a paragraph.

<b> Use the <b></b> tags around text you want to make bold.

<hr> Use the <hr> tag to draw a horizontal line. <hr> is a special type of tag called a self-closing tag. <hr> tags are a tool you can use to do a bit of decoration on your lab assignment.

<p>This is a simple paragraph. When I want to make something bold I add the <b>bold</b> tags around it. </p>

Let’s Make a Simple Web Page!

This video demonstrates how to use JSFiddle to make a simple web page.

Take a few minutes to try this out yourself on JSFiddle.

  • Go to JSFiddle.net
  • In the HTML section type the code below, then click the run button in JSFiddle
<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: https://en.wikipedia.org/wiki/Minnesota</small>

When you complete this exercise, you page should look something like this:

What a simple website looks like in JSFiddle with HTML only.

The upper left section in black is where you type the HTML, and after you click the Run button you can see the result of your HTML in the lower right corner. In Module 3 we will start to add CSS to the top right section, and in Module 10 we will add some Javascript to the lower left section.

Using a Text Editor and Setting Up Your Workspace

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.

Download a Text Editor

  • Text editors to consider: Notepad ++, Sublime Text, Atom, and 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.

The reason you can’t use TextEdit or NotePad (without the ++) is because they were designed for consumers, not for coding. For example, TextEdit or NotePad may change straight quotes into curly quotes, and in coding curly quotes do not work.

The Work Flow

Make changes in the text editor. Save your work. Check the results in a Browser.
The Work Flow Uses a Text Editor and a Browser

This video demonstrates how to set up your desktop for coding, using Sublime Text as the text editor and Chrome Browser to view the result.

Your desktop should look like this while you are working:

The text editor is on the left side of your screen and the browser on the right side.

With Sublime Text, you should open up the entire folder so you can see the folders and files in the left panel.

Exercise: Work Flow

Now it is time for you to try it.

1. Open your text editor. Set up your text editor on the left and the Chrome browser on the right. 

2. Create a new file called, index.html. Save the file.

3. Type a sentence

eg. “Never do anything that you wouldn’t want to explain to the paramedics.”

4. Check in a browser

5. Add <p> tags Check in a browser

6. Change the <p> tags to <h1> tags Check in a browser

And that’s the work flow we will use for class!

Note: In Module 1, we cover a barebones exposure to how HTML works. Web pages have a lot more code in them, and we will start to learn that other code in Chapter 2. The resume lab will need some retro-fitting if you choose to use it in your final project.

Wrapping Up

Now that you know a bit of HTML you are ready to do the Lab Assignment for this week. The lab assignment is to add mark up to your resume. Don’t worry if you don’t have a resume. There is a sample resume that you can use and perhaps can help you start your own resume. Web developers are professionals and so you will need a solid resume.

Lab 1: Marking Up a Resume

Frequently Asked Questions

Why do you use Sublime Text for the examples?

Sublime Text is a great text editor and it works well on both Macs and Windows. Where I teach in person, Saint Paul College, the classroom computers have Notepad++ and I there are a couple features missing in Notepad++ that I love in Sublime Text. In Sublime Text its easier to open up the file in a browser with a simple right click. Also in Sublime Text, there is a way to look at the folders and files while you are working. Any text editor is fine for this course, except for Notepad (not ++) and TextEdit on a Mac.

Should I purchase Sublime Text?

It is always nice to support the developer. After all, if you are taking this class, you may one day be a developer. Even so, I thought the price was a bit steep at $99 per year so I use the free version. In my day-to-day work as a web developer, I use Dreamweaver, which I pay for through Adobe. Depending on what direction you go in your career and where you end up working will dictate what text editor you use most often in your career.

Modules

Final Project Websites


Additional Presentations


Bootstrap Starter Pack

This is a starter pack of Bootstrap HTML file using Bootstrap navigation. It includes a page with columns, a photo gallery (with modal pop-up) that automatically adjusts the number of images in a column based on the width of the screen, a slider, and responsive embedded video using Bootstrap.

Download Bootstrap 4 Template