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.

Related Articles

• 10 Reasons Why You Should Study Web Development
• Careers in Web Design
• What Should I Study After HTML and CSS?

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 “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:

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.

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:

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
  • Sublime Text for Mac or PC (I’ll use this one for class demonstrations)
  • Notepad ++ for PC
  • 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.

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

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:

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