Softpal side

Web Design Course outline

WEB DESIGN COURSE OUTLINE

This course is intended for students who have little or no knowledge of how the internet and the web work. The students will be giving a solid orientation to the web environment and how files and folders communicate in rendering web pages. This course will be concentrated on the requirements for building static and responsive websites: However, at the end of this course, students will be introduced to the concept of web application development.

 

Lesson 1. Orientation

  • 1.1 Syllabus Review – course content, resources and procedures
  • 1.2 Subscribe to course calendar and Google + community
  • ⚬ Designers Lounge: The Web Development Process

 

Lesson 2. Web File Management

  • 2.1 Files and Folders
  • 2.2 Downloading Web Pages
  • 2.3 Editing Code
  • 2.4 Zipping Folders

 

Lesson 3. HTML Tags

 

Lesson 4. HTML Attributes and Images

  • 4.1 Acquiring Images
  • ⚬ Tidbit: Copyright, Copywrong, Creative Commons ⚬
  • 4.2 Graphics File Formats
  • 4.3 Editing Images
  • 4.4 The img Tag
  • 4.5 Absolute Links
  • 4.6 Embedding Media
  • 4.7 Relative Links
  • 4.8 Validating Code
  • ⚬ Designers Lounge: HTML5

 

Lesson 5. CSS – Styling Tags

  • 5.1 CSS Basics, Colors and Inline Styles
  • 5.2 Inteternal Style Sheets and Basic Formatting
  • ⚬ Tidbit: CSS3 ⚬
  • 5.4 Common Properties
  • ⚬ Designers Lounge: Creating Effective Color Palettes

 

Lesson 6. CSS – Page Layout

  • 6.1 Classes IDs Divs Spans
  • 6.2 The Box
  • 6.3 Boxes in Boxes
  • ⚬ Designers Lounge: Whitespace and Paragraph Formatting ⚬
  • 6.4 Styling Page Divisions

 

Lesson 7. Nav Bars

  • ⚬ Designers Lounge: Google Chrome Developer Tools ⚬
  • 7.1 Adding a Navigation Bar
  • 7.2 Customizing a Navigation Bar

 

Lesson 8. Publishing Websites

  • 8.1 FTP and Web Servers
  • ⚬ Designers Lounge: Website Critique

 

Lesson 9. Designing with Sections

  • ⚬ Designers Lounge: Favicons ⚬
  • 9.1 Sections and Background Colors
  • 9.2 Background Images
  • 9.3 Adding a Navigation Bar
  • ⚬ Tidbit: Typography

 

Lesson 10. Javascript

  • 10.1 Adding a jQuery Animated Scrolling Effect
  • ⚬ Designers Lounge: Coding

 

Lesson 11. Front-end Frameworks

  • 12.1 Explore Bootstrap Elements
  • 12.2 Downloading Bootstrap
  • 12.3 Downloading a Bootstrap Example
  • ⚬ Tidbit: Bootstrap Themes and the Parallax Effect ⚬
  • 12.4 Reviewing the Example Code
  • 12.5 Replacing Page Content
  • 12.6 Customizing the Design
  • ⚬ Designers Lounge: Framework or CMS

 

Lesson 12. HTML Attributes and Images

  • 4.1 Acquiring Images
  • ⚬ Tidbit: Copyright, Copywrong, Creative Commons
  • 4.2 Graphics File Formats
  • 4.3 Editing Images
  • 4.4 The img Tag
  • 4.5 Absolute Links
  • 4.6 Embedding Media
  • 4.7 Relative Links
  • 4.8 Validating Code
  • ⚬ Designers Lounge: HTML5

 

Lesson 13. Content Management Systems

  • ⚬ Tidbit: Content Management Systems (CMS) ⚬
  • 13.1 Setting up WordPress
  • 13.2 Creating Posts
  • ⚬ Tidbit: CMS Security ⚬
  • 13.3 Creating Pages
  • 13.4 Working with Media
  • 13.5 Themes and Widgets
  • ⚬ Designers Lounge: Ecommerce

 

Prerequisites

You should possess basic computer skills. Knowledge of computer text, graphics, digital video, and other types of media, such as Flash movies, would be helpful, but by no means required.

 

Requirements

  • Software: Aside from a text editor, such as Windows Notepad or Mac OS TextEdit, there are no required software applications to complete this course; however, you’ll find the following software useful:
    • Dreamweaver CS4 or later: You can download the latest trial version from adobe.com, but if you do, since the trial version is good for only 30 days, do not install it until the third week of the course.
    • XAMPP Web (or some other) server software. XAMPP is a free Linux Web server emulator you can use to test your Web pages. You can download it from:
      • http://www.apachefriends.org/en/xampp.html
      • It comes in both Windows and Mac OS versions.
  • FTP client software: File Transfer Protocol, or FTP, software allows you to upload your Web page files to a Web server. You can perform this function with built-in Windows or Mac utilities, but will find this much easier with an FTP utility. You can download and use FileZilla for free (indefinitely) at:
    • http://filezilla-project.org/
    • It comes in both Windows and Mac versions.
  • Web space: You’ll need a website to which you can upload your assignments. There are several free Web hosting sites available. However, many of them place ads on your pages. This can be very annoying, but if you can live with it, so can I.

 

.