Embed Size (px)
Citation preview
Website DesignerBadge SeminarNOVEMBER 14, 2015
Jump Ahead
Since the registration confirmation e-mail sometimes takes a few minutes to arrive…
Navigate to http://ibm.biz/gs-bluemix and sign up
If you don’t have access to an e-mail account here, ask for help
About Me
Earned my Gold Award in 2002
Bachelor and Master Degrees in Computer Science from North Carolina State University
Software Engineer for IBM
Code
Developer outreach
Travel!
Introductions
What’s your name?
Do you have any experience building websites?
Why did you decide to attend today?
Agenda
10:15 – 12:00 Learn the basics of building websites and build your site blueprint
12:00 – 12:30 Bagged lunch
12:30 – 2:45 Build your own website
2:45 – 3:00 Prepare for launch party
3:00 – 3:30 Launch party (leaders and guardians are invited!)
1. FIND A WORTHWHILE SUBJECT FOR YOUR WEBSITE OR BLOG
Pick a subject and gather content
Your Scouting adventures
Girl Scout Gold Award
Place where you volunteer
Extracurricular group
Hobby
2. BE THE HOST WITH THE MOST
Try on your own
If you don’t have access to an e-mail account here, let me know and I will provide you with an account
2.1 Register for IBM Bluemix
2.2 Deploy your website
Extra time?
Explore public > index.html and make some changes. See how the page updates.
Intro to HTML
HTML: Hyper Text Markup Language
HTML documents have tags
<html> </html>
Example
Important things to remember
The index page will be displayed by default.
HTML ignores spaces and new lines. You must use <br> to create a new line.
If you open a tag, be sure to close it.
Images and line breaks are the exception to this rule.
Try together
2.3 Update the heading
2.4 Update the title
2.5 Add a paragraph
Try on your own
2.6 Create a new webpage
2.7 Create links
2.8 Add an image
2.9 Embed an Instagram picture
Extra time?
Explore w3schools’ HTML(5) Tutorial: http://www.w3schools.com/html/
Intro to CSS
CSS: Cascading Style Sheets
Tells how things should be displayed (size, color, alignment, etc)
Example
Important things to remember
Create a link between your html page and stylesheet
In the stylesheet, put a period before class names. Do not put a period before html elements. For example:
.special-paragraph { color: pink}
h1 { color: pink;}
See the complete list of CSS properties you can set: http://www.w3schools.com/cssref/
Try together
2.10 Style your heading
Try on your own
2.11 Style your paragraphs
2.12 Create a navigation bar using Bootstrap
2.14 Update the navigation bar’s styling
2.15 Explore Bootstrap
Extra time?
Explore w3schools’ CSS tutorial: http://www.w3schools.com/css/
3. BUILD A BLUEPRINT
What is a blueprint?
A site blueprint is a sketch that shows how users will navigate your site and a high level overview of what content will be on each page
Why build a blueprint?
Save time
Get feedback
Easily make changes
Blueprints do not
Focus on colors or fonts
Provide an exact view of what your site will look
From blueprint to blog
Try on your own
Step 3: Build a blueprint
Don’t be afraid to cross things out, cut and rearrange, sketch a few ideas and pick the best one
4. CREATE MUST-SEE CONTENT
Option 1: Create a blog using WordPress
Option 2: Create a website from scratch
?
Start building
Don’t be afraid to ask for help or for feedback—collaboration is good!
When you have your website url, tell Lauren so she can open it on the projector for the launch party
5. GO LIVE—THEN DRIVE!
Launch party!
Show off your hard work to friends and family. Consider answering the following questions:
How did you choose the topic for your website?
What tools and technology did you use to build your website?
What was the biggest challenge you faced while building your website? How did you overcome it?
What is your favorite part about your website?
What did you learn while building your website?
