An In-Depth Introduction to CodePen for Beginners (2016)

[@gregoryshields4258]

I've just now discovered this video in 2020, but thanks for creating a video that gets right to the point and doesn't waste the viewer's time. Also, the viewer gets the benefit of your experience, especially in the area of CSS. I've seen so many videos where the content creator is fumbling around wasting time and isn't prepared to make a presentation. Even some of the very popular content creators in the software dev space put out videos where they don't even know what they are going to do before they do it, such that it negatively impacts the educational value of the video. In contrast, you do such a great job in putting forth a no-nonsense presentation. Bravo.

[@techstacker5361]

Wow, that's some nice feedback right there! Comments like these make me want to start making videos again. Thank you, Gregory!

[@gregoryshields4258]

@@techstacker5361 I took down my additional comment which called out a couple of people not by name, but in a way that it wouldn't be too hard to identify them. Maybe that's not the right thing to do, but I don't know how else to draw comparisons in order to highlight many of the positives which I see in your approach to making videos in contrast with what I see in certain other people's videos which for me personally makes them nearly unbearable to watch because of the reasons stated in that other comment.

[@neotericphoenix5811]

Why on earth did anybody give this vid a thumbs down? Very helpful video!

[@techstacker5361]

Glad to hear that Neoteric Phoenix! I have no clue, perhaps I was talking too much? :-p New web development tutorials coming soon! :-)

[@awertyuiop2404]

it may be their style to like something

[@Odrade100]

every help is wellcomed.

[@lookwhaticando4244]

people who dislike are either idiots and don't care about anyone, or maybe it was something in the video that made them dislike!

[@ciscotest6230]

their internet was running slow, called isp, rep told them it is what it is, came back and disliked the video, dummy thought about becoming a programmer but dont know that its hard work as well lol

[@jaystockton2096]

OMG, HAHAHAHA..........you the man! you just save a 54 year old newbie to Codepen a lot of time. PLEASE KEEP THE VIDEOS COMING... :)

[@techstacker5361]

Thank you! I'm currently preparing a new tech community platform for launch. But I have prepared an in-depth Web Development for Beginners video series. Coming out in October. We’ll be using CodePen to build a responsive single page website, 100% from scratch! :-)

[@shawnmofid7131]

Thank you so much. Before I watched your video I only knew that codepen site existed, and now I know much more about it and how to use it. I especially liked the text captions, they helped me get the point while I listened to you elaborate on it.

[@techstacker5361]

Glad you liked the captions, will definitely continue with those when I begin making videos again in a few months! Appreciate your feedback!

[@shawnmofid7131]

@@techstacker5361 I just watched it again, and got even more details, and a created my first content. I am so thankful for this content.

[@jenglish1986]

David: Easily the best instruction video on KZbin. Absolutely clear and concise presentation that gave all of the necessary steps to use CodePen. I especially like the text below the screen. How did you do that? Overwrite in iMovie or something else? I look forward to seeing more. One thought is that you might make videos a bit shorter. I use CodePen and had most of this but a short time back I would have been a bit overwhelmed since your coverage is so thorough. But once again best video I have seen in long time.

[@techstacker5361]

Thank you. I edit my videos using ScreenFlow (it's for Mac only). The app is pretty straight forward (as opposed to Premiere Pro e.g.). Glad you found the text useful, I wasn't sure if it would work (or be distracting). Regarding the length of my videos, I've been thinking a lot about it lately, and for the upcoming series on Web Development I shoot for 10 to 15 minutes per video, to make them more digestible. They're in pre-production, I don't script any videos, but I spend a lot of time planning them, and part of the challenge is to prevent them from getting too lengthy! Happy to hear that you found this video thorough, I want to brand myself as in-depth. Really appreciate your feedback! :-)

[@meccaadams9299]

You've added years to my life. THANK YOU!

[@techstacker5361]

Wow, what a compliment haha, thank you for watching!

[@ashleywhite8375]

I am so happy I found you!!! New developer here. Now subscribed to your channel. This is immensely helpful. Thanks!

[@techstacker5361]

Thank you, Ashley! Currently writing a series of articles on web development for my blog, I start shooting more video tutorials in December :-)

[@PaulMcCannWebBuilder]

At 5:10 you say 'and then it works'. line-height's default unit is ems (since you usually want it proportional to your typography). So typing the emmet short cut 'lh200 + tab' gives a valid rule of line-height: 200; meaning 200em. line-height is one of the only CSS properties that doesn't need a unit after the number, since it defaults to ems.

[@SatishKumar-qq1mn]

Your teaching style is awesome......great job done.

[@techstacker5361]

Thank you, more videos coming soon! :)

[@jellycoding]

You want feedback... and one thing is that you should have a bit higher volume on you'r speech. I can raise the volume and there is no problem at all to hear you. But when I start another video and/or the connected phone makes noise and so on it screams in my headphones and my head. Buy the way ...really nice tutorial. It's a sub for sure.

[@techstacker5361]

Thank you for the feedback! Regarding the audio, you're 100% right. I just got new audio equipment (Blue Yeti Pro + popfilter), now I can increase the audio volume without making it noisy. It'll be much better from now on! :-)

[@jellycoding]

David | Movation UX / DEV Nice... I really enjoyed this codepen-video.

[@musicmatromony]

The volume was perfect for me.

[@MatthewHuberty]

THIS SO MUCH. My ears are still ringing from that text I just got. Fantastic/informative video though, definitely appreciate this.

[@dareadel]

Excellent tutorial. I've always enjoy David's videos. Good teacher.

[@techstacker5361]

Thank you Dare! Currently working hard on my next tutorials. Got a lot of cool front-end development videos coming up. :-)

[@enlightenedtechnologies]

This video has saved my patience. Great video!!!

[@techstacker5361]

Glad to hear that J Love - watch out for my web development series coming out in July! :-)

[@jeannettemillandvigio3579]

I can only imaging that Neoteric is a friend joking; this video was extraordinary helpful

[@techstacker5361]

Very happy to hear that Jeannette!

[@singh.ankit1207]

You are awesome

[@ScottMorgan88]

Good job, David. Thanks, very informative.

[@techstacker5361]

Thank you Scott!

[@neotericphoenix5811]

Thanks for the shortcut list too!

[@voa2000]

Thanks. You have saved me a lot of time.

[@RyansRecording]

Nice introduction to CodePen, looking forward to see more tutorials from you.

[@seantheGreat]

Amazing tutorial! Should watch this before using Pens

[@anzatzi]

great video. a lot of info in 25 mins. thanks

[@chaselle1]

You mentioned a link to the Shortcut list, but I am not seeing the link in the comments. Can you repost. Thank you! Your video was very instructional. As a new user, it was very easy to follow and greatly appreciated.

[@techstacker5361]

Thank you, appreciate the feedback! :-)

[@thesexrace]

Wonderful video. Thanks for taking the time. Very much appreciated.

[@techstacker5361]

You’re very welcome Emilio!

[@shawnmofid7131]

Hi. I am typing in the js file exactly what you have and I get an error. Would you be willing to look into it? I have: var myBox = document.querySelector('.myBox').addEventListener('click'.function(){ this.classList.toggle('bg-red'); }); I tried to type it in codepen and I get an error about '(', and I also used brackets. Brackets says: ERROR parsing error unexpected '{'. I realize you made this video a while back, and it might a version issue.

[@techstacker5361]

Hi Shawn, it’s because you used a dot `.` instead of a comma `,` between 'click' and function. I made that mistake all the time when I was a beginner =) Here's a working Pen for ya codepen.io/StrengthandFreedom/pen/bGGzpOM

[@beatrisprinz3421]

It is already 2024. I got aware of CodePen 2 month ago ... it seemed to me this is a great tool combined with great tutorials for an absolut beginner with zero knnow how about web programming, especially for wordpress plugin developer. That's the reason why I purchased a PRO lisence straight away. Unfortunately, up to day I don't achieve any results with CodePen. I believe the issue is that I don't have (even after watching hours of hours many web dev video tutorials) any clue how to dp that step-by-step to get really started . Please, would you mind to take some time to stream a video lesson "how to develop a wp solution (take any example like creating a business directory or something like that)?

[@oladdt3743]

Great tutorials , you just saved a life with this video :)

[@dianaclaros8758]

Thank you for the shortcuts! what screen recorder do you use? your video quality is great.

[@rmwatson1372]

Great presentation

[@scott17601]

Thank you this is awesome! Subscribed and Liked :)

[@janienreeves2813]

When adding templates the java script setting does not allow for quick add. How did you do that?

[@djelouahisidali4702]

thank you for this video , with your method you help me a lot .

[@techstacker5361]

No problem, glad to help!

[@SudarsanNayak]

Hi How to change Font size, reduce space between text in google form. can we add css in google form.

[@leojunioyuri]

Cool! I learned a lot. Cheers from Brazil

[@techstacker5361]

Thanks Leonardo, very happy to hear that! :-)

[@RajkumarSingh-dq8be]

Thank You for creating this kind of video,its was really helpfull.

[@techstacker5361]

Glad you liked it Rajkumar! :-)

[@christopherlittle4308]

brilliant video but i'm looking for the back end stuff more along the lines of Pro Version and cannot find the video

[@lissetteabril]

Thanks for your video!! Amazing tips and information!!!!

[@techstacker5361]

Thank you Lissette! More videos coming soon! :-)

[@umairshah5942]

Very informative. Thank you!

[@techstacker5361]

No problem!

[@gl3862]

Very good video I have a question, when you added JS to .MyBox, what was it suppose to do?? I wrote the same code, but I don't see anything happening with that Thanks!

[@techstacker5361]

Glad you liked it! :-) The code is supposed to toggle the background color of the box. Perhaps you forgot a symbol (common). Show me the code you wrote and I'll take a look.

[@stephenosullivan74]

Thank you for a very informative and helpful tutorial. It was excellent.

[@techstacker5361]

+Stephen O'Sullivan - no problem, glad it was helpful! :-)

[@陈瀚龙]

Great video, thanks. I'm looking for how to name my JS file, so I can link it to the HTML. I've missed it somehow. Seems like such a fundamentally important thing that would be painfully obvious. I must be brain damaged.

[@osempo]

Very cool and helpful video, thanks a lot!

[@techstacker5361]

Thank you, Osempu! Happy to help =)

[@therealcantroski]

I use this on my scripting and its amazing :D

[@cyberbrujx]

really glad i found this and your channel! super useful.

[@techstacker5361]

Thank you, glad to hear! :-)

[@gloria1389]

This is really great, thank you.

[@techstacker5361]

Thank you! That makes me very happy to hear. I'm currently filming a tutorial series on UX Web Development, coming out soon :-)

[@jameskenyi1]

Great video man very helpful

[@techstacker5361]

Glad to hear that! Thanks, Laduku!

[@ccriswell8650]

Awesome. Great Video

[@SelmaDelgado]

Greetings from Kansas!! Great tutorial - I learned a lot! At 18:12 in the video if I type tty+tab I get text-transform: uppercase. What is the shortcut for transform: translateY(50%); ?

[@techstacker5361]

Hi Selma, greetings from Copenhagen! Glad to hear you learned a lot :) I can't find a shortcut for that specific declaration, the closest I can get is trf:ty + tab which gives you transform: translateY(y); - then you can just modify the (y); so it says (50%); There’s not a shortcut for everything, unfortunately,. You can see all the shortcuts here: docs.emmet.io/cheat-sheet/

[@afifassihab7953]

Thanks for sharing it's very helpful

[@techstacker5361]

Very glad to hear that Kakak! :)

[@codergirl1518]

Good tutorial on "CodePen" and thank you for sharing also.

[@陳虹吟-y3d]

Wow really thank you, you explore my mind !

[@techstacker5361]

Cheers :-)

[@clarequilty4741]

Cheers man! You saved me a lot of needless bullshit!

[@techstacker5361]

Glad to hear it was useful! :-)

[@anjanashekhar]

Hey! Really liked this video! Thank you!

[@techstacker5361]

Hey Anjana, thank you! Stay tuned, in-depth web development / design tutorials coming out soon :-)

[@anjanashekhar]

Awesome! Can't wait!

[@para_arriba]

What type of *account* do you recommend for someone who's starting out in this world. *Starter, developer or Super*?

[@techstacker5361]

Starter makes sense :)

[@stevensurface591]

How do I save my work, so I can submit it for school? Thank you.

[@singh.ankit1207]

Pls make video on Best way to learn Bootstrap.

[@ruffneck718]

Thank you Sir

[@techstacker5361]

No problem!

[@ccriswell8650]

I followed the video but my JavaScript does not seem to work. var myBox= document.querySelector(".myBox").addEventListener("click", function(){ this.classList.toggle(".bg-red"); });

[@techstacker5361]

Hi, it’s because you need to remove that '.' in your toggle(".bg-red"); It should look like this: *this.classList.toggle("bg-red");* The reason is that by adding the *classList.toggle* property, you have already specified that you’re working with a classname. I understand it’s confusing, because we need to have the '.' when we grab our .myBox class with querySelector. But the reason we need to use '.' with querySelector, is because we could be querying anything from a tag, a class, or an id. Hope this helps!

[@sudhabiradar881]

I want to create my resume using code pen can you send related video plssss

[@fazelwasafi3222]

Hey how do I get the url from code pen when I finish the project

[@techstacker5361]

Hey Fazel, I'm not sure I understand your question. The url is at your browsers address bar, it looks like codepen.io/yourusername/pen/LdRvqx

[@Mr_ronaldmoise]

thank you

[@techstacker5361]

No problem :D

[@umairshah5942]

You are awesome!

[@techstacker5361]

Haha thanks :-)

[@ItsSebBro]

I can't seem to do the very first shortcut, i'm on a mac and p + TAB just creates a new paragraph input :s

[@techstacker5361]

Hmm well it's supposed to create an opening & closing paragraph tag. I'm not sure what you mean with “paragraph input”. Btw as a reference, here's the entire shortcut cheat sheet on CodePen blog.codepen.io/documentation/editor/key-bindings/

[@Odrade100]

Head info goes on html options now.

[@thedevangsshow3224]

Nice video

[@rmwatson1372]

David, do you have any Udemy courses? Thanks

[@techstacker5361]

Hey RM Watson. No Udemy courses. But I will be doing plenty of free web development tutorials on KZbin in 2019. (I’ll eventually sell courses on my own website). Check out my new website techtacker.com for written content. I will also announce any video tutorials there. I’m currently working on a huge project for a client, which I’ll finish up in January, then it‘s back to doing videos! :-)

[@alibadr1765]

+David | Movation UX / DEV i really enjoyed the video keep the good work up.

[@techstacker5361]

Thank you Ali Badr! :-)

[@xbiova881]

Don't get me wrong this is a great video. But as a person who is still learning HTML, CSS, and Javascript I would have expected a little bit of explanation in a beginner tutorial. Maybe say what each line of code does and its purpose. That's what I personally would have expected in a beginner tutorial. But great video man just not really for me personally.

[@techstacker5361]

Hi XbioVa! I appreciate your feedback! The thing is that this tutorial wasn't about teaching HTML, CSS, JavaScript, but how to use CodePen. If this was a “frontend development for beginners” tutorial, then I would explain the “what why and the how” of HTML, CSS, JS. I actually have a tutorial coming up about that topic - and it will be explicit :)

[@clockshield]

Why is my shortcuts not working?

[@mkalpax2188]

谢谢 a lot

[@vodvandorin9454]

you want comments this is friggen good for learning hows that!!

[@techstacker5361]

+Vod Vandorin very happy to hear that, thanks! :-)

[@vodvandorin9454]

Your codepen videos are really good easy to follow straight to the point and great to listen to. Have you got any more please send me a link?

[@techstacker5361]

Vod Vandorin really appreciate your feedback! I do my best to be concise. I got plenty of tutorials coming up, I've been working on an in-depth series on Web Typography which will be up next. After that the topic is Web Animations. I'm planning on starting filming the first video next week, but I'm working full-time for a client atm so I only got time to work on the tutorials in the weekend. In the fall I'm heading into JavaScript / jQuery territory, so yeah, I have big plans for this channel :-)

[@MrDadcard]

what did you mean no shortcut for JS?

[@techstacker5361]

I mean that inside CodePen, there's no keyboard shortcut for JS (at least not at the time of this video) like there is for HTML & CSS.

[@soundscape2017]

M trying but coding are not working....

[@adilsonschumacker7084]

Grato por compartilhar! +1like.

[@techstacker5361]

Cheers!

[@thecodewriter7991]

ive used tab 100 times but don't work

[@davidbielby4287]

The audio levels are too low even when I have my youtube volume 100% and my laptop at 100% Probably 50% than the other videos I have been watching for the last hour.

[@techstacker5361]

Thank you for the feedback, David, and I agree with you. Future videos will have better audio (bought a really good mic too!)

[@charlesleeray9926]

when you say not fork others more advance pens it's bc you don't want us 2 get confused or bc we will find new tricks hidden in code uhmmn

[@techstacker5361]

You got it right on the first one. If you're a beginner, the problem with looking / taking the code from many different pens, is that there are numerous types of preprocessors that people use for HTML (Jade, HAML), CSS (Sass, Less, Stylus), JavaScript (Typescript, Babel, Coffeescript) - the different syntax that they all use can get very confusing. Not sure what you mean with “new tricks in code”?

[@pleabargain]

1:00 suggestion: look into the camera not at yourself...

[@techstacker5361]

Will keep that in mind, thank you!

[@goldilockszone4389]

what is codepen ?

[@techstacker5361]

A code editor / front-end development playground, watch the video :-)

[@goldilockszone4389]

Its really seems to be picking up - I have seen many coder use this tool

[@goldilockszone4389]

Hey David what do you thing of Vue.js vs React vs Angular vs any awesome front end framework

[@techstacker5361]

Hey Flip Tube, I think that you need to select the right tool for the right job. Don't start learning a framework unless you have a specific use-case for it. What I think about Angular, React, and Vue, constantly changes - because the tools constantly change. If you're a beginner, I suggest that you focus on getting good at a programming language, and forget about the tools for now. Next year you'll see a lot of Vanilla JavaScript tutorials on this channel, but not so much about frameworks. There's a time and place for them, but get some experience with JS first :-)

[@goldilockszone4389]

Is Vanilla JavaScript a new framework ? Just kidding :) You are right, I think I am getting caught with all the glitz and glamour around the zillion tools available today and their comparisons. There is whole industry thriving making video and blogs on comparison. I will go back to basic and focus on Javascript - JQuery- object oriented javascript - json-Ajax-REST service and "this". My issues is that I know the concepts fairly well which all the tutorials tell you, but no one builds a webapp or a website step by step using a Javascript and connecting it to server - There is a lack of practical building skills.

[@damasodanieltellesochoa6633]

Subtitles please :P

[@theorex8802]

Firtnite

[@manimeghalaichandrashekar742]

In HTML I entered In Javascript ReactDom.render( Helloworld document.getElementBy id("root") ) I have settings correct I "unexpected closing

[@janienreeves2813]

Nice video but your moving to fast for beginners. I had to play it 3x to see what your doing

[@anzatzi]

"for beginners"? Do all these abbreviated commands help beginners?

[@techstacker5361]

If you're referring to the keyboard shortcuts (e.g.: "ftz + tab" outputs: font-size) - I think that you should start using them as early as possible. You should be able to write them out manually, of course - but that'll come quickly, it's the least challenging aspect of web development. The amount of time you can save by using shortcuts, will free up a lot of extra time for learning more important topics like semantic markup, architectural & design patterns etc. You'll be spending plenty of time typing in your career, literally thousands of hours, so yeah I think you should start using the editor shortcuts as soon as you have the ability to write the commands manually - from that point on you're wasting valuable time.

[@anzatzi]

thanks. the shorthand emphasis in the first few minutes threw me somewhat, but the rest of the video was very clear and well presened.

[@chaselle1]

Never mind, found it.

[@techstacker5361]

Great! :-)

[@Tapepusher]

codepen let's you type out a whole comment, tells you there's an unknown error and deletes the comment. It's a bit of an asshole.

[@thecodewriter7991]

by the way i am a mac user

[@thedevangsshow3224]

Nice video