![\"Mastodon](\"https://cdn.uploads.micro.blog/33464/2022/32a15022de.png\")
At AnnieCannons, we teach Grid as the first tool to use in layouts. It’s designed for laying out web pages. Flexbox is useful when the space between elements is the most important thing to maintain (as in a navbar). Grid is used for everything else.
\nPeriodically, we get a student questioning our approach. I’ve also had other developers question what I teach.
\nThe longer and bigger question is why is everyone pushing back on Grid as the appropriate method for web page layout? Flexbox must be right because that’s what I learned in bootcamp, and that’s also what every influencer is saying, so it must be right.
\nThe answer is complex:
\nUnfortunately, around the cycle goes again, with developers never moving on from Flexbox because their influencers haven’t told them to do so.
\nIn order to get Flexbox to work for a grid-like layout, one must apply either a width (wrong) or flex-basis (better!) to each cell, thus killing the “flex” in Flexbox. If you have to do this, why would you use anything but Grid?
\nI am the first to line up behind “keeping things simple” when teaching beginners a development world which is nothing but nuance and complexity. One of the best things we can do as educators is draw a bright line between use cases. Why do Flexbox layouts persist? Beca**use our current bootcamp instructors can’t articulate why Grid is best for grid-based layouts. ** Are you kidding me?
\nHopefully I’ve outlined some easy bright lines you could share with your students. Please stop telling students that “Grid is really optional, and we don’t know the difference between the two, so just learn whatever.”
\n", "date_published": "2024-09-01T11:59:42-04:00", "url": "https://learntoteach.tech/2024/09/01/grid-is-your.html", "tags": ["Rants"] }, { "id": "http://jen4web.micro.blog/2024/09/01/neither-highered-programs.html", "title": "\"Neither higher-ed programs nor bootcamps drive a standards-first curriculum.\"", "content_html": "I agree with this, most of the time.
\nBut we are driving a standards-first and trauma-informed curriculum.
\nAnnieCannons trains, prepares, and connects individuals who have experienced human trafficking to sustainable careers in tech.
\nWe rebuild our students' confidence in themselves, reignite their joy of learning, and provide an environment where they may trust their community to teach them the economic skills to obtain and keep a career in a field with reasonable pay.
\nFor those reasons, we can’t teach to the latest hottest technology. It has no track record and may not be there tomorrow. Therefore, we teach the basics: semantic HTML, foundational CSS, and vanilla JavaScript. After they learn vanilla JavaScript, we introduce them to a bit of React, plus connecting to databases and APIs (making them “full stack” for the employers who value such things).
\nOur students are all races, genders, and ages. We accept them as they are. As such, it is part of our values to teach accessibility from the start, integrated into their code, starting with semantic HTML.
\nOur students learn to start with HTML, then apply CSS, then apply JavaScript sparingly over top to provide the levels of interactivity required and no more.
\nWe are writing this curriculum now. Our students are learning this curriculum now, and they are thriving because of it.
\nI arrived at AnnieCannons with the goal of creating the best bootcamp curriculum on the planet. With our small and mightly team of amazing instructors, student success managers, and career development managers, we are succeeding and growing our standards-first, trauma-informed curriculum.
\n", "date_published": "2024-09-01T09:02:39-04:00", "url": "https://learntoteach.tech/2024/09/01/neither-highered-programs.html", "tags": ["Rants","Personal reflections"] }, { "id": "http://jen4web.micro.blog/2024/05/21/released-the-only.html", "content_html": "Released! The only course on CSS Grid you’ll ever need, today from Frontend Masters. Includes demos and plenty of challenges, Flexbox, container queries, minmax, subgrid, and responsive images. Watch the course.
\n![\"\"](\"https://cdn.uploads.micro.blog/33464/2024/thumb.webp\")
\n",
"date_published": "2024-05-21T13:40:07-04:00",
"url": "https://learntoteach.tech/2024/05/21/released-the-only.html"
},
{
"id": "http://jen4web.micro.blog/2024/04/21/the-only-two.html",
"title": "The only two things you get out of academia or bootcamp",
"content_html": "Whether you’re learning how to code at a bootcamp or through academia, there are only two things you ultimately get from the experience.
\nFirst, you get an amazing network of friends who are committed to helping you early in your career.
\nYour institution’s alumni program offers assistance with resumes, job searching, online webinars, and an institutional name that gives you something in common with other graduates. Some programs partner with specific employers, waiting to hire graduates.
\nSometimes the alumni program has a time limit on it, particularly with bootcamps. Take advantage of this. You’ll never have anyone else who can be this helpful in finding you a job.
\n![\"Jen](\"https://cdn.uploads.micro.blog/33464/2024/gettingstartedcssposter1.jpg\")
\nSecond, you learn how to learn technology.
\nYour tech education starts expiring while you’re in school! Techniques you learned early in the program may be out of date by the end. (They may also teach you dated techniques, but that’s a rant for another time.)
\nIf you don’t keep learning and practicing your tech skills, you’ll be out of the field. Within 6 months, your education is dated enough that it will be hard to jump into the workplace. In a year, you’re completely out of date and will have a significant learning curve to jump back in.
\nBut I’m watching video education from X provider in class – I could do this on my own without school!
\nTrue. But you don’t get the two items above, which are extremely valuable to getting into the field quickly.
\nFurthermore, someone curated those resources. They told you what resources had the most value. They are teaching you where to look when it’s time to learn a new skill. They are choosing resources that are (hopefully) factually based, up-to-date, and reflect current thinking in the field. Anyone can post videos on YouTube and post courses to Udemy… and they frequently do. Boasting 75 hours of learning time does not make those materials good. It just makes them long.
\nWhen people say you could learn X on your own and you don’t need school, they are correct. School offers you the structure and accountability to get it done, though. And you’ll never get the resource curation, alumni network, or practice in learning that you get at school. Consider this as you’re trying to decide how to get into the field.
\n", "date_published": "2024-04-21T11:04:36-04:00", "url": "https://learntoteach.tech/2024/04/21/the-only-two.html", "tags": ["Rants","Teaching Tips","Teaching Reflections"] }, { "id": "http://jen4web.micro.blog/2024/02/29/indeedcom-and-scammers.html", "title": "Indeed.com and scammers", "content_html": "The scammers are getting really good. I’ve been looking for a job for quite a while. And this shows up in my inbox today!
\n\n\nDear Jen,
\nI'm Ashley Brian, Human resources manager at Love Classic Fashion.
\n
\nWe are currently seeking an innovative and dedicated graphic designer to work via a remote base that can work either part-time or full-time.I saw your profile on Indeed.com and I was impressed by your experience.
\n
\nHere at Love Classic, we are always looking to grow our teams with talented people and achieve great things together.I think that your expertise in graphic design would help us in the project we’re working on. I’d love to tell you more about the opening position and learn a few things about you as well.
\nI am available anytime between 9:00am
\n
\n5:00pm (EST), Monday through Friday.Work hours or Shift: Monday to Friday, 8:30 am - 5: 30 pm.
\n
\nPosition Pay Range : $25 - $50/ hr
\nI hope you have a great day.Looking forward to hearing from you.
\nSincerely,
\n
\nAshley Brian, SHRM-SCP | Love Classic
\nHuman Resources Manager
\n3760 Arlington, VA 22203
This email came from info@loveclassicjobs.store
\nSounds legit, other than that graphic design thing, doesn’t it? Let’s go through how you can check on this.
\na. info@loveclassicjobs.store – take the end of that email address and put it in a web browser. What do you get?
\n![\"Loveclassicjobs.store](\"https://cdn.uploads.micro.blog/33464/2024/loveclassicjobs.jpg\")
\nOK, well… maybe they use a different URL for job hunting?… because they get so many applications a regular email doesn’t work for them?… which is why they’re emailing me and asking me to work at a low rate?…
\nb. Love Classic is a clothing store with a basic website. No idea why they’d need a graphic designer. If you check their career page, there is no job listed.
\nc. SHRM-SCP is a HR certification, so this makes sense in the name. He/she is a Human Resources Manager. But in the first line of the email, she/he is a Human resources manager. Also, do HR managers do any recruiting these days? Maybe if the job is small enough, I guess?
\nd. If anyone is listed on LinkedIn, it’s a HR manager/recruiter. Put “Ashley Brian” in the search, and you turn up zero results. Zero! There are Ashley Bryans, but no Ashley Brians.
\ne. And did anyone else nearly miss the address line in the signature? “3760 Arlington, VA 22203” No street name. Cool cool.
\nFor a long time, scammer emails were fairly identifiable. They didn’t write well, with lots of misspellings, odd phrasing, and strange requests.
\nNow with AI, scammers can sound perfectly legit. The problem is that they still might not know how a US address works, or how to check someone out on LinkedIn, or how to double-check the email address’s matching website.
\nWhat hasn’t changed is that if it sounds too good to be true, it probably is. And I assure you, no one has ever wanted to hire me for my graphic design skills. 🤣
\n", "date_published": "2024-02-29T12:09:37-04:00", "url": "https://learntoteach.tech/2024/02/29/indeedcom-and-scammers.html", "tags": ["Rants","Personal reflections"] }, { "id": "http://jen4web.micro.blog/2023/09/06/goodbye-molly.html", "title": "Goodbye Molly.", "content_html": "Molly passed away yesterday. Here’s my Molly story.
\nI started to learn CSS in 2003, when Eric Meyer was teaching it via an online course. I understood enough to know it would be a game-changer for the web, but not enough to really understand it.
\nFortunately, Molly published a book that taught me what I needed to know. I recommended it to my students. Together, we learned the earliest CSS in 2004, in room 2North at the Graduate Center of Marlboro College. I taught four Saturday morning workshops helping people learn what this CSS thing was – and in the process, taught it to myself.
\nLater in 2004, I heard about the UI Conference in Boston, hosted by Jared Spool and his agency, UIE. Eric Meyer, Molly Holzschlag, and other amazing speakers would be there. As a freelancer, I could afford the thousands of dollars price tag, but I could go for free as a volunteer. I stayed with a friend and lingered at the edges, amazed I was so close to these people who had been in the business forever and knew so much.
\nMolly’s books were a standard recommendation of mine for many years in those early days. While Jeffrey Zeldman taught me the strategy, reasoning, and importance of web standards, Molly taught me how to get it done. I incorporated all of this into my teaching, instructing class after class of the importance of following standards.
\nYears went by. The iPhone came out, responsive design hit the scene, software products rose and fell. Even WaSP declared their job complete. But those early days of standards stayed with me and formed my thinking to this day.
\nIn 2016, I spoke at CSSconf – and there was Molly. I finally felt like I had earned the right to speak to her, and we had a wonderful conversation. We were both so concerned about how JavaScript had eaten the web. We were shocked at how one speaker described – with great pride! – how he had managed to kill the cascade in his code, and he was hoping to kill inheritance next.
\nMolly, a better teacher than me, approached the speaker and talked with him for a long time. She figured out he didn’t actually know CSS, especially the cascade or inheritance. He wanted stylesheets, not the kind that cascaded. Her conversation inspired my next round of talks and courses, focused on the (very old) topic of how the cascade and inheritance works.
\nI didn’t see Molly in person again, although we’d had many online conversations afterwards.
\nMy deepest thanks to Molly, one of my earliest teachers. I continue to emphasize the importance of HTML and CSS and how the web should work, the importance of standards, the importance of loving our students and understanding their misconceptions. Thanks for the passion, the big laughs, the books, and your love of the web.
\n", "date_published": "2023-09-06T09:26:59-04:00", "url": "https://learntoteach.tech/2023/09/06/goodbye-molly.html", "tags": ["Personal reflections"] }, { "id": "http://jen4web.micro.blog/2022/11/24/an-observation-seen.html", "title": "HTML is the hardest language to master", "content_html": "An observation seen on Mastodon:
\n
My responses:
\nExcept for perhaps you and me, no one really teaches HTML. Students are told here’s the syntax, here’s p, a, span, div. Apply these elements and see how this looks. Right from the beginning, students are taught that HTML is about looks, not meaning.
\nBecause HTML-only web pages look boring, almost immediately students are taught CSS, which (mostly) overrides the HTML look. Students conclude that HTML doesn’t matter as its look is overridden by CSS anyway.
\nThen when they get to JavaScript, they learn that HTML is merely a structure on which they hang their JavaScript events and such.
\nPrior to 2008 or so, most devs came to the web via HTML and CSS, then JavaScript. We taught separation of powers and spent more time on HTML. We taught HTML is not about the look.
\nAfter 2012, most devs came to the web through JavaScript first or almost first. Almost no time was spent on HTML and CSS because future devs learned that JS was the exciting part.
\nOnly now after 10 years of this relentless emphasis of JavaScript are devs realizing that HTML and CSS are 2/3 of the front end and may deserve some time and attention. Only with the recent emphasis on accessibility are devs finally understanding that HTML has some useful characteristics that come for free. There’s no need to program each div with aria this or role that. And 75 layers of nested divs may be a bad thing.
\n", "date_published": "2022-11-24T12:35:56-04:00", "url": "https://learntoteach.tech/2022/11/24/an-observation-seen.html", "tags": ["Rants","Teaching Reflections"] }, { "id": "http://jen4web.micro.blog/2022/10/27/interactions-on-discussion.html", "title": "Flexbox Froggy is a horrible way to learn Flexbox", "content_html": "Interactions on discussion boards hundreds of times a day…
\n![\"Person](\"https://cdn.uploads.micro.blog/33464/2022/4127c4089a.png\")
\nFlexbox Froggy is not a good way to learn Flexbox. Yes, it asks students to recall values for properties associated with Flexbox. Yes, it gives you an adorable visual for how those properties and values impact the layout of frogs on lily pads.
\n![\"Screenshot](\"https://cdn.uploads.micro.blog/33464/2022/703a666670.png\")
\nLevel 8: Frogs are not quite aligned with their lilypads to start.\n![\"After](\"https://cdn.uploads.micro.blog/33464/2022/e158400745.png\")
\nAfter typing in the appropriate Flexbox CSS properties and values, the frogs align to their lilypads. Adorable.\nLevel 8, shown above, involves the flex-direction CSS property, which has a series of possible values. All of this is explained above the window for typing in the appropriate code to align the frogs to the lilypads.
![\"Flexbox](\"https://cdn.uploads.micro.blog/33464/2022/c34e170390.png\")
\nIs the game fun? Absolutely! Students engage with the game quickly and easily. (Yes, also Flexbox Zombies and Flexbox Defender, which are similar games to teach Flexbox properties, with similar flaws to Flexbox Froggy.)
\nDo students know Flexbox once they reach level 24, the last possible level? No.
\nTeaches is a strong word.
\nFlexbox Froggy asks students to remember specific CSS properties and the appropriate value to solve layout problems.
\nStudents may understand or recognize where to place these properties to achieve prescribed layouts. Levels 1-23 all tell the students which properties will solve the presented layout problem. It does not always present the possible properties, asking students to remember those properties.
\nLevel 24, the last level of the game, is unique in that it asks students to apply any of the properties to solve the final layout problem. This is the only level where there are possible incorrect properties provided.
\nBecause these words are the basis of Bloom’s Taxonomy, a way of describing levels of learning and their depth.
\n![\"Bloom's](\"https://cdn.uploads.micro.blog/33464/2022/8b37229b16.png\")
\nArmstrong, P. (2010). Bloom’s Taxonomy. Vanderbilt University Center for Teaching. Retrieved October 28, 2022, from https://cft.vanderbilt.edu/guides-sub-pages/blooms-taxonomy/.\nApplied to the coding world, these first three levels of Bloom’s refer to concepts like:
\nSounds basic, no? That’s because it is. What if we had some other formats to truly bring learning to the students once they were introduced to the Flexbox properties and values?
\nFinally, consider Flexbox’s critical parent/child (or flex-container/flex-item) relationship in HTML elements. Depending on where display: flex; is declared, that HTML element becomes the flex container. Its immediate descendents are flex items. Grandchildren and deeper descendents are unaffected. This directly impacts the styling of the page and is one of the biggest overlooked and misunderstood concepts when learning Flexbox. However, Flexbox Froggy never touches this discussion, focusing mostly on flex container properties. (Indeed, order, a property that specifically applies to children, is mixed with the parent properties. This amplifies learner confusion as this property “doesn’t work” when applied to the parent.)
Try my CodePen which emulates Level 24 in Flexbox Froggy. Match up the colors in the appropriate layout where the comment indicates. Can you do it? If not, why?
\n“Uh, I’m not a CSS expert.” Mmm hmm.
\nIf we look at almost any “teaching resource” for learning code, you will find similar problems. Coding instructors are all over the remember, understand, and apply levels of Bloom’s Taxonomy.
\nThen the instructors immediately jump you to create. “Now that you know everything about Flexbox, go lay out a web page. Have fun!”
\nWhat happened to analyze and evaluate?
\nThese are the levels where deep thinking happens. Now that you have a general idea of how a concept works, it’s time to dig in further. Do you really understand what was taught to you? Can you predict what happens if certain properties or values are applied to a layout? Can you debug incorrect code? Can you provide an explanation about why this code works – or why that code doesn’t?
\nThis is what’s missing in today’s coding education. It is assumed students are equipped to do this work on their own. It’s assumed they know this is what comes next, and it’s assumed that they will do it.
\nUnfortunately, students do not know that this is what they should do next, and they don’t know how to ask these questions. The instructor must lead through these levels, increasing student independence, before turning students loose on their own creative projects.
\nExpect to hear more from me about this over the coming months.
\nIf you want to hear more about how to teach well online, be sure to subscribe to my Substack newsletter that covers these topics.
\n\n", "date_published": "2022-10-27T16:26:37-04:00", "url": "https://learntoteach.tech/2022/10/27/interactions-on-discussion.html", "tags": ["Rants","Teaching Tips","Teaching Reflections"] }, { "id": "http://jen4web.micro.blog/2021/12/08/retrospective.html", "title": "2021 retrospective", "content_html": "\nTime for the 2021 retrospective on what was accomplished this year. To what may we point as evidence of work completed?\nModern & Mobile Web Design 2: Sass, CSS variables and calc, print stylesheets, advanced media queries, meaty final project (students built their own responsive design framework)
\nIntro 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.
\nDesigning 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.
\nIn 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.
\n![\"Certificate](\"https://cdn.uploads.micro.blog/33464/2021/a66638b96f.png\")
\n 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.
\nHere’s a still shot of the temporary dining room recording space I set up for the web design course.
\n![\"Jen](\"https://cdn.uploads.micro.blog/33464/2021/ce5d048daf.jpg\")
\nHere’s a shot of me teaching at Frontend Masters in August, explaining something for the camera.
\n![\"Jen](\"https://cdn.uploads.micro.blog/33464/2021/edb6367f40.jpg\")
\nKnowing 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.\n![\"Jen's](\"https://cdn.uploads.micro.blog/33464/2021/31801a32f2.jpg\")
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.
\nOther various “other” highlights:
\nKeep watching! There will be much more teaching from me coming in 2022 in the realm of HTML, CSS, UX, and no-code technologies.
\n", "date_published": "2021-12-08T14:17:00-04:00", "url": "https://learntoteach.tech/2021/12/08/retrospective.html", "tags": ["Teaching Reflections","Course release","Personal reflections"] }, { "id": "http://jen4web.micro.blog/2021/11/29/day-expert-placement.html", "title": "Day 3: Expert placement of equipment", "content_html": "Today’s work took about 2 1/2 hours. Because the equipment was out of the box, we spent the time placing desks, chairs, camera, lights, and other materials. We also tested the video and audio.
\nThe LinkedIn Learning team is based in Carpinteria, CA, while I’m in Boston. We’re separated by 3000 miles and 3 time zones. I moved the equipment and placed it and positioned it as they described. While setting this up, we had 3 cameras showing the scene. Two were the built-in webcams on the two computers (one mine, one theirs). The third camera was the DSLR itself, showing through the camera’s filming software.
\n![\"Teleprompter,](\"https://cdn.uploads.micro.blog/33464/2021/fdad07a40d.jpg\")
\n![\"Looking](\"https://cdn.uploads.micro.blog/33464/2021/bd099b5793.jpg\")
\n![\"Sitting](\"https://cdn.uploads.micro.blog/33464/2021/e4e01f47c1.jpg\")
\n\nSunday afternoon fun – unpacking for tomorrow’s tech check and configuration.
\n![\"Dining](\"https://cdn.uploads.micro.blog/33464/2021/3b7b1d7fab.jpg\")
\nThis is nowhere near the final configuration for the room, but things are generally in place.
\nI’ll be recording a live action course with LinkedIn Learning from November 29 to December 3.
\nIn non-pandemic times, this would mean flying to Carpinteria, CA, then working with a film crew for a week on a stage in a controlled environment. It’s quiet, the lighting is always perfect, the passing of time is not obvious as the stage always looks the same.
\nIn pandemic times, I’m at my home in Watertown, Massachusetts, just outside of Boston. LinkedIn sends me boxes of gear, which I set up. As they say, “Jen, you’re the grip and the talent.”
\nA grip is the film crew member that is tasked with moving things, assembling them, taking them down, and so forth. They don’t run the camera, nor do they run the sound, but they may put the tripod in the right location.
\nWho runs the camera? The film crew is in California, 3000 miles away. They run the camera over the internet. It is an amazing setup.
\nI’ll document the process over the next few days.
\nFirst, you must prepare a space for the filming to happen. My dining room is relatively easy to rearrange and prepare. I’ve brought in a small, glass desk for the set. My dining room table is moved out of the way, and there are chairs all over.
\n![\"The](\"https://cdn.uploads.micro.blog/33464/2021/43ca20eeb8.jpg\")
\n![\"The](\"https://cdn.uploads.micro.blog/33464/2021/28d59b9cd7.jpg\")
\n![\"Three](\"https://cdn.uploads.micro.blog/33464/2021/16a7edb7aa.jpg\")
\n🚿 [Worksheets] (https://jen4web.notion.site/jen4web/Planning-Successful-No-Code-Websites-Apps-efd3651dfd124bdd9a4b04ca0c93ed7b)
\n📷 [Slides] (https://www.slideshare.net/jen4web/5-steps-to-effective-planning-for-your-nocode-website-or-app)
\nHow often do you get distracted by the latest no-code tool? Do you start with technology first, solving problems later? Or do you start with a problem but give up quickly, because you just can’t figure out the ““perfect”” solution with so many choices out there?
\nBased on my Harvard course and book, I’ll walk you through how to define goals, audience, features and functionality, data flow, and brand to create an executable outline of work for your next project, complete with a clear outline and worksheets. With this plan in place, you’ll gain more confidence than ever in launching your next project and you’ll feel empowered to build more effectively!
\nJen Kramer (she/her), HTML, CSS, and no-code training for all, JenKramer.org\nJen Kramer has been teaching & practicing web design for over 20 years. Formerly an award-winning Harvard lecturer, she’s currently a freelance no-code, HTML, and CSS educator. She has also created over 60 courses for LinkedIn Learning, Frontend Masters, and more.
\nPresented at Webflow’s No-Code Conference 2021, November 17, 2021.
\n", "date_published": "2021-11-17T17:52:00-04:00", "url": "https://learntoteach.tech/2021/11/27/best-steps-to.html", "tags": ["NoCode Reading"] }, { "id": "http://jen4web.micro.blog/2021/08/31/124830.html", "title": "Upcoming talk at No-Code Conf", "content_html": "How often do you get distracted by the latest no-code tool? Do you start with technology first, solving problems later? Or do you start with a problem but give up quickly, because you just can’t figure out the “perfect” solution with so many choices out there?
\nJen Kramer presents five steps to effective planning for your next no-code website or app. Based on her Harvard course and book, Jen will walk you through defining goals, audience, features and functionality, data flow, and brand to create an executable outline of work for your next project. Stay on task and reach success with a clear outline of process and worksheets to walk you through each step. Gain confidence in creating your next project and build more effectively with a plan.
\n\n", "date_published": "2021-08-31T12:48:00-04:00", "url": "https://learntoteach.tech/2021/08/31/124830.html", "tags": ["Tools Website builders","Tools General","Tools Web app builders"] }, { "id": "http://jen4web.micro.blog/2021/08/24/happy-th-anniversary.html", "title": "Happy 20th Anniversary, Marlboro College ISM Class of 2001", "content_html": "Twenty years ago, Barbara Hall and I (among many others) graduated from The Graduate Center at Marlboro College with a MS in Internet Strategy Management.
\n![\"Jen](\"https://cdn.uploads.micro.blog/33464/2021/bce4b3e6a3.jpg\")
\nThe class of 2001 was one of the biggest in the history of the school, with three separate sections of roughly 20 students each as we started. As we arrived, I remember employers salivating over all of us, wanting to hire us as soon as we were done, even visiting us the first day of school. Alas, the “dot bomb” was well underway, having started with the stock market crash in March 2000.
\nWe had students from all over, literally flying to class every other weekend, from Kansas and California, taking the train up from Pennsylvania and New York, and driving in from Boston and Burlington. Unfortunately, not all of us made it through, as employers started cutting learning stipends in early 2001.
\nBut we graduated in August 2001, into a world that seemed bright, despite the contraction in the economy. I gave the “valedictorian”-ish speech to the class at graduation as it was streamed online - an unheard of event in 2001, especially in the middle of nowhere.
\nI immediately started as a TA as soon as I graduated, a week before September 11, the same time I met with my first post-graduation web design client (on September 10). The world changed overnight, but thank goodness there were still students to teach and websites to build.
\nIn 2002, I advised 4 capstone projects. I’d advise dozens more to come in the following 20 years.
\nBy 2003, the degree became the MS in Strategic Technology Management, when it was no longer fashionable to have “internet” in the degree name. I also started teaching the first courses of my own.
\nBy 2005, the degree disappeared entirely, sort of becoming the MS in Information Technology.
\nThe school name changed every 2 years for a while – I forget the exact timeline and sequence, but it was something like:
\nThe Graduate Center at Marlboro College
\nMarlboro College Graduate Center
\nHenry Zee Persons School of Marlboro College
\nGraduate School of Marlboro College
\nMarlboro College Graduate School
\nBy 2011, I’d departed as a faculty member.
\nAnd by 2020, Marlboro College became the Marlboro Institute at Emerson College. No more main campus, no more Brattleboro building.
\nStill, it was the perfect graduate degree for me at the right moment in my life. I earned back my tuition at least 3 times over in the 10 years spent as a faculty member and program director. The degree enabled me to teach at Harvard, something that would have never crossed my mind as possible in 2001, or even in 2011. And I made many friends along the way who I’m still in touch with today.
\nMarlboro’s faculty and administration gave me many opportunities that kept me growing long after I’d graduated. They supported many user group meetings for Adobe and Joomla, supported our Joomla Day events with free space and a smile, and even sent us to New York City to give away information about the school at a conference one year.
\nWe shall never forget driving to the Grad Center to participate in the online chat for class – text-based only and on AOL in those days, because we could not count on our dialup internet working at home for a full hour. (We had one in-person chat happening with the 8 or 9 of us who participated at Marlboro, with the second text chat happening online.)
\nWe remember talking to Mr. Clean’s AI-driven website, as he gently asked us to reveal more personal details about ourselves.
\nFinally, Jeffrey Veen will always remind us that well-designed home pages address three things: Where are we? What can we do here? Where can we go next?
\nHappy 20th graduation anniversary to the class of 2001. Section 3 still rules after all of these years.
\n", "date_published": "2021-08-24T15:52:00-04:00", "url": "https://learntoteach.tech/2021/08/24/happy-th-anniversary.html", "tags": ["Personal reflections"] }, { "id": "http://jen4web.micro.blog/2021/06/17/tell-students-what.html", "title": "Tell students what isn't important to worry about in the assignment", "content_html": "Instructor labels –
\nGreen circle = the assignment
\nGray circle = what students think is important
\nInclude a section in the assignment that clearly spells out what you DON’T care about for grading. It’s as important as the rubric you use for grading.
\n\n", "date_published": "2021-06-17T07:15:00-04:00", "url": "https://learntoteach.tech/2021/06/17/tell-students-what.html", "tags": ["Teaching Tips","Teaching Reflections"] }, { "id": "http://jen4web.micro.blog/2021/05/16/im-back.html", "title": "I'm back!", "content_html": "At least perfect the right thing. pic.twitter.com/nTtyT5gQuE
— Janis Ozolins (@OzolinsJanis) June 17, 2021
#30DaysofHTML ended 2 weeks ago. My last teaching semester at Harvard ended yesterday.
\nIn my educational video course, where I was a student, I created a video reflecting on #30DaysofHTML.\nyoutu.be/R9WW-KlKV…
\nI’m returning to blogging shortly, now that I have some time.
\nAlso, I need a job. My Harvard teaching gig is up on June 30, but there isn’t much for me to do between now and then.
\n", "date_published": "2021-05-16T10:39:06-04:00", "url": "https://learntoteach.tech/2021/05/16/im-back.html", "tags": ["Video","Studio news","Teaching Reflections","Personal reflections"] }, { "id": "http://jen4web.micro.blog/2021/04/01/how-to-make.html", "title": "How to make HTML exciting again", "content_html": "![\"#30DaysofHTML](\"https://cdn.uploads.micro.blog/33464/2021/480d999f5d.png\")
\nToday I received the best compliment on my #30DaysofHTML course, even before it launches.
\n\nI don't know how you've managed it, but you've gotten me all excited about HTML.
— ოarῐa ᥨaῃ𝙜әr 🚁😷💉🇺🇸 (@mlanger) April 1, 2021
This gets to the heart of why I started this challenge and my thinking behind it.
\nHTML is the scaffolding behind a web page. It’s as exciting as framing a house, or [playing bass or drums in a rock band] (https://jen4web.substack.com/p/use-the-full-frontend-or-create-junk). In other words, there’s some artistry, but it’s underappreciated by most. Done right, it’s in the shadow of way more exciting and interesting elements of the project. However, without it, nothing else matters – HTML is foundational to a website.
\nWhen developers teach new developers HTML, it’s presented as a necessary evil. As little time as possible is spent on it, because everyone wants to get on to making things pretty and interactive – neither of which is a thing with HTML. Quick quick, here’s a tag, here’s an attribute, open/close things – whew, let’s move on.
\nAs a result, HTML is the mushroom of the web world. It’s kept in the dark, and it eats a lot of crap by people who see nothing to love.
\nThe purpose of the Hypertext Markup Language is to identify the parts of the web page: paragraphs, lists, headings, links, addresses, quotations, and so much more. How many times have I said this sentence in 20 years of teaching?
\nBut finally, I made a connection: HTML is intimately tied to the story of the website.
\nEveryone wants to be heard and understood. Everyone wants their story heard. Great HTML is the way to communicate your story to the world.
\nWhen I was 14 months old and hungry, I would pull on my mother’s pant leg, point to the counter looming over my head, and grunt, “Cookie.” (Or so my mother says. I do not remember.) She would respond by giving me fruit, crackers, a bowl of dry Cheerios, or whatever else a 14 month old eats. Not a cookie, no matter hard I tried. Or she’d tell me it was almost dinner time and go away and leave her to finish it.
\nConsider that your crappy HTML is telling this same story. If your website is nothing but one < div > after another, you’re just saying COOKIE COOKIE COOKIE. You’re 14 months old, with a limited grasp of vocabulary.
\n![\"Cartoon](\"https://cdn.uploads.micro.blog/33464/2021/0fad8710f2.jpg\")
\nSo. How do you convince developers, who just love everything pretty and interactive, that their framing sucks and doesn’t work? Their code that sits on top of it works just fine. Framing is SO BORING.
\nWell, accessibility, of course! It’s absolutely critical. Accessibility should start at the beginning. It should always be incorporated in the site. Good accessibility starts with meaningful HTML.
\nBut – what the accessibility advocates are doing is not effective to get developer attention. They are, unfortunately, ignored for the most part.
\nWe’ve (maybe) gotten (some) busy developers to feel guilty about their bad HTML. But changing it takes effort. Learning what HTML elements are available takes time and research. Time that could be spent learning the latest JavaScript framework.
\nTime for a new story with new framing.
\nIf we focus on HTML’s syntax, that’s not interesting. What’s interesting is the meaning conveyed behind the elements. Why choose one element over another? How does that element contribute to the website’s story?
\n30DaysofHTML incorporates the following concepts:
\nFocus on the meaning behind the elements. When should something be used or not used?
\nDon’t overwhelm with all of the edge cases and complexity. Provide just enough information to feel like you know a little bit, and provide links to everything else.
\nIdentify any misconceptions about the element. HTML looks like English. The < address > element, for example, looks like it’s for a postal address. However, it can be used for any contact information associated with an article or website author, including phone numbers, email address, social media links, or even geographic coordinates. Who knew that? That’s interesting and fun and different.
\nRemove the pretty and interactive, so learners are forced to focus on the scaffolding. We aren’t concerned with cross-device presentation or UX or anything else. It’s black text on a white page. There’s nothing else to do here… by design.
\nEncourage application, reflection, and discussion. Not only should there be a little reading, but there should be some examples and problems to try too. Maybe the occasional quiz. Encourage readers to share their work and comment on each other’s markup and approaches. Put the discussion on the meaning we’re trying to convey.
\nAnd finally, make it fun. Make some fun graphics, throw in a few emojis, use all of the web writing techniques to break up content with headings and lists. Write in a fun and informal style.
\n["< address > should be used for addresses. You guessed that already. But what kind of addresses, and in what context?"] (https://jen4web.substack.com/p/address)
\nDraw the reader in. Make them curious. Conflict is interesting. The lure of something that perhaps you don’t know is intriguing.
\nI also sent out a [“Night Before”] (https://jen4web.substack.com/p/twas-the-night-before-30daysofhtml) email, explaining what to expect and how it will all work. This sets anxious learners at ease, and it sets expectations and generates interest. It also sets metrics for what success looks like.
\nThe “X Days” format is popular at this moment. People talk about #100DaysofCode and #100DaysofNoCode and such. Why not #30DaysofHTML? Fortunately, it explains everything you need to know in the hashtag. 30 days, talking about HTML.
\nEmail is the format for delivery. It’s simple, easy, and everyone has it. Using Substack, I also create a website, and it has interesting discussion features for sharing work.
\nIn Silicon Valley speak, “reduce friction.” The email goes in your inbox. You read it when you’re ready. Another appears tomorrow. You’re getting 30 emails in 30 days. What’s not to love?
\nThis is the start of my 30 day journey. I hope to learn more about HTML, but mostly, I hope to learn more about offering instruction in this format. What works and what falls flat? What is the response? What would I do differently next time?
\nI’ll write more about this in May.
\n", "date_published": "2021-04-01T11:29:00-04:00", "url": "https://learntoteach.tech/2021/04/01/how-to-make.html", "tags": ["Teaching Tips","Teaching Reflections","Personal reflections"] }, { "id": "http://jen4web.micro.blog/2021/04/01/daysofhtml-starts-today.html", "content_html": "#30DaysofHTML starts today! There’s still time to (free) [register] (https://jen4web.substack.com/welcome). First email goes out at 11 AM, but if you miss it, you’ll see it on the [website] (https://jen4web.substack.com), and you’ll get the emails going forward.
\n![\"\"](\"https://cdn.uploads.micro.blog/33464/2021/34415a9d60.png\")
\n",
"date_published": "2021-04-01T09:55:31-04:00",
"url": "https://learntoteach.tech/2021/04/01/daysofhtml-starts-today.html"
},
{
"id": "http://jen4web.micro.blog/2021/03/26/star-ratings-in.html",
"title": "Star ratings in Substack - grading the reader, not the writer",
"content_html": "[Interesting Substack feature] (https://medium.com/linda-caroll/how-substacks-new-gold-stars-will-help-writers-get-results-9fc6fdc6342a): your readers are given star ratings visible only to the newsletter owner.
\nAs the article points out, you can give special offers to people who are actively reading your newsletter and weed out those who just wanted the freebies.
\nI’m also thinking about this for educational purposes. You know exactly which students are engaged enough to open the emails.
\n", "date_published": "2021-03-26T10:52:11-04:00", "url": "https://learntoteach.tech/2021/03/26/star-ratings-in.html", "tags": ["Tools General"] }, { "id": "http://jen4web.micro.blog/2021/03/18/expand-your-html.html", "title": "Expand your HTML game in 30 days.", "content_html": "There’s a world beyond < p >, < a >, and < div >
\n![\"30](\"https://cdn.uploads.micro.blog/33464/2021/61f1fd4488.png\")
Receive one email a day for 30 days, each featuring at least one HTML element.
\nExpand your HTML repertoire, including element names, required and common attributes, example code, and links to more learning.
\nIt starts April 1, 2021.
\n[Subscribe to 30 Days of HTML] (https://jen4web.substack.com/subscribe)
\nThis challenge is designed for those already familiar with HTML syntax but limited in their tag choices.
\nWe 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.
\nIf 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.
\n", "date_published": "2021-03-18T12:37:00-04:00", "url": "https://learntoteach.tech/2021/03/18/expand-your-html.html", "tags": ["Course release"] }, { "id": "http://jen4web.micro.blog/2021/03/13/teaching-reflections-professor.html", "title": "Teaching Reflections #13: Professor as a bad video-maker", "content_html": "This week’s reading: [Academics aren’t content creators, and it’s regressive to make them so] (https://www.timeshighereducation.com/opinion/academics-arent-content-creators-and-its-regressive-make-them-so)
\nA few quick snips from the article:
\n\nThe philosopher John Dewey told us that an educational experience – what he called a community of inquiry – requires a cognitive presence (the learner), a social presence (the learning community) and a teaching presence (the professor). \n\n
\n By Dewey’s definition, if our professors spend their time editing videos instead of engaging with students, we cease to even be “educational” institutions. A video made by a professor for only their class is akin to the single-copy, handwritten book disseminated to just one room of people. It is regression, not progress.\n\n
I think the argument the author is making is this:
\nDewey says good learning involves 3 elements: learner, learning community, and instructor. This is a virtuous circle. All three elements feed on each other.
\nIf the instructor must spend more time making (bad) video, they have less time to spend with learners. The video is often bad, because instructors are usually not filmmakers. “Bad” may be bad production, but it may also be bad storytelling in the video.
\nIf the video is bad, then the learners will go elsewhere to get content, fracturing the community.
\nWithout all three elements in place for a good learning experience, university education is simply overpriced.
\nI also make a lot of professional video for LinkedIn Learning and Frontend Masters.
\nIn the past, I’ve tried to use these videos as the basis for my class. The students were extremely unhappy, because they could get their own subscription for pennies on the dollar of what they were paying for my university course.
\nThey prefer my less polished, less produced, lower quality video, because they felt this was a better value for their dollar. Why?
\nBecause they feel connected with me when I make a video for them. Students feel like they know me when I’m being my normal goofy self on camera. I have less of a personality when I’m on camera at LinkedIn. Professional polish and all that.
\n\n Content can enable learning, but it cannot provide an education. Similarly, content is not our core value. There is a long tradition, going back to the printing press, of universities outsourcing their content provision to the textbook: an expensive relic, now replaced by largely free content on the internet. This is progress. Education should be better than ever, as we are now able to point at myriad incredible resources, possibly on the web, perhaps in our library, where we act as content aggregator, not creator. Creation is done when we have our researcher hats on, not our teaching hats.\n\n
In the old days, we read the book before we went to class, where the information was discussed and interpreted.
\nToday, video is asked to do both of these things at once: provide the information of the textbook AND provide the discussion and interpretation. The author thinks that professors spending their time making the textbook is a waste. Find other resources online, have the students use these as the textbook, and then provide interpretation and discussion in class.
\nWhat if we had some type of vetted and reviewed video that we could incorporate in our courses? Then we have an effective textbook for our courses, and again, the professor brings the interpretation and meaning to the material.
\nI don’t believe this at all, because the argument here is the technology should drive the content. In other words, the students won’t watch without music, jump cuts, and crazy graphics.
\nWhat if we had good content, making a reasonable video that tells a good story but with much less flash? What if we engaged students through discussion and collaboration?
\nRemember the original argument: If the video is bad, then the learners will go elsewhere to get content, fracturing the community. However, “bad” is not defined.
\nBad video could mean bad production for sure. But it could also mean:
\nThe instructor is overwhelmed trying to make technologically interesting video, reducing time to engage with students.
\nThe students are not engaged with the instructor, so they go elsewhere for more entertaining content.
\nDewey’s community of inquiry is fractured.
\nWhat if instructors instead spent their time on making a good story, recording it the best way possible, and engaging students in discussion and activities? Rather than putting so much emphasis on video, put more on the activity and engagement for a better learning experience.
\n", "date_published": "2021-03-13T11:49:54-04:00", "url": "https://learntoteach.tech/2021/03/13/teaching-reflections-professor.html", "tags": ["Teaching Reflections"] }, { "id": "http://jen4web.micro.blog/2021/03/10/upcoming-frontend-masters.html", "title": "Upcoming Frontend Masters workshops in August and October", "content_html": "I have planned my first trip in over a year, pending my full vaccination… which looks increasingly likely!
\nI’m headed to Minneapolis to give two workshops with Frontend Masters.
\nAugust 18-19: [Responsive Web Design with Flexbox & CSS Grid, v2] (https://frontendmasters.com/workshops/grid-flexbox-v2/)
\nAll 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/)
\nIf 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.
\nWhat 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.
\n", "date_published": "2021-03-10T12:54:00-04:00", "url": "https://learntoteach.tech/2021/03/10/upcoming-frontend-masters.html", "tags": ["Course release"] }, { "id": "http://jen4web.micro.blog/2021/03/09/new-linkedin-learning.html", "title": "New LinkedIn Learning course release: HTML and CSS Linking", "content_html": "![\"HTML](\"https://cdn.uploads.micro.blog/33464/2021/3025a4a0f0.jpg\")
\n[HTML and CSS: Linking] (https://www.linkedin.com/learning/html-and-css-linking)
\n\n 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.\n
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?
\nThen I started spelling out All The Things:
\nLinking to pages within your site and pages elsewhere on the internet, in new windows/tabs and the same window/tab.
\nLinks to other things: PDFs and other documents, email addresses, phone numbers.
\nLinks within the same document (back to top links, links to sections of the page).
\nImages as the item to click on to load a link, instead of text.
\nImage maps, in which one image contains more than one link.
\nThe 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).
\nNavigation bars, horizontal and vertical.
\nStyling text links to look like buttons.
\nChecking for link rot.
\nUsing a robots.txt file to control search engine movement in a site.
\nRedirects, both client-side (meta tag) and server-side (301, 302, etc).
\nBasically, there’s a whole universe of links, and this is the course that covers it all.
\n", "date_published": "2021-03-09T16:58:00-04:00", "url": "https://learntoteach.tech/2021/03/09/new-linkedin-learning.html", "tags": ["Course release"] }, { "id": "http://jen4web.micro.blog/2021/03/06/year-one-pandemic.html", "title": "Year One Pandemic Reflections", "content_html": "What was happening on March 6, 2020, one year ago today?
\nI was preparing for a 3-leg trip from Boston. First stop was Portland, Oregon, for the SIGCSE conference. After the conference, I was heading south to California for some LinkedIn Learning recording. After some time there, I was headed to Arizona to visit my parents at their retirement community.
\nI was anxious about this trip. Because I was scheduled to be gone from March 11-24, I was worried that the airlines might shut down along the way. Maybe some element of the trip would be cancelled, but others would continue.
\nOn March 6 at 10 AM, I was getting what would become my last haircut for 2020.
\nBy that afternoon, Harvard announced they would not allow non-essential academic travel in the US. (They’d stopped allowing international travel a few weeks prior.) In other words, my participation in SIGCSE was no longer happening.
\nBy March 9, LinkedIn had cancelled my trip for the following week.
\nCancelling the trip to see my parents was a no-brainer. I could not live with myself if I brought them the virus. As it turned out, their retirement community closed to visitors around March 16.
\nOf course, this was just the beginning. Many more trips would be cancelled along the way, including a birthday trip to Europe, conference trips, and video recording trips. It was a year without music, as all of my music groups cancelled rehearsals, concerts, and whole seasons of performance. It was a year without family. Indeed, I last saw my family in August 2019. It may be 2 years before I see them, possibly longer.
\n", "date_published": "2021-03-06T15:03:00-04:00", "url": "https://learntoteach.tech/2021/03/06/year-one-pandemic.html", "tags": ["Personal reflections"] } ] }