Courtney O'Callaghan 10:04 pm on August 23, 2015

East Bay WordPress Meetup August 23, 2015

Welcome to the East Bay WordPress MeetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. in Oakland, CA. Thank you for looking over the training lesson plans we have created and need help creating. Please post your questions, comments, and observations in the comments.

elurie 10:28 pm on August 23, 2015

hi courtney,
I reviewed the How to Install WordPress on a Server Training Handbook. Here are my comments:
This tutorial is great. It covers how to get ftp access and the troubleshooting part is helpful. The instructions include important explanations along with the step by step, and quiz.
suggestion:
an overviiew list of tasks before the detailed step by step

Might benefit by a list
of links to other codex WP install instructions
https://codex.wordpress.org/New_To_WordPress_-_Where_to_Start
https://codex.wordpress.org/WordPress_Installation_Techniques
https://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install
https://codex.wordpress.org/Installing_WordPress
https://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP
ellentobe 10:39 pm on August 23, 2015

Intro to CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. training handbook

https://make.wordpress.org/training/handbook/theme-school/intro-to-css/

This is a great lesson! You’ve taken a complex topic, which I’m still learning, and made it fairly clear. I’ve got a few suggestions, mainly copyediting notes, but a few conceptual suggestions too.

I think it’s really important to discuss the difference between “Edit CSS” and “Editor” when introducing Jetpack. I also think it’s important to give an intro to Jetpack – what it is, what it’s for, what we’ll be focussing on here, i.e. Edit CSS.

I’ll use square brackets to give an indication of whether my suggestions are for copyediting, concept, etc. Please note in the copyedited suggestions it’s because there were missing letters or punctuation, mainly. Please let me know if you have any questions!

regards
Ellen Tobe
emac@4wdesign.com
================
[COPYEDITING NOTES]
Prerequisite Skills #

Students taking this module will want to have some basic familiarity with the following:

• Installing and activating WordPress themes
• Installing and activating WordPress plugins
• Basic understanding of HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.
================
Teacher Notes #
Set-up: #

• Performing a live demo while teaching the steps to modify the theme CSS is crucial to having the “hands on” understanding of the material.

CONTENT NOTE CONCERNING INTRODUCING JETPACK:
Teacher should be prepared to explain what Jetpack is.
================
Hands-on Walkthrough #
What is CSS? What does it do? #

Welcome to Intro to CSS! Today you are going to learn how to alter the “look and feel” of your WordPress theme by modifying its existing Cascading Style Sheet (CSS) file, as well as write a few new styles of your own.

In practical terms, the code found within your theme’s CSS file determines the appearance of your site by applying style rules to HTML content, which has no style of its own.

One way to visualize this is to think of your site as an HTML “mannequin” and CSS as the “clothing” you put on it. Just like a mannequin’s clothing, you can change the CSS of your site any time you like, without altering its underlying HTML structure.

For example, with just a few lines of CSS (and a few image files) we are able to turn our site into this:
================
Learning the Lingo: Selectors, Properties, and Values #

[copyedit: remove ‘ in “it’s” -correction: “its”]

Like any foreign language, CSS can be made easier to understand by breaking down each “sentence” into its individual components. Here is an example of a common CSS declaration, as well as a diagram of what each CSS component is made of:
================
How to Edit Theme CSS the Right Way #
[Recommendation: would be good to introduce idea of child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/., and state that it’s not needed in this case because Jetpack is being used. ]
================
Finding Your Theme’s Styles #

[copyedit notes]

We are going to focus on modifying styles that are already there, rather than writing our own CSS from scratch. In order to change an existing style, you have to find it first. This can be done using the developer tools already built into your web browser. We will be using Google Chrome for this workshop, but most modern browsers offer similar tools.

It’s important to note that when using the inspector, you can edit your theme’s CSS, but not the HTML. That is because the HTML you see in your inspector is dynamically generated by PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php., and is not something you can directly edit. That’s OK though, because you can do a lot with CSS to modify your site’s appearance, as you will see in the upcoming exercises.

================
[copyedit: add periods at the end of each line for consistency and better presentation]

In the panel below you will see a split view, with:

• Site HTML on the left with the element you selected highlighted.
• CSS rules on the right that apply to that selected element on the right.
• Above is your website, where you can see your changes previewed live.

================
Exercise 2 – Background Colors and Padding

[copyediting]
[6th paragraph down]
Doing this keeps our custom CSS from getting too bloated. Since the other styles for this element are already in the theme’s CSS, we only need to add our custom declaration.
================
[conceptual issue involving Jetpack and editing CSS]

It’s important to emphasis difference between Appearance > Edit CSS and Appearance > Editor. This is always confusing when using Jetpack and can create confusion. In fact, I wish the Jetpack folks would put a note with “Edit CSS” making it something like “Edit CSS using Jetpack.”

“As with last time, be sure to copy the CSS from the inspector to your computer’s clipboard, then navigate to Appearance > Edit CSS and paste in your CSS. It should look something like this.”
================
In the section about adding a logo to the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., with the line
.site-header h1 a, .site-header h2…

I think it would be good to explain why both h1 and h2 are included.
================
Quix
[copyedit notes]
Use . at the end of each numbered line.
Tumikia 12:13 am on August 24, 2015

Hi Courtney,

I reviewed the ‘Intro to CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.’ training from the Theme-school Handbook Training along with Ellen and Nancy.
https://make.wordpress.org/training/handbook/theme-school/intro-to-css/

It is a very good training. Here are my notes:

Assets #
Please add these two tools.
Browser Inspect Element tool
http://www.w3schools.com/css/ is a valuable tool for students and instructors. Students can learn what value a property will take. It also provides information as to whether that value is supported in all browsers.

============

Learning the Lingo: Selectors, Properties, and Values #
Selector Can we be more precise and say “The HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. element that you want to change” rather than “the thing you want to change?”

============

How to Edit Theme CSS the Right Way #
“It is technically possible to locate and edit the existing CSS file that is hosted on your server, but this is a bad idea.” Please add: “That is, unless you’ve created a ‘child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/.’. Learn more about child themes…” So they know there are exceptions to the rule. Sooner or later they will be introduced to child themes.
“We will be using a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party called “Jetpack” to accomplish this task.” Please link to the JetPack plugin (https://wordpress.org/plugins/jetpack/) or at least expound on the tool a bit more. I think instructors will be expected to explain what JetPack is because it isn’t just a CSS tool even though for the purpose of this lesson you are emphasizing this aspect of the plugin. Have Instructor/students confirm JetPack CSS is configured by selecting the Appearance tab in the Dashboard and find Edit CSS.

============

Finding Your Theme’s Styles #
We are going to focus on modifying styles that are already there, (exist),
We will be using For this lesson we are using Google Chrome [Add: and the Inspect Element tool] for this workshop.

“It’s important to note that when using the inspector, you can [Add: preview/] edit the CSS of your theme, but not the HTML.” The inspect element tool allows one to make temporary changes to styles, basically, you get to test them out.

============

Exercises #
How to use Materials? Where do you explain to instructors how to download and use the materials used in this exercise? Or how to set up their environment with these your exercise materials?

============

Exercise 1 – Modifying Fonts
“If you were careful in where you placed your cursor, you should see the HTML starting with Edit CSS and paste in your first lines of custom CSS. When you are done, save your changes, and visit the home page of your site, where you can see your custom styles have been applied.”

I think you should tell them to edit what they copied. For example, text-decoration: none; already exists in their theme’s CSS. They should delete that first rule. Also, it’s good time to remind students that if Edit CSS is missing from the Appearance tab they should now activate JetPack and Configure CSS.
Nancy S Brink 1:37 am on August 24, 2015

Greetings Courtney;
I was one of three people looking over the Intro to CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. training. We might have some overlap in our comments as we were talking with each other about our observations.

First, great module; I think it would give someone a good intro to what CSS is and what’s possible with it. Our critiques have to do mostly with clarifications of things “newbies” or an instructor not confident in CSS or WordPress might not understand. I’ve tried to indicate where in the doc my comments fall. Feel free to get in touch with me if it’s no clear.

1) Explanation of or link to documentation on Jetpack. While they won’t have to activate it for the tutorial, we thought it would be important to understand the scope of Jetpack, and that it’s the specific module “Edit CSS” that needs to be activated, but not modules you don’t want to use. Edit CSS is mentioned in Exercise 1, but there’s no earlier referent. Clarification – Jetpack’s Edit CSS module , or some such — would be helpful.

2) Typos in Teacher Notes:
Pre-requisites: last line: “but has reached”, instead of but have reached
Set up: should it be Jetpack is “installed” automatically in Development Mode? Felt somewhat awkward

3) Learning the lingo: good diagram of the parts of the declaration, but should also point out the important curly braces, colon, and semi-colon (how many times have I suffered through finding that missing detail!) As the lesson instructs people to copy and paste from the inspector, and students won’t be typing in the declarations, I think it would help to point those out.

• A thought — terms like permalink, for example: it slides into the exercises, but isn’t defined. Watch using WordPress specific terms that might not be familiar, without either a quick explanation or a link to more information. Would it make sense to have a link to a glossary in this section?

4) What is CSS
• It might be good to note that CSS can be contained in tags, at the head of a page, or in a linked style sheet, and that the CSS for your theme lives in the style sheet or style.css — that it’s a separate file from the php that generates the htmlHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. (which is mentioned in the lesson.
• You use the term “style rules later in the lesson; you might want a concise explanation of style rule and declaration here.
• It might be good to have a sentence that notes that CSS is an evolving language, and a link to some sort of css reference guide, a css selector and value list, something of that sort, for those whose curiosity has been piqued. This would also help students to figure out what kinds of values a selector will accept, ie none vs 0, if their playing around with CSS.

5) How to Edit your theme the right way
• Make mention of child themes as a more advanced concept; and note difference between Edit CSS, which adds the styles to your theme, and Editor, which shows up right by Edit CSS and could be used accidentally (with consequences.)
• Edit CSS is used here without reference to Jetpack; confusing

6) Finding your theme’s style
• It might be good to be more specific about introducing Inspect Element tool here, when you say “using the inspector.” Perhaps also another line or two explaining how the inspector works; later, it’s noted that these are not permanent fixes, but a way to try things out,to preview the changes wiithout committing in your theme, but it might be good to do that up front.

7) Exercise 1
• in copying and pasting the code from the inspector, might want to be clear that you want to copy and paste the changes or the new declarations, and not copy a duplicate of the already embedded css

8) Exercise 2
• type after rule for article.sticky .featured post {…
— add s to keeps: Doing this keeps…

I think the ID vs Class explanation could be clearer; again, a link to a CSS reference that includes definitions might be helpful, as this is an important but sometimes confusing concept.

9) Exercise 3: adding the image
• possible typo, in sentence right before closeup of url: “your tests site will use”. Should this be test, singular.
• missing word?: After the instruction to add no-repeat: add the word “being”; it forces the image to be displayed once instead of being repeated.

Thanks for this great opportunity; I really enjoyed going through the tutorial and would very much like to do others. I’d also appreciate feedback about the best way to give effective feedback to the tutorial writers. I’ve done a lot of training and writing of training materials (mostly youth-oriented) and know what a hard work it is.

Thanks,
Nancy
Mike Mueller 5:59 pm on September 8, 2015

Hi elurie, ellentobe and Nancy. Thanks so much for the comments and feedback. I compiled them into a doc and shared them with the Training Team.
Speaking of which, we would love to have you join us.
http://wordpress.slack.com/ and then join us at the #Training

Thanks again for your efforts!

Welcome

Meetings (Calendar)

Share this: