Proposal: Intro to CSS training module

Hi, I’m Jerry, and I have been hanging out in the last few IRC chats, and recently brought up that I wanted to work a CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. module to compliment the 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/. module that is nearing completion. In case you were not at those meetings, I wanted to recap here, so I can get as much feedback as possible

Who is the Intro to CSS module for?

Before WordPress users are ready to take those first steps into theme development (like creating a child theme) one of the first places their exploration begins is with a desire to tweak the “look and feel” of your site. So something like:

“I found a theme that is close to what I want, but I really wish I could change the size of my headings, or the background color of my widgets, but have no idea how.”

This module would be aimed at that person: a non-coder who have maxed out what they can do in wp-admin, and are ready to take those first step into the world of theme design by modifying their existing CSS.

This module would ideally cover the following:

What is CSS? What does it do?
Learning the lingo: Selectors, properties, and values
Getting set to edit: How to edit theme CSS the right way
How to your browser’s developer tools to find your theme’s CSS
Three exercises covering simple CSS modifications (TBD)
Intro to CSS self-quiz

Small Problem: How do you hack on CSS without a child theme?

When it comes to changing a theme’s CSS, there is one small but important caveat that we all know: Hacking on actual theme files is bad, bad, BAD! So, what is the best way to get students up and writing their first lines of CSS as quickly as possible? We could have them set up a quick child theme, but the problem with that is:

It may be a little too early to introduce that concept
It would take valuable time away from the lesson to set up (plus FTPFTP FTP is an acronym for File Transfer Protocol which is a way of moving computer files from one computer to another via the Internet. You can use software, known as a FTP client, to upload files to a server for a WordPress website. https://codex.wordpress.org/FTP_Clients. access)
We already have a module that covers this better and in more detail

So with that in mind, it probably makes sense to install a CSS editor 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 instead, which is quick, easy, and gets students straight to the good stuff. But…

Which CSS editor plugin?

Here are a few that I could think of, what do you think would be the best to use?

#1 Jetpack – On the plus side it comes with a great CSS editor, with easy access to revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision., but as a negative it requires a WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ account, which not everyone may have or want.

#2 CSS Plus – This is in the repo, so easy to access and requires no sign-in; however, I have no experience with this one, so testing would be a good idea before incorporating it into the lesson plan.

#3 Codepen.io – This gets away from the idea of tweaking the theme directly, but would it be better to not even go into the wp-admin in the first place? This would place the focus on the CSS, and may be easier than setting up test sites, downloading plugins, etc. However, like Jetpack, it would require an account creation step for some, and, well, it’s not WordPress.

Really those seemed like the best choices, but what do you think? Is one better than the others? Am I missing any other options that are worth considering?

Want to help? You can!

Is a CSS module something you would be interested in helping with? To get us started we can leverage some of the CSS materials available at en.support.wordpress.com (adapted to fit a self-hosted environment) but if you have any ideas to make this even better, or would like to help develop this module, please speak up in the comments

You can also say hi at our next IRC chat Tuesday at 18:00 UTC in #wordpress-getinvolved on IRC freenode. 🙂

#wcus

Tracy Levesque 7:13 pm on June 8, 2014

I don’t think you need to focus around how to edit CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. in a WordPress context too much. You can mention those plugins at the end and link to the 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/. module. I think the focus should be on CSS itself, like what it is, how you use it, etc.

@courtneydawn Created a page for you under “Modules in Progress” feel free to start building it out 🙂
- jerrysarcastic 6:32 pm on June 10, 2014
  
  Cool, thanks! I would prefer to make this very WordPress specific, rather than just go over CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. training without the context. However, I actually think there is room for two such modules on CSS like this
  
  My reasoning with this module: I think back to when I was first starting out, and really my curiosity to truly learn CSS (as a discipline) came out of explorations that started much more simply than that. Changing font colors, backgrounds, and other simple things have a lot of immediacy when you see them writ large across the site whenever you refresh your browser.
  
  To me at the time (and even today) seeing those changes is more *magical* than CSS exercises in a code sandbox, and ultimately what got me “hooked.”
  
  I think that sandbox-style exercises comes a bit later (as it did for me) and definitely has it’s place, so let’s do a module like that too. 🙂
Courtney O'Callaghan 7:45 pm on June 8, 2014

I like the structure of the module you have proposed. I think using jetpack as the teaching tool is the best way to go. We aren’t teaching plugins or “CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. in WordPress,” but we need a space to be able to show CSS in a WordPress environment.

Welcome

Meetings (Calendar)

Proposal: Intro to CSS training module

Who is the Intro to CSS module for?

Small Problem: How do you hack on CSS without a child theme?

Which CSS editor plugin?

Want to help? You can!

Welcome

Meetings (Calendar)

Who is the Intro to CSS module for?

Small Problem: How do you hack on CSS without a child theme?

Which CSS editor plugin?

Want to help? You can!

Share this: