if someone don’t get used to these things before [document structure with body tags, etc.], it could be hard to learn correct one later,
I think it takes a few minutes to learn.
A basic principle of teaching is that you withhold information until the student is ready. When you take your first chemistry class, they teach you Bohr’s model of the atom. They know it is wrong (or at least not the best explanation) but you are not ready for quantum mechanics. People need to be eased into subjects. Information has to be withheld until the student is ready. Knowledge is digested in small bites. If you overload the student in the beginning, many will fail. Students aren’t ready for quantum mechanics on the first day, even if that is the more accurate description.
Advantages of Codeped:
- It removes an element of complexity that allows students to learn gradually, more comfortably.
- Students don’t have to search for a code editor and deal with directory structures.
- Students are working in a uniform environment, making it easier to share information.
- Students don’t have to have separate browsers open to run examples - everything is in the same window.
- Students can easily share their code by linking to pens.
- Other students can easily see, run, and even edit to try things out in the environment
This last one is a huge one for me. I can’t tell you the number of times I’ve seen people ask for help in the forum and I want to help, but they have only provided the JS and I don’t have the time or energy recreate their HTML and CSS to see what they’re seeing so I just skip over them. Even if they provide their HTML and CSS, I still need to create the file structure to run it. Sometimes they’re linking to external JS libraries and I have to guess what they are. It is sooooooo much easier to help someone with a link to a pen. So much easier.
Disadvantages of Codepen
- When graduating to local development, you’ll have to take a few minutes to understand file/folder structure and what a text editor is (if you don’t know already).
- You have to take a few minutes to learn how to encase everything in
body tags and what
head tags do. But the student now knows what html tags are so this is not a difficult step at that point.
- The student doesn’t get to join in with the cool kids in the “I hate Codepen” club (closely related to the “JQuery is for losers” club). It’s very popular to complain about Codepen.
I think the advantages for a beginner far outweigh the disadvantages. Codepen is great training wheels for a beginner. Of course, eventually the student needs to break away from it, like all learning tools. I do all of my writing locally. But I still use Codepen occasionally, just to test small things out quickly.
If I had my way, Codepen would be the required tool for the front end stuff. It just makes life so much easier and makes it so much easier for students to share and get help. But it’s not my decision. I would agree that maybe FCC needs a better tutorial or video on how to transition from codepen to the “real world”. Maybe there is and I just haven’t seen it. It took me about 5 minutes (if that) to figure it out, but others might struggle.