Assignment Sheet
Web Page Development CGS2820C
Spring 2024. CRN 21498 (See Canvas for routine Syllabus and SCF policies)
This is a live, interactive document. Do not print, because it will be updated as links change. Always view the most recent copy of your web pages. Refresh on Every Visit. I suggest you bookmark this page.
Click here for 30 Second Welcome YouTube Video from Professor Floyd Jay Winters
CGS2820C is a 3-credit A.S. course.
Course Performance Requirements:
Click CGS2820C Performance Objectives.pdf
Professor: Floyd Jay Winters, Ed.S.,
CIW (Certified Internet Web Assoc.), ACA (Adobe Certified Dreamweaver CS5)
Class Room: Live online using Microsoft Teams
each Monday 7:00-8:50PM
Best Office Hours: Immediately after online Teams class or as needed
Email: WinterF@SCF.edu. All course communication should be through Canvas email.
Course Description:
CGS 2820C, web page Development will give students the skills to build web pages in
HTMLHTML
Html is an acronym for HyperText Markup Language. It is the language that web pages are written in. This language consists of Tags – which are basically commands enclosed in angle brackets (< >). Most tags are turned on and then turned back off (by placing / in front of the tag).
For instance:
To turn on html enter: <html>
To turn off html enter: </html>
To turn on the page body enter: <body>
To turn off the page body enter: </body>
with a
Cascading Style SheetCascading Style Sheet (CSS)
A Cascading Style Sheet separates the document content (text and images) from the document presentation (colors, fonts, and layout). A CSS document is a separate page that is not visible to the person viewing the web page. Whereas HTML pages often have a .htm file extension, CSS documents have a .css extension.
One CSS page is typically linked to the entire site to give a consistent look and feel. Thus, changing one single line in the CSS, such as the background color, will change the background color for the entire site., a
NavigationNAVIGATION
Navigation is basically your web page menu of links to other pages on your site. For instance the horizontal navigation bar for a website developed for this class will probably have links to the Home page, Resume, Portfolio Page, and Contact page.
bar, multimedia (audio, video, social media), forms, and an introduction to
JavaScriptJAVASCRIPT
JavaScript is a client-side scripting language which can give web pages user interactivity; it has a similar look to Java programming and CSS. JavaScript can allow Interactivity such as: displaying Pop-up messages, allowing image rollovers, changing the cursor appearance, performing calculations, and implementing form Validation…. Dynamic HTML
is introduced to make interactive web pages. All students will have a live portfolio website before the end of class.
We will use
NotepadNOTEPAD
Notepad is a free "Text Editor" that comes with Microsoft Windows. It is commonly used by both professionals and beginners alike to make quick web page edits in HTML (HyperText Markup Language - the language of web pages).
Unlike a word processor, Notepad does not add extra code for things like tab and margin settings, paragraph formating, or printer definitions. Notepad does not allow you to set fonts or colors or even bold. Consequently, Notepad files are very small.
You can open Notepad by clicking the Windows Start button and typing Notepad.
for the first 1 or 2 weeks. p29 Duckett
See Your First Webpage in Notepad video (5:11)
We will use Visual Studio Code for most of the course - available for PCs and MACs
See Create A Website In VSCode In Less Than A Minute! (Using Emmet)
You may also be able to download a 30 day trial version of Dreamweaver for the last part of class.
FREE TEXT book: HTML & CSS: Design and Build Websites
by Duckett, PDF download.
(Optional hardcopy on Amazon (amazon.com/HTML-CSS-Design-Build-Websites) for $17.99.)
Your professor has also gone to great lengths to build and assemble extensive and free online text and video resources for you in place of purchasing a required textbook. There are links to these free eBooks and tutorials at the top of this syllabus. These free resources will save you a considerable amount of money. However, each student is required to buy a
Domain NameDOMAIN NAME
A Domain Name is an organization, business or personal name on the Internet such as:
BillSmithOnline.com or BillSmith.net or BillSmith.org
or BillSmith.info or BillSmith.biz
Your full Domain name is your Web address. A domain name consists of several parts. The letters www. before the domain name mean that what follows describes the location of a site on the World Wide Web. The last two or three letters of a Web address are known as its top-level domain: .com, .gov, .edu, .net, .org, .biz, .info, .uk ...
(cost between $1.99 and $12.00) and purchase
HostingHOSTING
Hosting is when a company which owns Web servers will host or allow individuals to store their web pages on the company Web servers for a fee, usually $4.00 or $5.00 a month. Typically, you pay less per month, if you purchase a year or two years of hosting up front.
An example of a company that will register your domain name, give you an email account associated with your domain name, and host your website is GoDaddy.com.
on a
Web ServerWEB SERVER
A Web Server is a combination of hardware (computers and storage devices) and software used to store and deliver web content that can be accessed online. As an example, a web server is used to host or store and deliver the content for the SCF website at http://scf.edu.
for at least 4 months (cost about $5.00 per month.) Total costs for four months may be less than $29; however, I recommend you pay for a full year's hosting up front for just a little more. These fees are far less than half the cost of a book. Purchasing domains and hosting plans will be covered in class.
Your professor cannot grade assignments that are not online after the third assignment. This college class is called Web Development, NOT Desktop Development. After the first few assignments, you are required to submit a URL/Web address to the dropbox so I can grade your project as a real online webpage with linked images and stylesheets. A professor cannot open your stylesheet, and the numerous images and all your linked assignment pages on your desktop. Additionally, it is impractical to send all these linked pages, images and other files to a dropbox.
You can buy a .info domain at www.GoDaddy.com for as little as $1.99. It is better to buy a .com, .net, or .org for a little more money. Almost all my CGS2820 students use GoDaddy, which is highly recommended due to cost, and most importantly the support, because if you need help you can ask your classmates, your professor, and the excellent 24/7 GoDaddy phone support can be invaluable.
Ask GoDaddy (1-480-463-8389) for:1. Domain Name, (It should be easy to say, easy to spell; try to include key words.)
2. Hosting for 6 months to 2 years (the longer the term, the cheaper the rate),
3. Economy package,
4. A Linux server,
5. Make sure your hosting includes the cPanel
A. Do a web search for GoDaddy Coupons. The cost for a domain and 6 months of hosting should be less than $39.
B. Do NOT get a Website Builder or an "Instant" website or any other template or code generator. You will be building your own website from scratch, creating your own code using only Notepad or Visual Studio Code.
C. Once you set up a hosting account, make sure you know both your GoDaddy ID and password as well as your domain cPanel/FTP UserNameUSERNAME
A UserName is a unique alphanumeric identifier used to grant a person access to a computer or an account.
For example: WintersF and Password.PASSWORD
For added security be sure to use Strong Passwords which must be at least 8-characters long, contain at least one upper and lowercase character, one digit, and one punctuation character.
For example: Hard2Cr@k A hosting customer may own multiple domains. Consequently, many hosting companies, such as GoDaddy, issue a hosting Account number (or login name) and password for your account. But there is ALSO a separate UserName and Password to use when you FTP or upload files to your domain. GoDaddy Account logins and domain FTP logins are different.
D. See GoDaddyFileManagerAndFTP.pdf for ways to upload files.
GoDaddy File Manager: https://youtu.be/0y43hMrKsDw (3:20) upload to public_html
My Products > Hosting > Manage > [cPanel] > File Manager > public_html > Upload
FileZilla is a great drag and drop
application to
FTPFTP
FTP is an acronym for File Transfer Protocol, which allows a Webweaver to upload their files to the remote server or host. NppFTP (an add-on to Notepad++) is an example of another free and easy FTP client. However, most web page editors, such as Dreamweaver or Expression Web include an FTP client under the Site menu option.
(File Transfer Protocol)
or upload your files to your server. This free popular program will remember your UserName, Password and the local and remote folder locations.
A. Downloading FileZilla FTP client: https://filezilla-project.org/download.php
B. Configuring files with FileZilla: https://youtu.be/Jo-9l3ceo1I (1:55)
C. Uploading files with FileZilla: https://youtu.be/y-_BPfKclh8 (1:34) (use Ctrl to select multiple files)
To
FTPFTP
FTP is an acronym for File Transfer Protocol, which allows a Webweaver to upload their files to the remote server or host. NppFTP (an add-on to Notepad++) is an example of a free and easy FTP client. However, most web page editors, such as Dreamweaver or Expression Web include an FTP client under the Site menu option.
or publish a website using Expression Web see (or Dreamweaver), click below:
0ClassFolders/2820Web/ExpressionSiteDemo/Setup.htm
| In the end, the ROOT folder of your actual local and remote website should look like: | |
| images [Dir] | This is a subFolder - All images go here |
| contact.htm | |
| favicon.ico | This is often in the images folder |
| index.htm | Your Home page (usually must be in lower case) |
| js.htm | JavaScript library demo |
| media.htm | Media library demo |
| newsletter.htm | |
| portfolio.htm | Your artwork, or books, or items for sale... |
| resume.htm | |
| transcript.htm | Your Transcript using unordered and ordered lists |
| FormProcess.php | Php Script used to process forms |
| yourSiteName.css | Your external stylesheet |
| ExternalJavaScript.js | An external JavaScript file |
Grade Scale:
A 90-100% |
B 80-89% |
C 70-79% |
D 60-69%
Class Assignments: 100 points each. (2
extra Credit Assignment: JS & PHP)
Canvas Quizzes: Ten 10-point, 10-question
quizzes worth a total of 100 points
Hands-on Final Exam: 400 points.
Make-up Quizzes, Tests, Exams will NOT be given
For extra credit there is a Canvas Photo assignment, an online Office and
Windows Shortcut quiz, an online Windows Quiz, and a extra credit JavaScript and PHP assignment.
To see your grades in Canvas click on the Grades link on the left side of the Canvas screen.
Late Assignments Policy: Three points will be deducted for each day an assignment is late for the first 3 weeks, and 1 point will deducted for each day late thereafter.
1. It is not hard to get a 100 on almost all assignments - just check to make sure you satisfy all of the grading criteria, which can be found by clicking on the assignment links on the left navigation bar.
2. If you have questions, feel free to visit me after each online class.
Helpful Links:
Department web page:
scf.edu/Academics/BusinessTechnology/computer_science/
Online Learning:
scf.edu/Academics/OnlineLearning/
Technical Assistance:
helpdesk@scf.edu or call SCF at 941.752.5357 or
contact the Online Academic Services Help Desk 24/7 Toll
free: 866.506.1188
Student Responsibility: All assignments should be uploaded to the instructor through the Canvas email online learning software platform by the due dates provided in the assignment schedule shown on this Assignment Sheet. Additional questions and correspondence should be submitted to the instructor through Canvas email. Proofread, Spell-check, professionally write, and include a meaningful Subject line for all email. Label all assignment email with the assignment name in the Subject line, such as Resume Assignment and your issue. The instructor will answer all correspondence within 48 hours.
Standards of Conduct, Withdrawal Policy, Statement of Plagiarism (copying another student's work will result in a zero for both students), Disability Resource Center Information, and Covid 19 information policies are available through the Syllabus link in your Canvas course.