Course Guide 

COMPUTER EDUCATION 2 
CompEd2_3T_2017‐2018 

Introduction to Web Design and Publishing 

University of the Philippines Open University 

Third Trimester AY 2017‐2018 

 
 
 
Faculty in‐Charge 
Ling McDermott 
linglingay.padolina‐mcdermott@upou.edu.ph 
comped2@upou.edu.ph 
 
 
 
 
 

 
 

Course Description 
CompEd2 is an introductory course on website creation and publishing. It introduces the student to the 
underlying technologies of the web and the principles behind the creation of a website. It is a “lab” 
course where students are expected to code HTML and CSS the entire semester. There will be no 
required face‐to‐face sessions for this course. 

Course Objectives 
By the end of this course, students will be able to: 

1. Conceptualize web pages using appropriate design and structural elements, 
2. Create web pages based on a thorough understanding of HTML and CSS and other web 
authoring tools, and 
3. Publish web pages. 

Course Materials 
The main resources for the course are: 

1. Codecademy – http://codecademy.com 
2. W3Schools Online Web Tutorials – http://www.w3schools.com/html/default.asp 
3. Khan Academy HTML and CSS courses ‐ https://www.khanacademy.org/computing/computer‐
programming/html‐css 
4. BitBalloon – http://www.bitballoon.com 
5. Kompozer ‐ http://www.kompozer.net/ 
Note: You may use any web authoring tool available. 
 

Recommended reading: 

      Web Style Guide, 3rd Edition –  http://www.webstyleguide.com/wsg3/index.html 

Instead of simply coding html and css in Notepad or editors, you will apply what you have read in 
W3Schools directly in Codecademy through its courses. At the end of this course, you will develop a full‐
blown website and use BitBalloon to publish it.  It is strongly advised that you plan and conceptualize 
your final website early on. By having a clear plan in mind, you can slowly build your site as you go 
through all the HTML and CSS exercises. You will also be given plenty of time to build your website 
towards the end of this course. You are expected to submit AND publish a full website at the end of the 
semester. Specific details of which will be uploaded in a separate document. 

 
Study Schedule 

Week  Module  Activity 

May 12 – 18   Getting to know W3Schools and  You will be given an account on 
Codecademy  Codecademy. Familiarize 
  yourself on how  
Intro to the Web  Codecademy works.  
   
W3Schools – HTML5  Read Intro to the Web and HTML 
HTML5 Intro  5 and CSS introductions. 
HTML5 Support   
HTML5 New Elements  Plan and conceptualize the  
HTML5 Semantics  nature/topic of your final  
HTML5 Migration  website. 
HTML5 Style Guide   
 
A Brief History of CSS 
 
May 19 – 25  Khan Academy Video  Do Exercises on Introduction to 
HTML Basics  HTML and read external 
  resource on Codecademy. 
Codecademy    
Exercise: Introduction to HTML  Read about Basic HTML on 
Read: Create and View a Web  W3Schools. 
Page on Your Computer URL   
  Practice writing code through  
W3Schools – BASIC HTML  Notepad or Kompozer. 
HTML HOME   
HTML Introduction 
HTML Basic 
HTML Elements 
HTML Attributes 
HTML Headings 
HTML Paragraphs 
HTML Links 
HTML Images 
 
May 26 – June 1   Khan Academy  Do Exercises on Codecademy. 
HTML: Text Emphasis   
HTML: Lists  Read about Basic HTML on 
HTML Links  W3Schools. 
HTML: Images   
   Practice writing code through  
  Notepad or Kompozer. 
Codecademy    
Exercise: HTML Document 
Standards 
 
W3Schools – BASIC HTML 
HTML Lists 
HTML Formatting 
HTML Colors 
HTML Colornames 
HTML Colorvalues 
 
June 2 – 8   Khan Academy  Do Exercises and read external 
CSS Basics  resource on Codecademy. 
Other ways to embed CSS   
CSS: Selecting by ID  Read about Basic CSS on 
CSS: Selecting by Class  W3Schools. 
   
Codecademy   Practice writing code through  
Exercise: CSS Set‐up and  Notepad or Kompozer. 
Selectors   
Read: Classes vs. IDs  Submit Assignment 1. 
 
W3Schools – CSS 
CSS Home 
CSS Introduction 
CSS Syntax 
CSS How To 
CSS Selectors 
CSS ID and Class 
CSS Pseudo‐class 
Styling Links 
 
June 9 – 15   Let’s take a little breather from  Reflect on Usability 
the exercises. Read about   
Usability and do some self‐ Answer the Quiz 
assessment.   
  Start conceptualizing your Final 
  Project. 
 
 
June 16 – 22   Khan Academy Videos  Do Exercises on Codecademy. 
CSS Zen Garden   
CSS Font‐Family Property  Read about CSS on W3Schools. 
CSS font styles and shorthand   
More CSS text properties  Practice writing code through  
  Notepad or Kompozer. 
Codecademy    
Exercise: CSS Visual Rules 
 
W3Schools – CSS Styling 
Styling Backgrounds 
Styling Text 
Styling Fonts 
Styling Lists 
Styling Tables 
 
 
June 23 – 29   Khan Academy  Do Exercises on Codecademy. 
CSS Layout   
  Read about CSS on W3Schools. 
Codecademy    
Exercise: CSS The Box Model  Practice writing code through  
Exercise: Display and Positioning  Notepad or Kompozer. 
   
W3Schools – CSS BOX MODEL 
CSS Box Model 
CSS Border 
CSS Outline 
CSS Margin 
CSS Padding 
 
W3Schools – CSS ADVANCED 
CSS Positioning 
CSS Floating 
CSS Align 
 
 
June 30 – July 6  Khan Academy  Do Exercises on Codecademy. 
HTML Tables   
  Read about CSS on W3Schools. 
Codecademy    
Exercise: HTML: Tables  Practice writing code through  
 Exercise: Learn CSS: Colors  Notepad or Kompozer. 
Exercise: Learn CSS: Typography   
Exercise: Learn CSS: Grid  Submit Assignment 2. 
 
W3Schools – BASIC HTML 
HTML Tables 
HTML Forms 
HTML Frames 
 
HTML MEDIA 
HTML Media 
HTML Audio 
HTML Object 
HTML Video 
 
July 7 – 13   Multiple Pages Tutorial  Work on the Multiple Pages 
  Tutorial. 
Khan Academy   
Internal Linking  Do the CSS and Multiple Pages 
  quiz. 
 
Start creating your website. 
 
July 14 – 20   Final Project  Continue working on your final  
  project. 
Quiz #3   
  Answer the Quiz 
 
July 21  Final Project  Final Project Deadline  
 
 
 

Summary of Due Dates 

Assignment 1: June 9, 2018 

Quiz 1: June 16, 2018 

Assignment 2: July 7, 2018 

CSS and Multiple Pages quiz (Quiz 2): July 14, 2018 

Quiz 3: July 21, 2018 
Final Project : July 21, 2018 

Assignments 

There will be two assignments for this course. These assignments will require you to code basic HTML 
and CSS to make simple webpages. Guidelines for assignments will be posted on the course site. 

Final Project 
Online Resumé/Portfolio. To help you build a professional presence on the Internet, you will create your 
online resume as your final project.  

Course Requirements 

1. Account in Codecademy and BitBalloon. Your Codecademy account will be given to you.  

2. Quizzes, general and timely participation and activeness during the course 

3. Submission of 2 Assignments – Assignment Guide will be uploaded separately. 

4. 1 Final Project – Final Project Guide will be uploaded separately. 

 
Grading 
Your grade will be computed this way: 
Assignments     25% 
Quizzes      25% 
Codecademy Exercises   20% 
Final Project     30% 
Total       100% 
 
Your grades will be computed based on your performance and what you have submitted by the end of 
the semester. Assignment deadlines will be strictly implemented. Assignment bins will close once the 
deadline is finished.  
 
Submit your assignment on or before the due date. A deduction of 2 points from the actual score for 
each calendar day that each assignment is submitted after its due date, will be applied.  
 

Important Reminders 

1. All emails in this course should be sent to comped2@upou.edu.ph. Please CC me (linglingay.padolina‐
mcdermott@upou.edu.ph) in all emails. 

2. Assignments. Discipline yourself to submit all your assignments on time. Deadlines will be strictly 
implemented. Because the term is short (10 weeks), it would be best to adhere to the schedule of 
course activities outlined above. Read in advance. Try to anticipate possible conflicts between your 
personal schedule and the course schedule, and make the appropriate adjustments. For example, if you 
will be travelling within the term, prepare in advance any assignment that may be due within the period 
of your travel. Observe deadlines. Inform the FIC in advance about any unavoidable delays or 
“absences” or “silences” of more than a week’s duration. 

3. Do not submit your assignments thru email unless your FIC/tutors say so. All assignments should be 
uploaded to the Moodle course site. It is easier to track submissions in Moodle. 

4. Log‐in to Moodle as often as you can and check the course announcements, forums and other 
activities. 

5. In Moodle, edit your “Profile” so that your complete name will display in all of the Moodle pages 
properly. Be sure that the name you will enter is the name you used when you enrolled. Observe proper 
netiquette. 

6. In all your submissions, always include your name. 

7. Keep a copy of all your submissions in this course until you receive your final grade. 

8. Intellectual Honesty. Short and simple, don’t claim anything that isn’t yours. Don’t ask someone else 
to do your work for you and don’t do the homework of someone else. 

‐‐‐‐‐ GOOD LUCK ‐‐‐‐