Lesson 6 - Development Workflow
LEARN
Today's Agenda
- Development Tools (Visual Studio, Git, Firefox)
- Development Workflow
- Basic HTML web pages
- Project 2
Daily Reading
- Read 1.6 Introduction to CSS
- Follow Reading Schedule
Web Servers and Web Browsers
- Web clients make HTTP Requests - phone, and laptop
- Web servers create HTTP Responses - your Github Pages site
Install Dev Tools
- Visual Studio Code
- Git
- Mac Users install Git for Mac
- Run installer and accept all defaults
- Firefox
Clone Your Repo
- Make a copy of your repo on your local computer
- Default location is "Documents/Github/YOUR-NAME.github.io"
- Only one copy of code
Visual Studio and Git
- Restart Visual Studio to enable git after installing Git tool
Configuring Git
- If you get an error when committing code
- Tools menu, Terminal, New Terminal
- git config --global user.name "Your Name"
- git config --global user.email you@example.com
- Retry git operation and enable all permissions
Building Web Pages
- Edit files locally
- Test files locally
- Send files to server
- Test files remotely
HTML Template
- HTML Doctype
- HTML root element
- HTML head & body
- HTML body
- HTML Head
Basic HTML Elements
- h1, h2, h3 - Headlines
- p - Paragraph breaks
- a - Anchor (hyperlinks)
- img - Image
- ul, li - Bullet List
HTML Template
- !DOCTYPE html
- html
- head
- body
HTML Doctype
- Start with a document type tag that tells that this is an HTML file.
- <!DOCTYPE html>
HTML root element
- The top level element in HTML is <html>.
- Add both the open and close.
HTML head & body
- Add the head and body elements
- Add both the open and close tags for all elements
- head holds invisible settings for the page
- body holds the visible content for the page
- Page Template
HTML body
- Add some content to the body.
- Add a headline h1 and a paragraph with p
<h1>Simple HTML Page</h1>
<p>This demo shows how to create a page that contains a single headline and two paragraphs of text.</p>
<p>HTML is not really that hard. There are just a lot of details.</p>
HTML Head
Within the head we will define the invisible settings that the browser will read.
These settings must be defined
- characters that are used within the page
- size of the display area
- title used for the browser tab label and bookmarks
We will add more items later. For now we have
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page Title</title>
</head>
All together now!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>BACS 200 - Simple Page</title>
</head>
<body>
<h1>Simple HTML Page</h1>
<p>This demo shows how to create a page that contains a single headline and two paragraphs of text.</p>
<p>HTML is not really that hard. There are just a lot of details.</p>
</body>
</html>
- View source code and study it
BUILD
Build Home Page
- Create page "bacs200/index.html"
- Customize this page for you
- Sample Home Page
Page Template
- Code to build new pages
- Sample Page Template
- Customize with your content
Build Profile Page
- Create page "bacs200/profile.html"
- Sample Profile Page
- Customize this page for you
Build Inspire Page
- Create page "bacs200/inspire.html"
- Add text from Sample of Project 2
- Write an article on your hero
- Include a link to an online image
Your Web Pages
- bacs200/index.html
- bacs200/inspire.html
- bacs200/profile.html
- bacs200/template.html
Project 2
- Finish Project 2
- Follow Project Instructions
- Test your page using the Page Tester
Page Tester
- Uses your server
- Visit your web page
- Looks on the page for specific text
Page Tester Test Cases
- Project 1 Test Cases
- Visit Website "index.html", Find "Home Page"
- Visit Github Repo "index.html"
- Project 2 Test Cases
- Visit Website "bacs200/index.html", Find "BACS 200 Class Content"
- Visit Website "bacs200/inspire.html", Find "Inspire Me"