Started making a web page with Roxy

Session 1:⌗

Goals:⌗

• Create basic webpage
  • Tags: head, html, body, h1, img, p, a
  • Add an image
  • link to another location
  • Understand it’s “just files”
• Host static site
  • Upload to S3 Static site
  • Add DNS

Resources:⌗

Roxy found these videos for a brief introduction to HTML

• HTML With the Caveman - https://www.youtube.com/watch?v=boah9hNHhi0 (three videos)
• I discovered this handy page after I’d finished it all up, but it’ll walk you through some of the things below: https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html

Activities:⌗

Files of text⌗

1. I demonstrated that websites are just code. Showed her that you can “view source” in the browser.
2. We sat down and built a simple website. I created the index.html file in vim in a Project folder.
3. We took some tags from an existing website.
4. Roxy added a with content
5. Inside the body, Roxy added an and with content.
6. We viewed the text-only page

Adding an image⌗

1. We decided a picture was useful, and went into Photos to find one
2. Downloaded the photo to a newly created folder, images/, inside the Project folder
3. I help her add an ‘''’''
4. Upon viewing it, the image was really big. Roxy Googled how to resize an image.
5. She added a height=‘400’ parameter to the img.
6. Save, reload, fixed!

Putting it onto the internet⌗

I didn’t go into too much detail on how, but we did talk about a few things here.

1. These are just files on my computer. Can you see it from somewhere else?
2. Okay, to see it from somewhere else, we need to store it on the internet.
3. I opened up my AWS Console and went to S3, where I created a relevant bucket. I configured it as public and as a static website.
4. We struggled briefly because the files were not world-readable. But fixed it via Object actions->Make public via ACL (see below for improved policy-based fix)
5. I then added her as a subdomain in Route53 so that her website would have a nice URL.

Extras!⌗

S3 Bucket Policy⌗

1. I added a bucket policy using the AWS Policy Generator to make the objects world-readable (http://awspolicygen.s3.amazonaws.com/policygen.html)
   • Policy Type: S3 Bucket Policy
   • Principal: *
   • Actions: GetObject
   • ARN: Get this from your S3 bucket Properties. Something like arn:aw2:s3::::bucketinfo/* note: the trailing /* refers to resources under the bucket - e.g. the object w/in it
   • Generate the Policy, which just gives some text to copy.
   • Inside the Bucket select Permissions, roll down and Edit the Bucket policy, where you can paste in the policy just generated.

##Next:

• add an anchor tag (done!)
• add SSL
• CSS!
• Additional Pages and content
• Enable her to manage her own content + version control