Introduction to Web Development
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?
- 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:
- 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.
Programming vs. Developing
- HTML and CSS are markup languages
- They are not programming languages
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.
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:
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
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.
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.
Frequently Asked Questions
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.
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.
Final Project Websites
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.