Harvard Extension School

• Modern & Mobile Web Design 2: Sass, CSS variables and calc, print stylesheets, advanced media queries, meaty final project (students built their own responsive design framework)

• Intro to CMS: This popular WordPress project course had students building 6 sites during the term and planning 1 site, including e-commerce, custom fields, custom theming, and a final project site.

• Designing Stories for the Web: Taught with Martha Nichols, a journalist, this course was about learning to write well for the web and getting your stories posted online in WordPress. So far as I’m aware, no one else is teaching a course like this one.

In addition to the teaching work, I took the educational video course (which was excellent) and finished my certificate in Learning Design and Technology. This was a series of 4 courses, including an intro to instructional design, adult learning theory, video editing, and a course in online course design.

LinkedIn Learning

• CSS: Display, a short course devoted to a single CSS property.
• HTML & CSS: Linking. How much is there to say about links? A ton, actually – navbars, links, buttons, and all of the associated styling.
• Learning Editor X. Editor X is a web design tool from Wix, targeted at graphic designers who want to make sites without code. It fills a gap that Dreamweaver used to fill. Webflow is a direct competitor.
• Semantic HTML and CSS Code Challenges. A series of 12 challenges to practice semantic HTML and CSS coding, including Flexbox, Grid, and navbars.
• Joomla! 4 First Look. My first Joomla course in 5 years looks at the most recent Joomla 4 release, highlighting the latest features.
• Learning Wix. I first recorded this course in 2019. This is an update.
• HTML and CSS: Creating Navigation Bars. An in-depth course in making responsive navigation bars, including Flexbox layouts, reordering links, centering the logo, dropdowns, hamburger buttons, and other crazy tricks with HTML and CSS - no JavaScript required.
• No Code Solutions for Websites and Apps. This is an update from 2020. To the original 8 no-code technologies, I added another 11 technologies to give you an overview of the exploding no-code space in web design and development, automation, membership, and native apps.
• Learning Webflow, an update of the course I recorded just before the pandemic. This one covers the latest Webflow interface, building a site from scratch.
• No-Code Web Design Weekly. Formerly “Accidental Web Designer,” this course releases a short weekly video about what’s happening around the no-code space. It provides tips for content, marketing, and technology.

I’ve already recorded two courses for release next year, including a more in-depth Joomla 4 course, and an introduction to web design and development.

Here’s a still shot of the temporary dining room recording space I set up for the web design course.

Frontend Masters

• CSS Grid & Flexbox for Responsive Layouts, v2. I recorded this course originally in 2017. Finally this year, I updated this with the latest Flexbox and Grid technologies.
• Getting Started with CSS. This is a project course, building a portfolio using basic HTML and CSS. We use responsive design, CSS grid, Flexbox, and CSS variables to put the site together. It’s great practice for those who are wanting to strengthen their CSS skills.

Here’s a shot of me teaching at Frontend Masters in August, explaining something for the camera.

Other projects

Knowing that I was ending my relationship with Harvard, I signed up for an educational video course. At the same time, I coordinated with LinkedIn regarding appropriate equipment for configuring my studio space. I now have a dedicated room in my home for making video, including a teleprompter, DSLR camera, Yeti X mic, and a nice background for recording.

As a result, I started to dabble in making more YouTube videos and doing some live streaming sessions. They were all really fantastic to do. I’d like to do more, but as you can see above, I’ve been too busy doing other things to spend much time here… so far.

Other various “other” highlights:

• I’m serving as an advisor to 2U’s UX/UI Bootcamp program, talking with them about curriculum periodically.
• Erika Lee and I wrote #30DaysOfHTML and #15DaysOfCSS. These were free email series that were turned into ebooks. They were a ton of work but helped us build a substantial mailing list.
• Erika and I turned our reflection on #30DaysOfHTML into conference talks, speaking at both PSEWeb and at HighEdWeb with our talk “30 Days of HTML: Lessons Learned Presenting Training by Email.”
• Spoke at No Code Conf 2021, talking about planning no-code websites and apps. I gave away some awesome worksheets to walk you through the process.

Next year

• LinkedIn and I have outlined 8 courses for 2022, but that only takes us through August. 😉
• Frontend Masters and I have scheduled “HTML Semantics & CSS Selectors ” to record on March 15.
• I’m starting to work more with other software companies to create training specifically for them.
• I’ve also got my own training platform ready to build, with the first course likely to release early next year.

Keep watching! There will be much more teaching from me coming in 2022 in the realm of HTML, CSS, UX, and no-code technologies.

There’s a world beyond < p >, < a >, and < div >

What is 30 Days of HTML?

Receive one email a day for 30 days, each featuring at least one HTML element.

Expand your HTML repertoire, including element names, required and common attributes, example code, and links to more learning.

It starts April 1, 2021.

[Subscribe to 30 Days of HTML] (https://jen4web.substack.com/subscribe)

Who is this for?

This challenge is designed for those already familiar with HTML syntax but limited in their tag choices.

We cover the 95% of HTML that has a use on many of your web pages, but you don’t know it exists. No paragraphs, lists, and headings here.

But I don’t know HTML… yet

If you want to learn HTML from nothing, I recommend [my free bootcamp at Frontend Masters] (https://www.frontendmasters.com/bootcamp). If you’ve taken the bootcamp already, you will find this series a great next step in developing frontend web development skills.

I have planned my first trip in over a year, pending my full vaccination… which looks increasingly likely!

I’m headed to Minneapolis to give two workshops with Frontend Masters.

August 18-19: [Responsive Web Design with Flexbox & CSS Grid, v2] (https://frontendmasters.com/workshops/grid-flexbox-v2/)
All things responsive design covered here, including Flexbox, Grid, responsive image approaches and solutions, grid systems, and plenty of exercises and challenges along the way. This updates the original course recorded in 2017 with lots of new information, approaches, and CSS properties. As always, there’s a healthy dose of HTML semantics and CSS selectors and specificity along the way.

October 14: [HTML Semantics and CSS Selectors] (https://frontendmasters.com/workshops/semantics-selectors/)
If you’re not fully using all three languages on the front end – HTML, CSS, and JavaScript – you’re missing out on opportunities to make pages more accessible, more compact, and more understandable to humans and robots.

Unfortunately, most of today’s education focuses solely on JavaScript, with a mere nod to HTML and CSS. The result is developer burnout, too much churn in frontend web development, and an obsession with the latest hottest framework. Twitter is rife with developers trashing HTML and CSS, wanting to turn the web into an exclusive JavaScript paradise.

What is most of this animosity based in? A fundamental non-understanding of HTML and CSS. This workshop focuses on all of those pieces you missed at bootcamp back in the day. How do we mark up content semantically? How can we leverage selectors to select what’s in front of us, using classes as a last resort? Finally, participate in the No-Class Challenge: Styling a web page using semantic markup and without the use of classes.

[HTML and CSS: Linking] (https://www.linkedin.com/learning/html-and-css-linking)

Hyperlinks are the foundation of the World Wide Web, but they come in many different flavors. Do you want to link to a specific point in a document? Make a phone call, or send an email? Link from images or dedicated navigation bars instead of text? In this course, instructor Jen Kramer gives you all the tools you need to make those tasks easy. Jen goes over basic links, linking to different files and resources, and linking from images, headers, text, and more. She shows you how you can style links and individual link states using CSS selectors, then goes into how you can make exceptions and create different styles. Jen covers the steps you should take to maintain links and redirect them when necessary.

When LinkedIn asked me to put together a course on links, I thought it was a ridiculous idea. How much could be said about links?

Then I started spelling out All The Things:

• Linking to pages within your site and pages elsewhere on the internet, in new windows/tabs and the same window/tab.

• Links to other things: PDFs and other documents, email addresses, phone numbers.

• Links within the same document (back to top links, links to sections of the page).

• Images as the item to click on to load a link, instead of text.

• Image maps, in which one image contains more than one link.

• The five states of a link for styling purposes: unvisited, visited, hover, active (once the link is clicked but before the page loads), and focus (when the link is selected but not yet clicked).

• Navigation bars, horizontal and vertical.

• Styling text links to look like buttons.

• Checking for link rot.

• Using a robots.txt file to control search engine movement in a site.

• Redirects, both client-side (meta tag) and server-side (301, 302, etc).

Basically, there’s a whole universe of links, and this is the course that covers it all.