The document outlines a web design workshop conducted by Faye from May 3-31, 2014, focusing on HTML, CSS, and WordPress. The agenda covers introductory and advanced topics, including creating websites, using web fonts, and transforming HTML into WordPress themes, with practical activities included for participants. Resources for further learning and web hosting options are also provided.

2. MCC Web Design Workshop
May 3-31, 2014

3. Hi! I’m Faye.
• Industrial engineering
graduate
• Mozilla Rep since 2011
• Web enthusiast
• Systems and
procedures staff in a car
manufacturing company
• Education and WoMoz
Team
#MozillaPH #WoMoz

4. My Contact Details
fayetandog@mozillaph.org
@fayetandog
fb.me/fayetandog

5. What we will be doing this May
Day 1: HTML/CSS
Day 2: More HTML and CSS practice
Day 3: Intro to Wordpress
Day 4: Building your Wordpress site
Day 5: Continue building your Wordpress site

6. Some housekeeping…
• Do we have Internet connection?
• Is Firefox installed? 
• Do we have a text editor?

8. Parts of an HTML Element

9. Parts of a CSS Ruleset/Rule

10. Self-study at home
• MozillaPH Education Support Group:
https://www.facebook.com/groups/teachthewebph/
• Remix things on Webmaker.org!
• Try your skills at Codeacademy.com!
• Check tutorials at W3Schools.com!

11. Some housekeeping…
• Do you have the portable copy of Sublime Text
installed?
• Have you created a project folder to put your files in?

12. Day 1 Recap
HTML & CSS
Hypertext Markup Language
Cascading Style Sheet
Languages used to create webpages.
Imagine HTML is used to build a raw house and CSS
is used to create the house’s decorations.

13. HTML & CSS RECAP GAME!

14. Day 1 Recap
• Most basic HTML elements

15. Day 1 Recap
• Parts of an HTML element

16. Day 1 Recap
HTML tags that we have learned
<strong>
<em>
<p>
<img>
<a>
<h1> to <h6>
<ol>
<ul>
<div>
<font> (but do not use this anymore!) use <span> then
add a ‘class’ attribute

17. Day 1 Recap
Parts of a CSS Rule/Ruleset

18. Day 1 Recap
CSS properties that we have learned
display
color
background-color
float
font-size
margin (remember: left top right bottom)
padding

19. WELCOME TO DAY 2!

20. Some adjustments to our
agenda
Day 1: Introductory HTML/CSS
Day 2: More HTML and CSS practice
Day 3: Intro to Wordpress
Day 4: Building your Wordpress site
Day 5: Continue building your Wordpress site

21. Agenda for today
• More HTML and CSS on Thimble
• Special characters
• Tables
• Forms
• Styling divs
• Positioning divs
• Using web fonts
• Working offline
• Creating HTML and CSS files
• Creating your website folder
• Pages on your website

22. Special Characters
http://mozph.me/htmlchar

23. <table>
<th>: table header (column title)
<tr>: table row
<td>: table data
<th> <th> <th>
<td> <td> <td>
<td> <td> <td>
<tr>
<tr>

24. <form>
•Input Types
•Text
•Password
•Radio
•Checkbox

25. Styling <div>
• height
• background-color
• color
• borders
• sides (top, left, bottom, roght)
• border-width
• border-style
• dotted, dashed, solid, double, groove, ridge, inset,
outset
• padding
• margin

26. Day 2 Recap
•Special characters
•Tables
•Forms

27. Some adjustments to our
agenda
Day 1: Introductory HTML/CSS
Day 2: More HTML and CSS practice
Day 3: Even more HTML and CSS practice/ Intro to
Wordpress
Day 4: Building your Wordpress site
Day 5: Continue building your Wordpress site

28. Day 3 Agenda
• Using web fonts
• Working offline
• Creating HTML and CSS files
• Creating your website folder
• Positioning divs
• Pages on your website
• Intro to Wordpress (if time allows)

29. Using web fonts…
• Go to fonts.google.com!

30. Positioning <div>
• http://mozph.me/c1t26c
• Position:
• Static
• Relative
• Absolute
• Float

31. Working offline
1. Create a folder, and name it *your name*’s
Website
2. Create an index.html file.
3. Create a style.css file
4. Create an about.html
5. Create a contact.html

32. ACTIVITY
• Create your very own multi-page website! You may
use Thimble first then copy paste it to your local files
to save time from viewing it in your browsers every
after updating the file.

33. ACTIVITY
• Specifications:
• For index.html
• Create a two-column website with header and
footer. One column shall serve as the sidebar and
thus, it should be smaller in width than the other.
HEADER
SIDEBAR CONTENT
FOOTER

34. • For about.html
• Create a three-column website with header and
footer. Retain the sidebar and two equal columns
one containing a short description of yourself and
your blog, and another containing your educational
background.
HEADER
SIDEBAR ABOUT
EDUCATIONAL
BACKGROUND
FOOTER

35. ACTIVITY
• For contact.html
• Create a non-functional contact form

36. Workshop Folder
•http://mozph.me/Le5eHe

37. Our Agenda So Far
Day 1: Introductory HTML/CSS
Day 2: More HTML and CSS practice
Day 3: Even more HTML and CSS practice
Day 4: Intro to Wordpress/Building your
Wordpress site
Day 5: Continue building your Wordpress site
(Creating more pages)

38. Day 4 Agenda
• Intro to Wordpress
• Intro to PHP
• Wordpress Syntax
• How to make your HTML site work on Wordpress

39. Some housekeeping…
• Is XAMPP installed?
• Is Wordpress installed?

40. Wordpress 101
• Wordpress is an open source blogging and
Web content management system (CMS).
• Wordpress.com – Blogging platform that
focuses on the usage of it. Wordpress
handles all the nitty-gritty setup. You need
to pay to customize it better.
• Wordpress.org – Site where you can
download Wordpress and get support on
using the Wordpress platform in your own
websites. Totally free, but you have to take
care of everything yourself, including your
web host.

41. Why Wordpress?
• How is it different with Tumblr, Blogger, Livejournal
etc.?
• The Wordpress publishing platform can be
downloaded and used independently for your
website.
• Excellent customization options with plugins.
• Excellent community support.

42. Let’s learn to transform your
HTML pages to Wordpress
themes!

43. But first…
Let’s learn the building blocks of
Wordpress— PHP and MySQL!
(don’t worry we’ll just go through the basics for you to understand
what is happening)

44. PHP
• PHP means PHP: Hypertext Preprocessor (crazy,
IKR, it’s called a recursive abbreviation)
• It is a scripting language (remember HTML being a markup
language?)
• PHP files contain HTML, CSS, JavaScript and PHP code
• It is executed on the server.

45. Basic PHP Syntax
A PHP script starts with <?php
and ends with ?>

46. Basic Wordpress Files
• Wordpress themes are composed of a folder of template
files, which controls a specific part of your theme.

47. Basic Wordpress Files
• header.php - This file will contain the code for the
header section of the theme;
• index.php - This is the main file for the theme. It will
contain the code for the Main Area and will specify
where the other files will be included
• sidebar.php - This file will contain the information
about the sidebar
• footer.php - This file will handle your footer
• style.css - This file will handle the styling of your
new theme

48. Header.php
• Simply the header.
• This is where you put the opening <html> tag.

49. Index.php
• The code begins with <?php get_header(); ?> which will
include the header file.
• Next is the loop code to check whether you have posts. If
you have one, it will appear. If none, ‘Sorry, no posts
matched your criteria’ will appear.
• <?php get_sidebar(); ?> will include the sidebar file
• <?php get_footer(); ?> will include the footer file

50. Sidebar.php
• In our example, we use internal WordPress functions to
display the Categories and Archives of posts. The
WordPress function returns them as list items, therefore we
have wrapped the actual functions in unsorted lists (the <ul>
tags).

51. Footer.php
• Simply the footer.
• Don’t forget to close the <html> tag here!

52. Activity
• Create your very own one-page Wordpress site!
You may search for Wordpress tutorials or ask your
mentors if you want to go a little faster on learning
Wordpress.

53. Activity
1. Run MySQL on XAMPP
2. Go to C:xamppappswordpresshtdocswp-
contentthemes and create your own theme folder
3. Create your theme!

54. Day 4 Recap
• We learned…
• About Wordpress
• How to make your basic HTML website work with
Wordpress (copy paste powers!)
• For the purposes of this workshop, we didn’t learn
about the essential PHP theories and concepts, we
just have to know how the Wordpress syntax (which
consists of PHP codes) work as to not intimidate you.
• You can just copy and paste the codes! At least for
now. But remember, if you are learning how to
program, it is essential you type codes.

55. Day 5 Agenda
• Wordpress features
• Posts (draft, private, password protected), pages,
categories, tags, plugins, users, privacy options
• Wordpress resources
• Theme downloads, free plugins
• Web hosting and domains

56. Wordpress Dashboard
• Posts
• Categories- the ‘table of contents’
• Tags- ‘index of the book’
• Media
• Wordpress’ way of organizing all your media
uploads

57. Wordpress Dashboard
• Appearance
• Themes- choose/upload a theme
• Customize- use your theme’s customization
features. It varies depending on the theme’s
features
• Widgets- find things you can download! Can be
added to the sidebar, footer etc.
• Menus
• Theme Options- depends on the theme
• Editor

58. Wordpress Dashboard
• Appearance
• Themes- choose/upload a theme
• Customize- use your theme’s customization
features. It varies depending on the theme’s
features
• Widgets- find things you can download! Can be
added to the sidebar, footer etc.
• Menus
• Theme Options- depends on the theme
• Editor

59. Wordpress Dashboard
• Plug-ins
• Users
• Super Admin – access to the site network
administration features and all other features.
• Administrator – access to all the administration
features within a single site.
• Editor – publish and manage posts including the
posts of other users.
• Author – publish and manage their own posts.
• Contributor – write and manage their own posts
but cannot publish them.
• Subscriber – only manage their profile.

60. Wordpress Dashboard
•Tools
•Settings
•You can edit basic Wordpress settings
here including blog name, privacy etc..

61. Theme and plug-in resources
• You can search at Wordpress.org or any other sites
like fabthemes.com etc. Google is your bestfriend!
• Make sure what you’ll download is a ZIP file. You
can upload it directly to your websites.
• You can just download those free themes and edit it
to your liking.
• You may buy paid themes as well.

62. Web Hosting
• Paid web hosting fit for a personal/ low-bandwidth
site costs Php 2k- 5k a year
• Domains costs around Php 500 a year
• There are free options but very restricted and not so
reliable.
• Recommended: Hostinger.ph

63. •http://bit.ly/hostingerph

64. Further reading/ practice
• Learning HTML and CSS
• http://w3schools.com
• http://codecademy.com
• Learning Wordpress
• http://codex.wordpress.org/Getting_Started_with_W
ordPress
• http://wp-cheatsheet.com/
• http://webdesignerwall.com/tutorials/complete-
wordpress-theme-guide
Learning PHP
• http://www.codecademy.com/tracks/php

65. webmaker.org