D.I. von Briesen's Dapper Innovative Vicuña Buck | WEB215

Profile Image

Change your picture in the LMS: click your name (top-right), choose Profile, then Change Picture. Images over 1 MB won't upload, so resize or crop anything straight off a modern camera first.

• Clear and cropped proportionally to the display size - width equals height, 100 × 100 at most, smaller in some places.
• A headshot is best, but any image will do. A simple picture with good contrast between the subject and the background works best.
• Open Roster, then Classlist, and look at your classmates' pictures. If you can't tell what one is, or wouldn't recognize a face, it isn't good. Check yours the same way, pretending you don't know what it is - if you can't tell, do it again.

Submit a post saying you've done it; your visible profile is the evidence. An image that's already there counts if it isn't the default and it meets these rules. Then peer review two classmates with meaningful feedback - for a bonus, help them fix something or point them to a good resource.

Back to top

Navigate the Course

The LMS course has three kinds of navigation:

• A top menu with the logo and drop-downs, called the mini-bar.
• A secondary menu, the menu bar.
• A set of widgets on the first page: a top row, a bottom row, and two columns in between. Each does something different, and some are custom built. Widgets can have controls of their own.

Pick six items from anywhere in the course - a menu, an item in a drop-down, a widget. Find at least one you think is critical and one you think is useless. Post a numbered list of the six, explaining each one's features and purpose and how you might or might not use it.

Tip: Ctrl-Enter starts a new line inside the same bullet. Never make a sublist of one item. Read your classmates' posts first so you don't duplicate theirs - a good time to do your two peer reviews too.

Back to top

Email Alerts

NPR - No Peer Review.

Open your notification settings: your name (top-right), then Notifications, then scroll down and check the two email boxes for both types of announcements. Take a screenshot and embed it in a post.

• Crop it to fit nicely and keep it legible. Both boxes must show as checked.
• Embed the image, don't attach it - the embed tool is the small mountain icon to the right of the link icon. Don't use the "Insert Stuff" option.
• The image has to show directly in the post. If it doesn't, you've done it wrong - but you can edit a post, so fix it.

Other notification options (alerts when you get a grade, alerts to your phone, settings for each class) are up to you and aren't part of this assignment.

Back to top

Introductions

Follow the Introductions page: write your introduction in the shared document, update the table of contents so it jumps to your name, and check your formatting against the examples. Then start a thread here saying you've done all of it, with a link to your heading (right-click your name in the document and choose Copy Heading Link).

Peer review two classmates with meaningful feedback, and do it right around when you post yours - don't wait until after I've given feedback. The links at the bottom matter most: check them carefully in a private window so they show your information, and pick a divider (any icon, emoji, or character) to go between them. They'll appear in the footer of almost every page you build. You'll make a webpage from this introduction, so get it right here first.

Back to top

GitHub Home Pages

Set up your GitHub Pages account if you haven't (see GitHub & GitHub Pages Setup). You'll have a folder named yourgithubid.github.io, and from now on all your work goes in it. Inside, create a folder named after this course - web215, no spaces, no capitals - to hold everything you build for this class.

What Every Page Needs From Here On

• Proper html, head, meta, title, and body elements.
• A title with your name (possessive) and mascot, the course ID (no section), and the page name, separated by a divider you choose. For example: John Kennedy's Jumping Kangaroo ✦ WEB215 ✦ Home.
• header, main, and footer, in that order, with nothing between them.
• An h1 in the header holding the first items of your title but not the page name.
• An h2 as the first item in main, holding the page name. The title is the h1, plus the divider, plus the h2.

The Two Home Pages

• You need an index.html in your root folder and one in your course folder.
• The root page is not about this class: no course ID and not the course's CSS. It does have a link to the course site, in a paragraph inside main that identifies it as your personal home page: <a href="web215/">Click to go to my WEB215 course.</a>
• The course home page has an h2 like "Home" and a paragraph or two about what the site is and a little about you, ending with something like "you can learn more about me by reading my introduction," linked to your introduction page.
• The footer of your course pages links to GitHub, GitHub.io, and the course's .io page, so you can always jump back.

Submit a link to your .io home page, with the link to web215/ (not web215/index.html - the index loads on its own). Reply to two classmates with something they missed, or say it's perfect if it is. Your grade is a mix of your work and your replies: two thirds, one sixth, and one sixth.

Back to top

Course Webpage Template

You'll build many pages, and the easy way is to copy one good page. This page holds every key element a page should have, plus the ones your course pages need. Make its contents specific to you and this course, with a reminder to change each thing when you copy it:

• Title: D.I. von Briesen's Dapper Vicuña ✦ WEB215 ✦ Template Page - CHANGE FOR THIS PAGE, using your own name, mascot, and divider.
• Header h1: your name and mascot, a divider, and WEB215.
• Main h2: Template Page - CHANGE TO PAGE NAME, then two sample paragraphs saying this is a template you copy and edit.
• Footer: a credit such as "Website designed by [your name] Enterprises."

• Link a stylesheet named default.css in a folder called styles. For now, basic fonts and colors; you'll tweak it as you go.
• Put a nav in the header linking home (index.html), introduction (introduction.html), contract (contract.html), and about (about.html).
• Put a nav in the footer with all the links from your introduction, with your divider between them: GitHub, GitHub.io (your home page), WEB215.io (this course's home), and your freeCodeCamp and Codecademy profiles, and your public JSFiddles (at least one with your name in it).
• Test every link in a private window. A link that doesn't load means the link is wrong or the profile isn't public.
• Both validators go on the page: the Accumulus script as the last item in your head, and the Vicunadator before the end of your body - see Validation, and the Web Standards for everything else.

Submit a clickable link showing the full URL to your template page - don't make it pretty. Peer review: open a classmate's link and check it against this list; there's always at least one thing to correct, and you'll learn from finding it. Don't forget to log your work.

Back to top

Home, Contract, Introduction, and About Pages

Build these four pages from your template, all in your course folder and all linked from your header nav: home, introduction, contract, and about. Everything they need is already on the general site, so this assignment points there instead of repeating it.

• Home (index.html), Introduction (introduction.html), and Contract (contract.html): the Course Site Standards, under "The Three Pages Every Course Site Starts With." The introduction also follows the Introduction Webpage Standards and starts from your shared introduction.
• About (about.html, linked as About after Contract in your menu): follow the About Page Instructions, writing it for WEB215 - this course, the tools it uses, and the sites you'll build.

Run the validators before you submit, then peer review as usual.

Back to top

Codecademy: The Six Basics

NPR - No Peer Review.

Use the free catalog at codecademy.com - you shouldn't pay for anything. Finish these six courses over the next three weeks. They vary a lot in length, so plan for that. You took these earlier, so they should be easy; if not, you have some work ahead.

• Welcome to Codecademy
• Learn How to Code
• Learn HTML
• Learn CSS
• Learn JavaScript
• Make a Website with Namecheap
• Bonus: Learn What to Learn

Post each time you finish one or when you finish them all, with the usual proof: your profile link and a screenshot of your profile page showing your login and icon at the top-left and the completion percentage on the right (zoom out or take two screenshots to show it all). The Codecademy link in your footer should lead to your profile too - now's a good time to check it. A working link looks like https://www.codecademy.com/profiles/yourid.

Back to top

Codecademy: Learn Intermediate JavaScript

NPR - No Peer Review.

This takes real time - spread it over the next four weeks. Post the usual proof when you finish.

Back to top

Learn the Command Line at Terminal Tutor

NPR - No Peer Review.

Work through the tutorial at terminaltutor.com. For proof, post a screenshot of your completion with your name in the URL, embedded as usual. Then add two things:

• A short explanation of your experience - the good, the bad, whatever. Sub-bullets are fine instead of an essay.
• Two alternative tutorials. Spend a couple of minutes with each and list them, with their obvious pros and cons against the one you just finished.

Back to top

Codecademy: Learn MongoDB

NPR - No Peer Review.

About five hours. Post the usual proof.

Back to top

Codecademy: Learn React, Introduction

NPR - No Peer Review.

About six hours. Post the usual proof, with the 100% completion bar and your id or name in the same shot.

Back to top

Codecademy: Learn Node.js

NPR - No Peer Review.

About five hours. Post the usual proof, with your id or login and the 100% completion bar in the same image.

Back to top

Bonus: Express Tutorial

NPR - No Peer Review.

About five hours, in two parts. Finish Codecademy's Learn Express and post the usual proof. Then complete the ExpressJS tutorial on TutorialsPoint (tutorialspoint.com/expressjs) and post some evidence that you did.

Back to top

Find and Complete a MERN Tutorial

Find a MongoDB, Express, React, and Node tutorial online. React changes quickly, so look for something current - 2024 or newer at the least - that seems reasonable and that you think you'll like. An hour spent comparing several, including their comments, is worth it. CPCC has LinkedIn Learning Premium, which is another source, and freeCodeCamp partners with many content providers.

• Follow along and configure your machine so it runs the platform. Make a note of directories and locations - you'll publish a repo from what you build here.
• Get the tutorial's application running cleanly on your own computer. This isn't trivial. Give yourself time, take breaks, come back to it.
• Show it running locally, with screenshots or a video, and demonstrate all four parts of CRUD - Create, Read, Update, and Delete, which cover nearly all software functionality.

Back to top

freeCodeCamp: Responsive Web Design Certification

NPR - No Peer Review.

You should have finished this in WEB115, so these are easy points. If you didn't, you have a lot to catch up on - it isn't trivial, so plan for it.

Once all the parts below are done you'll have earned the certification. Then update your standard footer so that after the "designed by…" (or your equivalent) it says something like certified in Responsive Web Design, with "Responsive Web Design" linked to your certificate. Submit a link to your site.

The Parts

1. Learn HTML by Building a Cat Photo App (69 exercises); Learn Basic CSS by Building a Cafe Menu (91); Learn CSS Colors by Building a Set of Colored Markers (94); Learn HTML Forms by Building a Registration Form (63)
2. Certification Project: Survey Form (16 user stories); Learn the CSS Box Model by Building a Rothko Painting (45); Learn CSS Flexbox by Building a Photo Gallery (21)
3. Learn Typography by Building a Nutrition Label (67); Learn Accessibility by Building a Quiz (68); Certification Project: Tribute Page (9 user stories)
4. Learn More About CSS Pseudo Selectors by Building a Balance Sheet (65); Learn Intermediate CSS by Building a Cat Painting (82); Learn Responsive Web Design by Building a Piano (33); Certification Project: Technical Documentation Page (15 user stories)
5. Learn CSS Variables by Building a City Skyline (118); Learn CSS Grid by Building a Magazine (80); Certification Project: Product Landing Page (15 user stories)
6. Learn CSS Animation by Building a Ferris Wheel (28); Learn CSS Transforms by Building a Penguin (104); Certification Project: Personal Portfolio Webpage (11 user stories)

Back to top

freeCodeCamp: JavaScript Data Structures and Algorithms Certification

NPR - No Peer Review.

Do what you did for Responsive Web Design:

• Make sure your course page footer says something like "certified in…", with links to both certifications.
• Include a link to that page, the one with the common footer.
• Include a link to your freeCodeCamp profile.
• Include a link to the certification itself.

Back to top

Including Dynamic Header and Footer Components

NPR - No Peer Review.

If you aren't already including your headers and footers dynamically, now's the time to do it for all your work. The base steps are on the Common Headers/Footers Instructions page, using Paul Browne's HTMLInclude script from github.com/paul-browne/HTMLInclude. Here's what this course adds.

• Every page includes one header and one footer and, optionally, a navbar if it isn't already in the header. Main can hold its own content, or you can include it - if you do, I suggest a folder called content for the different mains.
• Each page's head must be unique, because the title has to include that page's title. For the full treatment, make the head a component too, and use the script's variable-passing feature to hand it the page name (see the readme in the script's repo).
• GitHub won't validate using the referrer, so the validation links in the footer have to change to point at the calling page. Type this in rather than copying it - copying code out of a document causes trouble:

<a href="https://validator.w3.org/check?uri=" id="validation_link_html">HTML validation</a>
<a href="https://jigsaw.w3.org/css-validator/validator?uri=" id="validation_link_css">CSS validation</a>
<script>
document.getElementById("validation_link_html").setAttribute("href",
  "https://validator.w3.org/check?uri=" + location.href);
document.getElementById("validation_link_css").setAttribute("href",
  "https://jigsaw.w3.org/css-validator/validator?uri=" + location.href);
</script>

This isn't the most efficient way to do it. For a challenge, learn to read the contents in with your own script, or from a JSON file, and talk it over on the forum.

Back to top

Codecademy: Learn Intermediate CSS

NPR - No Peer Review.

Finish it over the next four weeks and post the usual proof.

Back to top

Codecademy: Learn TypeScript

NPR - No Peer Review.

Post the usual proof.

Back to top

Codecademy: Learn React Router

NPR - No Peer Review.

Post the usual proof.

Back to top

Codecademy: Learn Node SQLite

NPR - No Peer Review.

Post the usual proof.

Back to top

Deploy Your MERN Tutorial

This one gets about two weeks. You ran a complete MERN tutorial on your own machine and showed it working. Now deploy that same application to a server on the web, and give us a URL we can test. That means:

1. Finding a host - free, or paid if you're willing.
2. Possibly setting up MongoDB on another host, depending on your choices.
3. Any configuration and setup it needs.
4. Getting your application to run.
5. Adding the URL to your course website, on a secondary menu for outside items, so we can test.
6. Submitting the URL to your course site, where the link is.

I'll test it by adding something, editing it, and deleting it - possibly a few times, in different ways. You'll use this as a rough model for your own application, so keep that in mind. Most of the trouble here is devops, and it can be substantial and frustrating: plan ahead, leave lots of time for sorting things out, and share what you learn on the discussion forum.

Back to top

Course Feedback

Take a few minutes to look through the assignments in the gradebook or under the content area. I'd like to understand your experience with each one for future adjustments: which you found useless (busywork), really helpful, too hard, too easy, too time-consuming for the value, and so on. Please don't say "everything is fine" - that suggests you aren't trying. Peer review as usual.

Back to top

Describe Your Project

You've finished a MERN tutorial and a good run of freeCodeCamp work with HTML, CSS, JavaScript, and React. Now it's time to think about an online project. There are two big parts: building the app - modifying the one from the tutorial, or one of your own, or starting from scratch - and figuring out where and how to host it.

The Project

• Something you care about. Discuss on the forum if you need ideas.
• It needs data persistence in MongoDB with the equivalent of a many-to-many relationship - one person can own many cars, and one car can have more than one owner, which a traditional relational database would handle with a join table.
• It needs authentication - some kind of login.
• Sample data (AI is fine): at least a dozen values prepopulated. We should be able to load these at first, and eventually do CRUD on them and anything you add.

The Plan and the Host

Begin a project plan and research where you'll host. You may choose a paid account for your own benefit - you only need to pay for one month for this, and you can probably do it for about $10. There are free sites, and Heroku has been used in the past, but those can be harder.

• Start by getting a very primitive app going that represents one of your pages, like your introduction or contract, and make sure it runs on your computer through node.
• Then research hosting and put that simple app on the site you host with. Submit the link, and make sure the page loads. The next step is having your whole site load, so you can begin that as you go.
• Make a branch for this in your GitHub work. GitHub Pages may not work with the MERN work, and you don't want to break your older pages.
• Add a link in the footer of your common menu that leads here, and a link in your header nav that leads to these assignments. We should be able to click through to your github.io pages and follow links to your hosted work.

Describe the project here in as much detail as you're comfortable with, and where you plan to host it. Your data may live somewhere different.

Back to top

Deploy an App Skeleton With a Login Page

Any site with user data needs some kind of authentication. Nobody without the right to should be able to see, update, or delete what's in your data store.

Ideally you'd build a whole user-management system with user levels. For this course, keep it simple: one user is enough. Choose a user id and password, and put them in your submission so we can log in and test. Pick a password you don't use anywhere else - your post is visible to classmates.

• If the user is authenticated, they get into the app. If not, it should gracefully refuse them.
• Deploy a skeleton of your app - its name, headers, and the like - with a login option. Temporary pages that just say "You're logged in!" are fine, or start rolling in real functionality.

Back to top

Populate Data and Get It Displayed

Once you have a login, use the dummy data you created and put it in your data store, then display it on the screen. This is the first of the four CRUD operations - Read - and usually the most straightforward.

Back to top

App Create and Insert

Get your application running so that the data in your store displays on the screen - the data you prepopulated - and so that you can also insert new data.

Depending on how you build it, it may be easier to do CRUD all together or out of sequence, so you can submit these related assignments at the same time, separately, or out of order.

Back to top

App Update and Delete

Add the functionality that lets a user update data. You can often reuse the design you used to add new values, since the only differences are prepopulating the form and knowing what you're updating, chosen from a previous selection.

Delete is usually the most basic, but you still have to be able to select the item, just as you do to update it. A common design is a list with an edit and a delete icon next to each item.

At this point your application should be more or less functional. A full test: log in, create a value or a set, confirm they show up, edit them, confirm the edits show up, then delete them and confirm they're gone. Further testing includes confirming you can't do anything without logging in - copy a logged-in URL into a browser that isn't logged in and try it - and that logging out works.

Back to top

Project Wrap-Up

This is your final project submission. Fix any bugs your peers found, and make whatever tweaks the design needs.

Back to top

Self Evaluation, and Start, Stop, Continue

NPR - No Peer Review.

Two parts. The self evaluation is about you; Start, Stop, Continue is about the class. Be thorough, honest, and respectful.

Self Evaluation

Spend a few minutes evaluating your own performance so far. Copy these bullets into a post and address each one. Your grade doesn't depend on what you write - only that you wrote it.

• Your involvement in the in-person class (if applicable):
• Your reading of the class discussion forum:
• Your posting on the class discussion forum:
• Your homework readings:
• Your assignments:
• Your biggest challenges:
• Easiest things:
• Where you'd like to see the class go from here:

Review your gradebook - counting extra credit and work not yet graded - and say what grade you think you should get. If you'd like an Audit (you've taken part all semester but not finished the work), a W, or a condition (such as "if I don't get a B or better I'd like an Audit"), say so clearly. Depending on policy and the semester I may be able to honor it, but I can't promise. Please don't write "I'll take what I deserve" or "I'm OK with what I've earned."

Stop, Start, Continue

How do you feel about this class? Say specifically, and with some explanation, what you like and don't like about each part of the course. Paste these bullets into a new post and finish each sentence:

• Course materials - Stop… Start… Continue…
• Instruction - Stop… Start… Continue…
• Projects and assignments - Stop… Start… Continue…

Back to top

Your Own Brand

You've probably done something like this before. If so, don't reuse the colors, fonts, logos, or name - and the same goes if you're doing it for another class at the same time. Make it a completely different set.

Create a page called Brand. Using either your animal name or a name you come up with, invent a real or imaginary product. You need:

• A tagline or slogan
• A logo
• A favicon
• A company name
• A mission statement, or a summary of the company
• A list of colors, each one displayed (coolors.co can help)
• A list of fonts, each one displayed (Google Fonts can help)

Put each in its own section with an h3 saying what it is - "Logo" in the h3, then the logo under it in a figure. Include the tagline, logo, and favicon on every page, as well as listing them on the Brand page. Update your default stylesheet to use these fonts and colors throughout.

Back to top

Round Trip Introduction Form

The round trip introduction form here must be built with a front-end JS framework, like React or Vue - not plain JS (as in WEB115) or PHP (as in WEB250).

The form takes in every value on your introduction - last name, first name, middle initial, nickname, mascot, divider, image, caption, professional background, and the rest - including the courses, flexible enough for more or fewer. Then it outputs them back on the screen in a format identical to your current introduction page.

Back to top

Cookies: Make, Bake, and Take

Read up on cookies and how to create, delete, and view them with JavaScript. Wherever it's appropriate you may use local storage in place of cookies. Two of the most common uses:

1. Tracking whether you're logged in, so every other page or part of the app can confirm it. These are session variables, because they track your browsing session.
2. Tracking whether this person (presumably) has been here before, when, with what browser, and so on. A catalog site can follow what you were looking at even if you never logged in, then offer specials next time. This is getting more complex - and more intrusive - as platforms swap data around. This exercise teaches the basics with an automatic cookie and a manual cookie.

Build

• Make a copy of your introduction form assignment.
• Above the form, show two sets of non-editable information: browser and version, session info, timestamp, and IP address.
• Create a cookie that saves that information plus everything in the form.
• On load, populate the form from the saved values. The first set shows the current values; the second pulls the last values from the cookie.
• Collect the information with JavaScript when the page loads and display it. When the user saves, save it along with the form data. Think of these as extra form fields.
• Retrieve the cookies, if they're there, and display each item in a formatted way, like browser: … || timestamp: ….
• Delete one cookie, the other, or both. Add a button to purge the cookie.

To Test

• The first time you visit, it shows that there's no cookie information.
• Go back, and it shows the automatic cookie's information.
• Submit the form, and it refreshes on save and shows that.
• Leave and come back, and it shows both.
• Delete one and go back, and it shows only the other - but if you deleted the automatic one, it should regenerate by itself, so how will that work?

It may look complex, but break it into modules and methods and think through the logic. Use if and else properly so that if you have a result you show it, and if you don't you don't try. Ask or discuss - don't be shy. Link it in your table of contents as usual, and do your classmates a favor: really test theirs before I get to it.

Back to top

Using Sprites

A CSS sprite is one image file holding many small images, shown a piece at a time. Start by reading about them - CSS Tricks and Level Up Tutorials - and try Sprite Cow, which writes the positioning CSS for you. Find a few more articles and consider sharing them on the discussion forum.

Then create or find a set of sprites that fits your site's theme and build a basic page that uses them. It must show a single spritesheet with multiple sprites, used in different places or in different ways. As always, the page has your standard linked CSS and passes the validators.

Back to top

Everything HTML

Build a single page, themed to your site, that uses and, where it can, demonstrates every HTML5 tag. The list of tags is online in several places (W3Schools has one), and with a little creativity you can get it into a format where much of the work is done for you.

Part I: The Menu

• Make a new page - "my everything HTML page" will do - with your standard branding and validators. As on every page, put a heading with the assignment's title under your normal header.
• At the top, list every HTML5 tag as a menu, alphabetically, each one a link: <!-- --> || <!DOCTYPE> || <a> || <abbr> || <address> and so on. It can be a horizontal line or a vertical list; if it's vertical, the content should appear to its right, which takes a more dynamic layout.
• Most of these links point to somewhere lower on the same page, so review internal anchors - they're how this assignment works. This page has the pattern: each section has an anchor, and a link back to the top.

Part II: The Demonstrations

Keep the menu alphabetical. Several tags can share one destination - <table>, <tr>, <th>, and <td> can all lead to one themed example table. Each link gets a "back to menu" or "back to top" link.

Part III: Finish

Every tag in the menu leads to something that shows what it does. Where a tag can't be demonstrated - a comment, the doctype - link to a statement that says the tag is there and what it does. The page is themed, validates, and lists them all.

Back to top

Everything HTML, From Data (aka "Dynamize")

Do Everything HTML first. This one turns it into a page that builds itself from data - "dynamizing" it. Your Everything HTML page is still manual: if it were a list of people in a company, you'd be editing it every time somebody joined, left, or changed their name. Here the information comes from data instead, so changing it means changing one line of a file.

Each tag has a handful of data points, all of them text: its name, its description, its relationship to HTML5 (not supported, replaced by…), your themed example, and anything else you'd add.

• Put the data in a delimited text file, one record per line, five values each. Use a delimiter like || - commas and ampersands cause trouble here - and make it obvious, so debugging is easy.
• Your code opens and reads the file, and knows when to stop (or not to start): open if it's there, read while there are values left.
• Separate the records, and put the values into a two-dimensional array - one dimension is the record, the other its values. Loading everything once is usually simplest, after which you only read from the array.
• Use the first value to generate the menu, extract the one the user chose, format it, and output it to the page.

Want a stretch? Once it works, move the records into MongoDB and read them from there.

Back to top

Console Play

Using any app that shows the JavaScript console - your browser's developer tools, or JSFiddle - write at least 50 expressions that show different bits of code at play, using material from your reading. If you did something like this in WEB115, this time work on more complex or tricky examples. It's different from the Intermediate JavaScript tutorial: there you follow lessons, here you write the experiments yourself.

• Avoid more than a few alerts. For output use console.log or document.write. For input use prompt, or an HTML button and textfield if you want to be fancy.
• Show some math, some string manipulation, some variable declarations, some logic and flow control, and try to create functions.
• Try to break code and then fix it. Don't be shy about experimenting.
• A simple route is to cycle through examples in your reading, but customize them - that isn't copying if you make it yours.

Paste the code and results right into your post, or link to where they are. Don't attach a text file. Reply to two classmates, saying what they missed or what needs improving - or that it's perfect, if it is.

Back to top

A One-Div Graphic

Look at this CodePen and figure out what's going on. Then make your own: find a logo or graphic and see how well you can recreate it with CSS in a single div.

• Include a copy of the original (unless you made it from scratch), a link to your work on your site, and a screenshot of what it looks like to you, at its best, in your browser. These don't render reliably everywhere, so the screenshot shows what you see and the link shows what we see.
• This isn't trivial - it's why people say "wow" when they see one online - so give yourself time. You'll do better recreating an existing logo than inventing one.
• Don't overcomplicate it. A complex logo makes this much harder than it has to be. The idea is to get a feel for how this works, then move on.
• Put it on a new page, linked from your site menu.

Back to top

Node Hello World

Pairs well with Learn Node.js. Go to nodebeginner.org and get Node running on your system by reaching the Hello World part - customized to your site's theme, of course.

Then tweak the code to be cleaner and easier to understand. Comment it line by line, simplify it as much as you can, and avoid repeating code or function calls. Add the rest of an HTML document around the output - the head, the title, and so on - so it's valid.

Make a page for this assignment, linked from your site, that shows your Hello World greeting running locally on a node server as a screenshot, then your code, then the output of your modified, branded home page shown right in the page - as formatted text and images, not links.

Back to top