Eric's First Personal Profile

Module 1: Crafting a Professional Web Presence

Computer Fundamentals >> Component 4: Programming The Web

The Internet Age has arrived, and folks that seem relatively "with it" get a leg up in all sorts of situations, including employment searches. This module's product is a professional website featuring your interests, skills, accomplishments, and thoughts.

arrow_downward

Jump to a section

check_boxLearning Objectives
local_diningModule "hamburger" guide
bookResources and reference documents
extensionCore Concepts: Creating a skeleton HTML page
schoolModule Preparation Exercises: Study W3 Schools
motorcyclePhase 1: Dissecting a website...to find tags and boxes!
motorcyclePhase 2: HTML/CSS Box Model Challenges
motorcyclePhase 3: Poaching CSS: Legally "Stealing" Styling
motorcyclePhase 4: Styling your profile
buildMini Project: "Build Out" Your Profile
flight_takeoffExtension Exercise 1: Building with a WYSIWYG
flight_takeoffExtension Exercise 2: Plugging and Playing with HTML goodies & CSS

Module Learning Objectives

check_box

Create a simple HTML/CSS box-model diagram based on an HTML page and broswer dissection tools
check_box

Create, save, access, and tinker with a single-file HTML page (with embedded CSS) in a web browser
check_box

Tinker with a more complicated website in HTML and CSS to contain customized content, including text and images
check_box

Advanced: Create a multi-page profile website with custom resources arranged in a sensible directory structure for extension in the future

arrow_upward

local_dining

Module Hamburger Guide

Print off the hamburger guide for this module, review it carefully, and complete its sections as a culminating activity for this module.

Hamburger For Printing (*.pdf)

Editable Hamburger (open document text *.odt)

arrow_upward

book

External Resources

The Internet on Wikipedia

The World Wide Web on Wikipedia

Mozilla Developer's Network - HTML Basics

Mozilla Developer's Network - Broswer Developer Tool Documentation

W3 Schools HTML, CSS, JS tutorials

Codepen.io - Tinker with web code with real-time feedback

arrow_upward

school

Prep-Work

Activities and readings to do prior to our starting the module in class:

  1. Read the module core concepts descriptions and study the images, following links as needed. Check out the external resources--spend 5 mins reading and exploring each page. Have fun! It's the internet!
  2. Pay particular attention to the HTML tutorials on the Mozilla Developers site. Following their page-by-page tutorials is the most straightforward way to become comfy with HTML.

arrow_upward

extension

Module Core Concepts

Learn HTML Basics

HTML is a markup language, meaning it involves adding additional information to a text document which, in our case, a browser interprets to create consistently displayed web pages. HTML is the basis for all page structure on the World Wide Web today.

Sample HTML Tag diagram

Devote about a half hour to working through one of these two tutorials on HTML basics. Check each one out and click through a bit, getting a sense for how their exercises are structured. Choose the one that makes your learning most fluid.

As you read, build yourself a simple skeleton site in Netbeans. Save the file with a .html extension into a directory you make called "web". As you tinker with the online tools, tweak your skeleton as you go. Remember, we're just making a playground site at this point.

Mozilla Developer Portal: HTML Basics

W3 Schools: HTML Introduction

arrow_upward

motorcycle

Phase 1: Dissecting a website...to find tags and boxes!

You should have a sense from the core concepts activity of how HTML looks and works. Opening and closing tags create all of the amazing configurations and presentations we see on the Web today. This phase encoruages you to become familiar with even more tags and how they work together by dissecting a sample website designed using "pure HTML" (rather than HTML generated by a website builder).

Follow these steps to choose a website that you'll dissect and then do some digging to learn more about how it's put together. Record your findings in your Hamburger's phase 1 questions.

  1. Choose from these sample websites that Eric has built over the years OR a website of your choosing that is realtively simple in its layout.
    2. Site 1: Eric's first hired website job for an Oregonian Nonprofit
    Site 2: Eric's biographic page from sevearal years ago
    Site 3: This site
    Site 4: Choose your own site
  2. View the website you choose in the developer mode using FIREFOX. Activate the tool panel with the F12 key. Lick the inspector toggle button in the upper right of the developer tools to change the cursor to a magic box model selector. Poke through the site to find unique tags to look up at W3 Schools or Mozilla developer's network.
  3. Record your findings in the Hamburger; take your time!

arrow_upward

motorcycle

Phase 2: HTML/CSS Box Model Challenges

arrow_upward

motorcycle

Phase 3:Poaching CSS: Legally "Stealing" Styling

Exercise type:

Content

arrow_upward

motorcycle

Phase 4: Styling your profile

Exercise type:

Content

arrow_upward

build

Module mini-project: Building out your profile

Exercise type:

Content

arrow_upward

flight_takeoff

Extension activity 1: Building with a WYSIWYG

Exercise type:

Content

arrow_upward

flight_takeoff

Extension activity 1: Plugging and Playing with HTML goodies & CSS

Exercise type:

Content

arrow_upward