Web Design and Development

Intro to Web Development

• Slides

Activity

1. Use command line to navigate to the folder where you’re keeping your dssf files cd
2. Create a new directory (folder) for your new site mkdir my-site
3. Create a document in the directory and name it ‘index.html’ touch my-site/index.html
4. Create a css document in the same place touch my-site/style.css
5. Open the project in Atom Try atom my-site/index.html - if that doesn’t work, open Atom –> File –> Add Project Folder
6. In Atom, type html and hit tab: voila! You have a web page!
7. Add some elements and text. Save it, and open index.html with a web browser. You should see your website.
8. Link your CSS: in the ‘head’ section of index.html, type this:

<link rel="stylesheet" type="text/css" href="style.css">

1. Now you’re ready to build and style your website!

Resources:

• Learning HTML
  • Self-paced interactive HTML Tutorial from w3schools.com
  • LinkedIn Learning: HTML Essential Training (2h 45m)
• Learning CSS
  • CSS Diner
  • Self-paced interactive CSS tutorial from w3schools.com
  • LinkedIn Learning: CSS Essential Training (4h 28m)
  • Templates and models
    • https://html5up.net/
    • http://www.csszengarden.com/

Domain of One’s Own

On your own

• Choose your subdomain: alice.digital.brynmawr.edu
• Sign up for a Domain of One’s Own account at www.digital.brynmawr.edu