/webDevBootcamp

exercises associate with the presentation you're currently viewing

Primary LanguageCSSMIT LicenseMIT

webDevBootcamp

You know that presentation you're looking at, right now? These are the exercises associated with it.

Fork this repository so you can push the answers to the exercises. You will be turning in the finished repo to Professor Crow, along with a screenshot of your completed 90s personal website.

To serve the pages

python -m SimpleHTTPServer 8081 in the root directory of your forked github repo.

If you point your browser directly to http://localhost:8081, it you will see all the different directories listed.

To serve up the first exercise, for example, browse to http://localhost:8080/Section1_HTML/test.html

Section1_HTML

Normal Exercises:

  1. test.html: Notice how the HTML is interpreted and structured by the browser. What you will see is the "default" styling. It's not pretty, but that's not the goal of HTML. HTML defines the text content and the hierarchy of information.

  2. broken.html: The same HTML as test.html, but I've gone and broken things. As you can see, it doesn't render anymore. Compare the two files, and fix the broken one.

Advanced Exercises:

  1. We've introduced quite a few different tags in the presentation. Try adding
  2. elements in order to add more content to the fixed HTML.

Section2_CSS

TBD

Section3_JS

Section 3 has two exercises that require you to write JavaScript functions. For exercise1.html, we've written a skeleton of the function with

//Your code here!

Marking where you need to fill in logic.

exercise2.html requires you to fill out your own function completely.

When done, when you load the HTML into the browser the website will read EXERCISE COMPLETED in big letters if you finished.

Section4_PersonalWebsite

As with all labs, it's time to have a putting it-all-together section.

Requirements:

  1. Must have HTML.
  2. Must have custom CSS operating on those elements.
  3. Must use D3 to create 3 or more custom text elements (h1, p, whatever you have)

Beyond that?

Go wild! You learned a lot of stuff today, so just see what you can do. Link to other HTML pages, add custom images.

At the end, screenshot it for Professor Crow and send that screenshot along with the repo link.