Week Two (MGDP2050)

Lecture notes and exercises for Week Two of Web Design and Development II (MGDP2050).

HTC web creative dot com

The domain

htcwebcreative.com

is available for student use, with some cautions and restrictions.

See: http://htcwebcreative.com

File Transfer Protocol (FTP)

File Transfer Protocol (FTP) is a standard tool for transferring files between computers over networks.

Working with FTP is a fundamental skill in this class.

We will start using FTP next week. If you are not familiar with FTP, do your own reading on the subject.

LAMP, MAMP, XAMPP, etc.

Update: this section postponed until Week Two.

LAMP stands for:

• The Linux operating system
• The Apache HTTP Server
• The MySQL relational database management system (RDBMS)
• The PHP programming language, and the Perl scripting language

LAMP allows you to run a web server as a desktop application. This is very useful for web development.

See LAMP (software bundle) for more detailed information.

See also:

• MAMP
• XAMPP
• Getting started with XAMPP

Bootstrap

Bootstrap is a framework for responsive web design.

General discussion:

• Bootstrap (framework)
• Getting started with Bootstrap

Getting started, and download Bootstrap:

• Getting started
• Getting started #Download

Responsive web design (RWD)

Responsive web design is a set of web design techniques for creating web pages which look good on a wide range of devices.

Techniques include proportion-based grids, flexible images, and media queries:

• The proportion-based (or fluid) grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
• Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
• Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

Devices include:

• Mobile phone
• Tablet
• Laptop computer
• Desktop computer

See Responsive web design.

Naming conventions

...

See Web page conventions (MGDP2050).

Exercises: in class

MAMP

• Run MAMP (if available).
• Locate the htdocs folder -- this is the Local root folder for MAMP
• Copy your class exercise files into htdocs
  • Copy index.html, the bootstrap folder, your custom external style sheet
  • Only copy the contents of your Local root folder, not the folder itself (htdocs serves this purpose)

localhost

Open a web browser, and browse:

• http://localhost

You should see your Home page.

Exercises: for next week

...

Exercises: by end of semester

...