MCC Web Design Workshop

MCC Web Design Workshop
May 3-31, 2014

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

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

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

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

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!

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

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.

Day 1 Recap
• Most basic HTML elements

Day 1 Recap
• Parts of an HTML element

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

Day 1 Recap
Parts of a CSS Rule/Ruleset

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

Some adjustments to our
agenda
Day 1: Introductory HTML/CSS
Day 3: Intro to Wordpress

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

Special Characters
http://mozph.me/htmlchar

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

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

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

Day 2 Recap
•Special characters
•Tables
•Forms

Some adjustments to our
agenda
Day 3: Even more HTML and CSS practice/ Intro to
Wordpress

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)

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

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

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

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.

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

• 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

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

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

Our Agenda So Far
Day 3: Even more HTML and CSS practice
Day 4: Intro to Wordpress/Building your
Wordpress site
(Creating more pages)

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

• Is XAMPP installed?
• Is Wordpress installed?

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.

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.

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

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)

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.

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

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

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

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

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

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).

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

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.

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

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.

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

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

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

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.

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

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.

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

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

MCC Web Design Workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to MCC Web Design Workshop

Similar to MCC Web Design Workshop (20)

Recently uploaded

Recently uploaded (20)

MCC Web Design Workshop

Editor's Notes