Week One (MGDP2060)

This article lists topics for week one of Web Design and Development III (MGDP2060).

Topics

Review:

• HTML
• Cascading Style Sheets
• JavaScript

New topics:

• XAMPP
• Getting started with XAMPP
• Bootstrap (framework)
• Getting started with Bootstrap
• PHP
• Getting started with PHP

Week one exercises

• Run XAMPP
• Fix the Apache HTTP Server configuration
  • Revert to default setting
• Browse http://localhost
• Observe that there are no files in the web server root folder

• Download the Bootstrap files
  • [http://getbootstrap.com/getting-started/#download]
  • Put the folder containing the Bootstrap files into your htdocs folder
• In your root folder, create a new document named index.html
• See the Basic HTML template

]

• • Edit the HTML to reference your local Bootstrap files
  • Enter your name, "Home page", and other text content of your choice
  • Be creative, your choice of font, colors, etc.
• Browse http://localhost
  • Confirm that your Bootstrap page displays correctly

• Change the name of your home page file from index.html to index.php
• Refresh the browser, observe that the page looks the same

• Somewhere in the body section of index.php, enter this code:

<?php

?>

• Update the PHP to look like this:

<?php
echo "<h1>Hello World</h1>"
?>

Finishing up

• At the end of your session at the workstation, copy your working files (the htdocs folder) to your jump drive, or other external storage device
  • Workstation files are wiped overnight
  • Next week, copy files from your jump drive to the workstation, to continue your work
  • You may also copy the files to another computer with XAMPP installed, and work there

See also

• Web Design and Development III (MGDP2060)