title
Learn to use CodePen from a co-founder of CodePen

description
Chis Coyier, who co-founded CodePen, demonstrates how to use CodePen and shares some little-known tricks. CodePen is a social development environment that allows you to write code in the browser, and see the results of it as you build. 🔗https://codepen.io/ -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'Learn to use CodePen from a co-founder of CodePen', 'heatmap': [{'end': 205.898, 'start': 163.005, 'weight': 0.78}], 'summary': 'Learn to use codepen from a co-founder, covering exploring codepen, creating a card component with html/css, utilizing scss preprocessor and libraries like foundation/bootstrap/bulma, customizing settings, modern javascript manipulation with event listeners, and understanding codepen features like real-time collaboration and search functionality.', 'chapters': [{'end': 313.192, 'segs': [{'end': 71.572, 'src': 'embed', 'start': 37.883, 'weight': 1, 'content': [{'end': 39.104, 'text': "so if you're interested in signing up,", 'start': 37.883, 'duration': 1.221}, {'end': 45.73, 'text': "just hit sign up and it'll take you right to the free sign up and you can sign up through your github account or just with your email address or whatever.", 'start': 39.104, 'duration': 6.626}, {'end': 49.253, 'text': 'When you land here on CodePen, you know it kind of tells you what CodePen is.', 'start': 46.01, 'duration': 3.243}, {'end': 55.238, 'text': "but there's all these things here, all these cards down here, and these will always be different every time you come to CodePen,", 'start': 49.253, 'duration': 5.985}, {'end': 58.38, 'text': 'because we pick them out.', 'start': 55.238, 'duration': 3.142}, {'end': 62.064, 'text': 'The staff of CodePen picks out cool things that people are doing.', 'start': 58.441, 'duration': 3.623}, {'end': 65.346, 'text': 'Could be you, you know, if you sign up for CodePen and do something cool on here.', 'start': 62.144, 'duration': 3.202}, {'end': 71.572, 'text': "We'll pick it just to show off interesting things, and there's just dozens and dozens of these get picked every day.", 'start': 65.627, 'duration': 5.945}], 'summary': 'Codepen offers free sign up through github or email, showcasing dozens of cool projects daily.', 'duration': 33.689, 'max_score': 37.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM37883.jpg'}, {'end': 128.692, 'src': 'embed', 'start': 98.024, 'weight': 0, 'content': [{'end': 105.166, 'text': "But I'm going to go to this Create menu and I'm going to see Create, New Pen, and this is kind of the heart and soul of CodePen is the editor.", 'start': 98.024, 'duration': 7.142}, {'end': 107.767, 'text': "So you're learning to code on FreeCodeCamp.", 'start': 105.546, 'duration': 2.221}, {'end': 112.028, 'text': 'You can do some of that coding right here on Codeman.', 'start': 108.527, 'duration': 3.501}, {'end': 119.029, 'text': "You just type HTML, type CSS, type JavaScript, and the results of what you're doing show up here in this kind of big white area,", 'start': 112.048, 'duration': 6.981}, {'end': 120.47, 'text': 'the preview area over here.', 'start': 119.029, 'duration': 1.441}, {'end': 128.692, 'text': 'So if I were to type hello campers as I type, you can see that being output over here.', 'start': 120.53, 'duration': 8.162}], 'summary': "Codepen's editor allows coding in html, css, and javascript. learning to code on freecodecamp with real-time results.", 'duration': 30.668, 'max_score': 98.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM98024.jpg'}, {'end': 205.898, 'src': 'heatmap', 'start': 163.005, 'weight': 0.78, 'content': [{'end': 165.886, 'text': "I can even open a console here, and it'll show me those results.", 'start': 163.005, 'duration': 2.881}, {'end': 167.647, 'text': 'We have a console writing CodePenso.', 'start': 165.926, 'duration': 1.721}, {'end': 169.547, 'text': "Wow, I've made my first pen.", 'start': 168.127, 'duration': 1.42}, {'end': 171.168, 'text': 'Congratulations, myself.', 'start': 169.627, 'duration': 1.541}, {'end': 172.988, 'text': "I've done good work here.", 'start': 171.708, 'duration': 1.28}, {'end': 178.67, 'text': "So what else can you do here? Let's like do something a little bit more robust.", 'start': 174.129, 'duration': 4.541}, {'end': 181.091, 'text': "Let's make like a card component.", 'start': 178.73, 'duration': 2.361}, {'end': 184.431, 'text': "So you see I've just typed card and then press tab right there.", 'start': 181.431, 'duration': 3}, {'end': 186.472, 'text': "That's Emmet, which you might be familiar with.", 'start': 184.471, 'duration': 2.001}, {'end': 188.112, 'text': 'That works in lots of different editors.', 'start': 186.512, 'duration': 1.6}, {'end': 191.973, 'text': 'Helps me write HTML a little quicker and has some CSS stuff as well.', 'start': 188.492, 'duration': 3.481}, {'end': 195.034, 'text': "Let's have an H2 and I'll say my card.", 'start': 192.253, 'duration': 2.781}, {'end': 196.495, 'text': "Let's say it'll have some..", 'start': 195.554, 'duration': 0.941}, {'end': 205.898, 'text': "I'm going to type lorem and hit tab and you get a bunch of gibberish text lorem ipsum text it's called just filler text you know.", 'start': 197.935, 'duration': 7.963}], 'summary': 'Demonstration of creating a card component using codepen, including emmet for faster html writing.', 'duration': 42.893, 'max_score': 163.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM163005.jpg'}, {'end': 205.898, 'src': 'embed', 'start': 174.129, 'weight': 4, 'content': [{'end': 178.67, 'text': "So what else can you do here? Let's like do something a little bit more robust.", 'start': 174.129, 'duration': 4.541}, {'end': 181.091, 'text': "Let's make like a card component.", 'start': 178.73, 'duration': 2.361}, {'end': 184.431, 'text': "So you see I've just typed card and then press tab right there.", 'start': 181.431, 'duration': 3}, {'end': 186.472, 'text': "That's Emmet, which you might be familiar with.", 'start': 184.471, 'duration': 2.001}, {'end': 188.112, 'text': 'That works in lots of different editors.', 'start': 186.512, 'duration': 1.6}, {'end': 191.973, 'text': 'Helps me write HTML a little quicker and has some CSS stuff as well.', 'start': 188.492, 'duration': 3.481}, {'end': 195.034, 'text': "Let's have an H2 and I'll say my card.", 'start': 192.253, 'duration': 2.781}, {'end': 196.495, 'text': "Let's say it'll have some..", 'start': 195.554, 'duration': 0.941}, {'end': 205.898, 'text': "I'm going to type lorem and hit tab and you get a bunch of gibberish text lorem ipsum text it's called just filler text you know.", 'start': 197.935, 'duration': 7.963}], 'summary': 'Demonstrating the use of emmet for faster html and css coding, creating a card component with lorem ipsum text.', 'duration': 31.769, 'max_score': 174.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM174129.jpg'}, {'end': 275.368, 'src': 'embed', 'start': 248.871, 'weight': 5, 'content': [{'end': 253.394, 'text': 'I can kind of control the look of how things are going here on CodePen.', 'start': 248.871, 'duration': 4.523}, {'end': 256.976, 'text': "I can move my editors over here if it's more convenient or put them at the top.", 'start': 253.414, 'duration': 3.562}, {'end': 258.998, 'text': 'I can do all kinds of stuff.', 'start': 257.617, 'duration': 1.381}, {'end': 261.079, 'text': "So again, I'm just saving my pen as I go.", 'start': 259.257, 'duration': 1.822}, {'end': 265.442, 'text': 'I can title it and say, playing with cards, for example.', 'start': 261.298, 'duration': 4.144}, {'end': 268.344, 'text': "And I'll be able to find this again pretty easily at any time.", 'start': 265.782, 'duration': 2.562}, {'end': 270.045, 'text': 'I can jump back to my dashboard.', 'start': 268.404, 'duration': 1.641}, {'end': 273.987, 'text': "That's available in my user menu here or any header that looks like this.", 'start': 270.345, 'duration': 3.642}, {'end': 275.368, 'text': "It'll say your dashboard.", 'start': 274.067, 'duration': 1.301}], 'summary': 'Control layout and manage content easily on codepen, including saving, titling, and accessing work efficiently.', 'duration': 26.497, 'max_score': 248.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM248871.jpg'}], 'start': 1.343, 'title': 'Exploring codepen and creating a card component', 'summary': 'Introduces codepen, highlighting its features and ease of use. it also demonstrates creating a card component with html and css, utilizing features like emmet for quicker html writing and code completion for css.', 'chapters': [{'end': 172.988, 'start': 1.343, 'title': 'Introduction to codepen', 'summary': 'Introduces codepen as a platform for coding exercises, highlighting its features, ease of use, and the ability to create and showcase code snippets, encouraging free code camp users to explore it for their coding journey.', 'duration': 171.645, 'highlights': ['CodePen allows users to create and showcase code snippets, including HTML, CSS, and JavaScript, with real-time preview, making it a valuable tool for learning to code. CodePen provides a platform to write HTML, CSS, and JavaScript code, showcasing real-time results, making it useful for learning to code.', 'Users can sign up for a free account on CodePen, which enables them to explore and create various coding projects. CodePen offers free account sign-up, allowing users to explore and create coding projects.', 'CodePen features a curated collection of interesting code snippets created by users, providing a source of inspiration and learning opportunities. CodePen showcases a curated collection of code snippets, offering inspiration and learning opportunities for users.', "CodePen's editor allows users to write and test HTML, CSS, and JavaScript code, providing a hands-on coding experience. CodePen's editor enables users to write and test HTML, CSS, and JavaScript, offering a practical coding experience."]}, {'end': 313.192, 'start': 174.129, 'title': 'Creating a card component', 'summary': 'Demonstrates creating a card component with html and css, utilizing features like emmet for quicker html writing and code completion for css, and navigating and managing the work in codepen.', 'duration': 139.063, 'highlights': ['Creating a card component with HTML and CSS The chapter demonstrates creating a card component using HTML and CSS, showcasing the utilization of features like Emmet for quicker HTML writing and code completion for CSS.', 'Navigating and managing work in CodePen The chapter highlights the ability to navigate and manage work in CodePen, including saving pens, titling them for easy retrieval, accessing the dashboard, and searching for specific work.', 'Utilizing features like Emmet for quicker HTML writing and code completion for CSS The chapter emphasizes the use of Emmet for quicker HTML writing and code completion for CSS, facilitating efficient development.']}], 'duration': 311.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM1343.jpg', 'highlights': ['CodePen allows users to create and showcase code snippets, including HTML, CSS, and JavaScript, with real-time preview, making it a valuable tool for learning to code.', 'CodePen features a curated collection of interesting code snippets created by users, providing a source of inspiration and learning opportunities.', 'Users can sign up for a free account on CodePen, which enables them to explore and create various coding projects.', "CodePen's editor allows users to write and test HTML, CSS, and JavaScript code, providing a hands-on coding experience.", 'The chapter demonstrates creating a card component using HTML and CSS, showcasing the utilization of features like Emmet for quicker HTML writing and code completion for CSS.', 'Navigating and managing work in CodePen, including saving pens, titling them for easy retrieval, accessing the dashboard, and searching for specific work.', 'The chapter emphasizes the use of Emmet for quicker HTML writing and code completion for CSS, facilitating efficient development.']}, {'end': 508.202, 'segs': [{'end': 339.849, 'src': 'embed', 'start': 313.452, 'weight': 0, 'content': [{'end': 317.374, 'text': 'You might notice that the CSS up here says SCSS after that.', 'start': 313.452, 'duration': 3.922}, {'end': 321.756, 'text': "That's a CSS preprocessor, something that's really easy to use on CodePen.", 'start': 317.474, 'duration': 4.282}, {'end': 328.259, 'text': 'So if I click that little cog next to it there or open my settings and go to the CSS tab, well,', 'start': 321.796, 'duration': 6.463}, {'end': 334.162, 'text': "for one thing it's going to show me the title and I might have a description here that says like oh, just showing.", 'start': 328.259, 'duration': 5.903}, {'end': 339.849, 'text': 'Free code camp people some things.', 'start': 335.987, 'duration': 3.862}], 'summary': 'Scss is a css preprocessor, easy to use on codepen, with customization options for title and description.', 'duration': 26.397, 'max_score': 313.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM313452.jpg'}, {'end': 487.252, 'src': 'embed', 'start': 447.594, 'weight': 1, 'content': [{'end': 452.175, 'text': "but anyway, now that we've had added foundation, we should see some changes to our card as well.", 'start': 447.594, 'duration': 4.581}, {'end': 456.917, 'text': "wow, that's kind of cool foundation being applied to the card as well.", 'start': 452.175, 'duration': 4.742}, {'end': 458.959, 'text': 'So lots of stuff to play around with.', 'start': 456.957, 'duration': 2.002}, {'end': 461.641, 'text': 'Write your own code or bring in libraries from elsewhere.', 'start': 459.019, 'duration': 2.622}, {'end': 467.727, 'text': 'You can play with Bootstrap or Bulma or whatever these materialized fancy frameworks are.', 'start': 461.661, 'duration': 6.066}, {'end': 470.249, 'text': 'Those are easy and quick to play with on CodePen.', 'start': 467.807, 'duration': 2.442}, {'end': 475.43, 'text': "So let's say I want to make a variation of this, or I found this and it wasn't mine, it was somebody else's.", 'start': 470.709, 'duration': 4.721}, {'end': 481.291, 'text': "I'd be looking at their pen and I could hit this fork button, which will fork it from their account to my account.", 'start': 476.03, 'duration': 5.261}, {'end': 484.612, 'text': 'It will just give me a copy of it that I can begin playing with immediately.', 'start': 481.391, 'duration': 3.221}, {'end': 485.752, 'text': "So I'll do that.", 'start': 484.652, 'duration': 1.1}, {'end': 487.252, 'text': 'Notice the URL changes.', 'start': 485.832, 'duration': 1.42}], 'summary': 'Introduction to using libraries like bootstrap and bulma for web development, with the ability to fork and modify code on codepen.', 'duration': 39.658, 'max_score': 447.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM447594.jpg'}], 'start': 313.452, 'title': 'Using scss preprocessor, libraries, and codepen forking', 'summary': 'Discusses the advantages of using scss as a css preprocessor on codepen, the benefits of incorporating libraries like foundation, bootstrap, and bulma, and the codepen fork feature, enabling quick creation and modification of code snippets, facilitating collaboration within the community.', 'chapters': [{'end': 426.569, 'start': 313.452, 'title': 'Using scss preprocessor on codepen', 'summary': 'Discusses the use of scss as a css preprocessor on codepen, demonstrating its advantages in creating variables and applying them to css styles, as well as integrating libraries like normalize for quick styling.', 'duration': 113.117, 'highlights': ["SCSS is used as a CSS preprocessor on CodePen, enabling the creation of variables like 'BG color' and applying them to CSS styles, enhancing the design and functionality of components.", 'The demonstration includes the integration of the Normalize library for quick styling, showcasing its impact on font changes and quick application of CSS reset styles.', 'CodePen offers various preprocessors for HTML, CSS, and JavaScript, providing a wide range of options for developers to enhance their coding experience.']}, {'end': 467.727, 'start': 427.189, 'title': 'Using libraries in code', 'summary': 'Discusses the benefits of using libraries like foundation, bootstrap, and bulma, highlighting the ease of adding them to the codebase and the ability to apply pre-built styles to elements.', 'duration': 40.538, 'highlights': ['Adding libraries like Foundation to the codebase allows for easy integration and application of pre-built styles, enhancing the visual appeal of elements.', 'The chapter emphasizes the flexibility to experiment with various libraries such as Bootstrap and Bulma, showcasing the versatility in code development.', 'Utilizing the quick add feature to find and integrate libraries streamlines the process, improving efficiency in code development.']}, {'end': 508.202, 'start': 467.807, 'title': 'Codepen forking feature', 'summary': "Introduces the codepen fork feature, allowing users to quickly create a unique copy of a code snippet from another user's account, enabling easy modification without affecting the original. the feature facilitates collaboration and innovation within the codepen community.", 'duration': 40.395, 'highlights': ["Users can use the fork button on CodePen to create a new copy of another user's code snippet, allowing for immediate modification and experimentation.", 'The forked copy is unique and any changes made to it will not affect the original code snippet, enabling users to create variations without altering the original.', 'This feature fosters collaboration and creativity within the CodePen community, facilitating the sharing and modification of code snippets.']}], 'duration': 194.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM313452.jpg', 'highlights': ["SCSS is used as a CSS preprocessor on CodePen, enabling the creation of variables like 'BG color' and applying them to CSS styles, enhancing the design and functionality of components.", 'Adding libraries like Foundation to the codebase allows for easy integration and application of pre-built styles, enhancing the visual appeal of elements.', "Users can use the fork button on CodePen to create a new copy of another user's code snippet, allowing for immediate modification and experimentation."]}, {'end': 666.522, 'segs': [{'end': 549.322, 'src': 'embed', 'start': 521.611, 'weight': 0, 'content': [{'end': 528.955, 'text': "so i'll go under my user menu here and i can pop open settings and it's going to take me right to my editor settings and there's a lot of stuff here.", 'start': 521.611, 'duration': 7.344}, {'end': 533.397, 'text': 'so you know, forgive it being a little overwhelming, but I can say, you know, when I start a new pen,', 'start': 528.955, 'duration': 4.442}, {'end': 543.68, 'text': 'my defaults make my defaults Sass and turn these settings on, and I like tabs instead of spaces and maybe I like you know Gintronic as a font,', 'start': 533.397, 'duration': 10.283}, {'end': 549.322, 'text': 'or Firecode or Fira code rather than Operator Mono or whatever.', 'start': 543.68, 'duration': 5.642}], 'summary': 'Accessing editor settings from user menu, setting defaults for new pen including sass, tabs, and font preferences.', 'duration': 27.711, 'max_score': 521.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM521611.jpg'}, {'end': 632.058, 'src': 'embed', 'start': 603.925, 'weight': 1, 'content': [{'end': 609.648, 'text': "and So cool, like there's no code here, but the background's already purple because there really is some code.", 'start': 603.925, 'duration': 5.723}, {'end': 611.829, 'text': "It's the CSS from that other pen on this one.", 'start': 609.668, 'duration': 2.161}, {'end': 618.913, 'text': "So if we wrote card again and wrote hello, we're going to have a card in the middle here, but we didn't have to style it this time.", 'start': 612.229, 'duration': 6.684}, {'end': 623.636, 'text': 'The CSS was coming from elsewhere, just like it would have been if we loaded up Bootstrap or something like that.', 'start': 619.213, 'duration': 4.423}, {'end': 625.696, 'text': "So that's kind of neat.", 'start': 624.256, 'duration': 1.44}, {'end': 632.058, 'text': "The other way around is let's say I wanted to use this pen, the HTML and not the CSS.", 'start': 625.756, 'duration': 6.302}], 'summary': 'Demonstrating how css from another pen can style html, showing code reuse and efficiency.', 'duration': 28.133, 'max_score': 603.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM603925.jpg'}, {'end': 670.403, 'src': 'embed', 'start': 642.281, 'weight': 2, 'content': [{'end': 647.042, 'text': 'But I can also, this is just kind of interesting thing you should know, is grab this URL.', 'start': 642.281, 'duration': 4.761}, {'end': 653.489, 'text': 'Oops and put it in triple brackets over here, paste.', 'start': 647.062, 'duration': 6.427}, {'end': 654.49, 'text': 'Get rid of that.', 'start': 653.929, 'duration': 0.561}, {'end': 657.713, 'text': "And it's going to pull in the HTML from that pen into this pen.", 'start': 654.77, 'duration': 2.943}, {'end': 661.577, 'text': "So if I make changes to this HTML, boom, I'll see it over here as well.", 'start': 657.973, 'duration': 3.604}, {'end': 666.522, 'text': 'So just kind of a little interesting trick that you may not have known about in the past.', 'start': 661.657, 'duration': 4.865}, {'end': 670.403, 'text': "so let's do something kind of javascripty for one.", 'start': 667.322, 'duration': 3.081}], 'summary': 'You can use a url to pull in html and see changes in real-time.', 'duration': 28.122, 'max_score': 642.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM642281.jpg'}], 'start': 508.202, 'title': 'Customizing codepen settings', 'summary': 'Explains how to customize codepen settings, including setting default preferences for starting a new pen, changing themes, and leveraging css and html from other pens to enhance the coding experience.', 'chapters': [{'end': 666.522, 'start': 508.202, 'title': 'Customizing codepen settings', 'summary': 'Explains how to customize codepen settings, including setting default preferences for starting a new pen, changing themes, and leveraging css and html from other pens to enhance the coding experience.', 'duration': 158.32, 'highlights': ['Explaining how to set default preferences for starting a new pen, such as making Sass the default and choosing font and tab preferences. Customizing default preferences for starting a new pen, like making Sass the default and choosing font and tab preferences.', 'Demonstrating the process of leveraging CSS from one pen to another by using its URL, leading to the background color change without manually styling. Using the URL of a pen to load its CSS into another pen, resulting in automatic background color changes.', "Describing a technique to import HTML from one pen to another by placing the pen's URL in triple brackets, enabling real-time updates when editing the HTML. Importing HTML from one pen to another by placing the pen's URL in triple brackets, allowing real-time updates when editing the HTML."]}], 'duration': 158.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM508202.jpg', 'highlights': ['Explaining how to set default preferences for starting a new pen, such as making Sass the default and choosing font and tab preferences.', 'Demonstrating the process of leveraging CSS from one pen to another by using its URL, leading to the background color change without manually styling.', "Describing a technique to import HTML from one pen to another by placing the pen's URL in triple brackets, enabling real-time updates when editing the HTML."]}, {'end': 931.52, 'segs': [{'end': 897.036, 'src': 'embed', 'start': 702.036, 'weight': 0, 'content': [{'end': 712.445, 'text': "but we could say, I'm gonna let, because we can write in modern JavaScript, why not right let button, equal query selector button.", 'start': 702.036, 'duration': 10.409}, {'end': 720.176, 'text': 'Now I have a reference to that button and I can use the regular browser console if I want.', 'start': 715.854, 'duration': 4.322}, {'end': 726.98, 'text': "Also, I could say well, if I type button here, it's not going to be quite right because the context is wrong right?", 'start': 720.296, 'duration': 6.684}, {'end': 733.963, 'text': 'I would have to make sure to select the correct context, which is one of these things.', 'start': 727.02, 'duration': 6.943}, {'end': 738.706, 'text': 'Or you know what? If you just inspect something, it changes the context for you.', 'start': 734.083, 'duration': 4.623}, {'end': 744.189, 'text': 'So now if I type button, button is not defined.', 'start': 738.806, 'duration': 5.383}, {'end': 746.63, 'text': 'Oh, document.', 'start': 745.709, 'duration': 0.921}, {'end': 751.912, 'text': 'Document.querySelector Where are you free code camp people? You got to watch me.', 'start': 747.43, 'duration': 4.482}, {'end': 755.374, 'text': "So now I'm in the right context.", 'start': 753.913, 'duration': 1.461}, {'end': 757.815, 'text': "And now if I type button, it's going to show me.", 'start': 755.414, 'duration': 2.401}, {'end': 760.496, 'text': 'Come on.', 'start': 759.936, 'duration': 0.56}, {'end': 762.937, 'text': 'In my console is button the right thing?', 'start': 760.696, 'duration': 2.241}, {'end': 771.852, 'text': 'one let button query selector for the button element.', 'start': 766.429, 'duration': 5.423}, {'end': 773.452, 'text': "i still think it should be, it's.", 'start': 771.852, 'duration': 1.6}, {'end': 773.832, 'text': "oh it's.", 'start': 773.452, 'duration': 0.38}, {'end': 776.854, 'text': "i see it, that's the one is just coming from this or whatever.", 'start': 773.832, 'duration': 3.022}, {'end': 784.737, 'text': 'but we can say uh, button dot, add event listener, click.', 'start': 776.854, 'duration': 7.883}, {'end': 787.718, 'text': "so if you click that button, it's going to run some code and we can.", 'start': 784.737, 'duration': 2.981}, {'end': 789.039, 'text': 'can we stay?', 'start': 787.718, 'duration': 1.321}, {'end': 790.9, 'text': 'can we stay fancy?', 'start': 789.039, 'duration': 1.861}, {'end': 797.677, 'text': "yes, 60, oh look, furicode has this nice ligature button, kind of thingy here, isn't it Click?", 'start': 790.9, 'duration': 6.777}, {'end': 801.421, 'text': "Oh, it's click, but we need a click.", 'start': 798.478, 'duration': 2.943}, {'end': 808.029, 'text': "We need the event, I guess, or you could just have empty if you're not going to use the event, which we're not going to.", 'start': 802.983, 'duration': 5.046}, {'end': 810.893, 'text': "We'll say console.log click.", 'start': 808.35, 'duration': 2.543}, {'end': 816.291, 'text': 'So I am going to open my, my console here and okay.', 'start': 811.71, 'duration': 4.581}, {'end': 818.612, 'text': 'It is logging the right button at the top of this.', 'start': 816.471, 'duration': 2.141}, {'end': 825.514, 'text': 'I can always write console dot clear, which every time the pen runs, then it will clear the console instead of it just persisting.', 'start': 818.672, 'duration': 6.842}, {'end': 827.255, 'text': 'You might want it either way, but whatever.', 'start': 825.654, 'duration': 1.601}, {'end': 828.075, 'text': 'So, okay.', 'start': 827.595, 'duration': 0.48}, {'end': 829.435, 'text': 'I click this button over and over.', 'start': 828.095, 'duration': 1.34}, {'end': 830.496, 'text': 'Click, click, click, click.', 'start': 829.575, 'duration': 0.921}, {'end': 831.176, 'text': 'That should work.', 'start': 830.536, 'duration': 0.64}, {'end': 833.637, 'text': 'Let button.', 'start': 832.996, 'duration': 0.641}, {'end': 841.806, 'text': 'Is it not liking lead or something? Query selector for a button.', 'start': 836.077, 'duration': 5.729}, {'end': 843.949, 'text': 'There really is a button.', 'start': 842.867, 'duration': 1.082}, {'end': 844.81, 'text': "It's right here.", 'start': 844.129, 'duration': 0.681}, {'end': 846.352, 'text': "I'm clicking the button.", 'start': 845.29, 'duration': 1.062}, {'end': 852.819, 'text': 'Add event listener.', 'start': 850.396, 'duration': 2.423}, {'end': 854.021, 'text': 'I think I spelled it wrong.', 'start': 852.92, 'duration': 1.101}, {'end': 856.697, 'text': 'i spelled it wrong.', 'start': 855.695, 'duration': 1.002}, {'end': 860.502, 'text': "there it is, i'm so glad, okay, so click, click, click, click, click.", 'start': 856.697, 'duration': 3.805}, {'end': 863.186, 'text': "we've just done a little javascript or whatever.", 'start': 860.502, 'duration': 2.684}, {'end': 865.089, 'text': 'that all works perfectly well.', 'start': 863.186, 'duration': 1.903}, {'end': 866.371, 'text': 'uh, in codepen as well.', 'start': 865.089, 'duration': 1.282}, {'end': 868.113, 'text': 'should we have it actually do something?', 'start': 866.371, 'duration': 1.742}, {'end': 869.815, 'text': 'maybe we should select the card as well.', 'start': 868.113, 'duration': 1.702}, {'end': 871.451, 'text': "It definitely wasn't that.", 'start': 870.41, 'duration': 1.041}, {'end': 875.135, 'text': "Let's say the card is the card.", 'start': 872.572, 'duration': 2.563}, {'end': 878.238, 'text': "I know a lot of times you use query selector all, but there's only one card here.", 'start': 875.175, 'duration': 3.063}, {'end': 879.54, 'text': "We know there's only one card.", 'start': 878.278, 'duration': 1.262}, {'end': 881.842, 'text': "So we'll just say card.", 'start': 879.58, 'duration': 2.262}, {'end': 884.065, 'text': 'has you know when you click it?', 'start': 881.842, 'duration': 2.223}, {'end': 891.733, 'text': "we're going to say card.classlist.addAway, because we've told it to go away right?", 'start': 884.065, 'duration': 7.668}, {'end': 896.215, 'text': "So we're using SCSS, so we can nest in our CSS a little bit.", 'start': 892.153, 'duration': 4.062}, {'end': 897.036, 'text': "That's always fun.", 'start': 896.235, 'duration': 0.801}], 'summary': 'Using modern javascript, we select and add event listeners to buttons, and manipulate the card with css in a codepen environment.', 'duration': 195, 'max_score': 702.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM702036.jpg'}], 'start': 667.322, 'title': 'Javascript manipulation and event listeners', 'summary': 'Discusses modern javascript manipulation of elements using queryselector, navigating context, and adding event listeners with successful logging of button clicks. it also shows implementing a css animation on a button click, resulting in a card disappearing with a one-second transition and a 2,000-pixel vertical translation.', 'chapters': [{'end': 757.815, 'start': 667.322, 'title': 'Modern javascript: selecting and manipulating elements', 'summary': 'Discusses selecting and manipulating elements using modern javascript, including using queryselector and navigating the context to access elements, as demonstrated by the speaker.', 'duration': 90.493, 'highlights': ['The speaker demonstrates using querySelector to create a reference to a button element in the document.', 'The context in which JavaScript is executed affects the ability to access elements, as shown by the speaker when discussing the need to change context for proper element selection.', "The chapter emphasizes the importance of understanding context when working with JavaScript, as demonstrated by the speaker's experience with context issues while attempting to access elements."]}, {'end': 844.81, 'start': 759.936, 'title': 'Button event listener and console logging', 'summary': 'Covers adding an event listener to a button and logging the click event in the console, with a demonstration of using queryselector and addeventlistener, resulting in the successful logging of button clicks in the console.', 'duration': 84.874, 'highlights': ['The demonstration of using querySelector and addEventListener to attach a click event to a button element and log the click event in the console.', 'Logging the click event in the console using console.log, resulting in the successful tracking of button clicks.', 'Clearing the console with console.clear to reset the logging display for each new run of the code.']}, {'end': 931.52, 'start': 845.29, 'title': 'Javascript event listener and css animation', 'summary': 'Demonstrates adding an event listener in javascript to a button and implementing a css animation to make a card disappear when clicked, with the transition taking one second and the vertical translation of 2,000 pixels.', 'duration': 86.23, 'highlights': ['Implementing CSS animation Demonstrates adding a CSS class to make a card disappear when clicked', 'Adding event listener in JavaScript Shows the process of adding an event listener to a button']}], 'duration': 264.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM667322.jpg', 'highlights': ['The speaker demonstrates using querySelector to create a reference to a button element in the document.', 'The demonstration of using querySelector and addEventListener to attach a click event to a button element and log the click event in the console.', 'Implementing CSS animation Demonstrates adding a CSS class to make a card disappear when clicked', 'The context in which JavaScript is executed affects the ability to access elements, as shown by the speaker when discussing the need to change context for proper element selection.', "The chapter emphasizes the importance of understanding context when working with JavaScript, as demonstrated by the speaker's experience with context issues while attempting to access elements.", 'Logging the click event in the console using console.log, resulting in the successful tracking of button clicks.', 'Adding event listener in JavaScript Shows the process of adding an event listener to a button', 'Clearing the console with console.clear to reset the logging display for each new run of the code.']}, {'end': 1366.47, 'segs': [{'end': 1006.007, 'src': 'embed', 'start': 976.426, 'weight': 2, 'content': [{'end': 981.591, 'text': "but you can always go under your javascript settings and we i know we haven't looked at this, but surprise,", 'start': 976.426, 'duration': 5.165}, {'end': 992.619, 'text': 'surprise you can add external javascript libraries like jquery or react or view or all that type of stuff and preprocess with things like Babel or CoffeeScript and all that.', 'start': 981.591, 'duration': 11.028}, {'end': 997.342, 'text': 'But what I was going to show you is under the behavior tab, you can say auto updating preview.', 'start': 992.679, 'duration': 4.663}, {'end': 998.903, 'text': "Nope, don't want that.", 'start': 997.642, 'duration': 1.261}, {'end': 1000.584, 'text': "So you'll get a run button.", 'start': 999.243, 'duration': 1.341}, {'end': 1006.007, 'text': 'So you got to remember you did this because you might make a change like my car with exclamation points.', 'start': 1000.924, 'duration': 5.083}], 'summary': 'Javascript settings allow adding external libraries like jquery or react, and preprocessing with babel or coffeescript. behavior tab features auto-updating preview and run button.', 'duration': 29.581, 'max_score': 976.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM976426.jpg'}, {'end': 1146.235, 'src': 'embed', 'start': 1117.27, 'weight': 1, 'content': [{'end': 1125.376, 'text': 'So if I look up checkboxes in search, this is what I wanted to show you, a search on CodePen and just enter that search.', 'start': 1117.27, 'duration': 8.106}, {'end': 1128.017, 'text': "We're going to show you all kinds of stuff here.", 'start': 1125.676, 'duration': 2.341}, {'end': 1135.663, 'text': "I guess it's not showing you how many results there are, but I'll tell you for checkboxes, there's probably tens of thousands or more of results here.", 'start': 1128.678, 'duration': 6.985}, {'end': 1146.235, 'text': "And we're kind of ordering them by relevance and hearts and views and comments and all kinds of fancy stuff here to make sure that when you search for stuff,", 'start': 1135.723, 'duration': 10.512}], 'summary': 'Codepen search yields tens of thousands of checkbox results, ordered by relevance and engagement.', 'duration': 28.965, 'max_score': 1117.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM1117270.jpg'}, {'end': 1282.333, 'src': 'embed', 'start': 1249.075, 'weight': 0, 'content': [{'end': 1254.28, 'text': 'and then we could be typing at the same time and you could see their cursor jumping around and adding code too.', 'start': 1249.075, 'duration': 5.205}, {'end': 1255.301, 'text': 'You can work together.', 'start': 1254.32, 'duration': 0.981}, {'end': 1257.243, 'text': "There's real time features of CodePen.", 'start': 1255.321, 'duration': 1.922}, {'end': 1261.026, 'text': "That's another example of kind of a pro feature on CodePen.", 'start': 1257.263, 'duration': 3.763}, {'end': 1263.047, 'text': "So that's kind of that.", 'start': 1261.767, 'duration': 1.28}, {'end': 1265.888, 'text': "And there's so much more to CodePen.", 'start': 1264.268, 'duration': 1.62}, {'end': 1267.409, 'text': "I haven't shown you projects.", 'start': 1266.008, 'duration': 1.401}, {'end': 1268.929, 'text': "I haven't shown you professor mode.", 'start': 1267.509, 'duration': 1.42}, {'end': 1271.09, 'text': "I haven't shown you asset hosting.", 'start': 1268.969, 'duration': 2.121}, {'end': 1272.01, 'text': "Even that's a big one.", 'start': 1271.17, 'duration': 0.84}, {'end': 1273.29, 'text': "Maybe we'll end with that one.", 'start': 1272.07, 'duration': 1.22}, {'end': 1282.333, 'text': "I can click assets down here and it's going to open up a your files section which I can drag and drop stuff like images and JavaScript and CSS,", 'start': 1273.651, 'duration': 8.682}], 'summary': 'Codepen offers real-time collaboration and additional features like projects, professor mode, and asset hosting.', 'duration': 33.258, 'max_score': 1249.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM1249075.jpg'}], 'start': 931.86, 'title': 'Codepen features and functions', 'summary': 'Explains the features and functions of codepen, such as real-time collaboration, privacy settings, and asset hosting, and highlights its search functionality, with tens of thousands of results for checkboxes, making it suitable for teaching and team collaboration.', 'chapters': [{'end': 1059.935, 'start': 931.86, 'title': 'Codepen features overview', 'summary': 'Explains how to use codepen for web development, including shortcut commands, auto-updating preview, and support for external libraries like jquery and react, making it easy to write and test javascript, css, and html code.', 'duration': 128.075, 'highlights': ["Shortcut command for refreshing The shortcut command 'command shift 5' can be used to refresh the code, making it convenient for developers to see changes without manually refreshing the page.", 'Auto-updating preview Users can enable auto-updating preview in the behavior tab, allowing changes in CSS and JavaScript to be reflected without manually refreshing the page, enhancing the development experience.', 'Support for external libraries and preprocessors CodePen supports adding external JavaScript libraries like jQuery, React, and preprocessors like Babel and CoffeeScript, providing flexibility for developers to use advanced tools in their projects.', 'Usage of React and Ajax on CodePen The chapter demonstrates the usage of React, Ajax calls, state management, and JSX on CodePen, showcasing its capability for advanced web development tasks.']}, {'end': 1366.47, 'start': 1059.935, 'title': 'Codepen features and functions', 'summary': "Introduces various features of codepen, including real-time collaboration, privacy settings, and asset hosting, and highlights its search functionality, mentioning tens of thousands of results for checkboxes and emphasizing the platform's use in teaching and team collaboration.", 'duration': 306.535, 'highlights': ["CodePen search yields tens of thousands of results for checkboxes, demonstrating the platform's extensive collection and usage.", "Privacy settings allow users to make their work private, demonstrating the platform's flexibility and control over sharing.", "Real-time collaboration in CodePen enables multiple users to work together, showcasing the platform's interactive features and suitability for teamwork and teaching environments.", "Asset hosting on CodePen provides quick access to images and files, offering convenient resources for users' projects."]}], 'duration': 434.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vb9uYBtqmeM/pics/vb9uYBtqmeM931860.jpg', 'highlights': ["Real-time collaboration in CodePen enables multiple users to work together, showcasing the platform's interactive features and suitability for teamwork and teaching environments.", "CodePen search yields tens of thousands of results for checkboxes, demonstrating the platform's extensive collection and usage.", 'Support for external libraries and preprocessors CodePen supports adding external JavaScript libraries like jQuery, React, and preprocessors like Babel and CoffeeScript, providing flexibility for developers to use advanced tools in their projects.', 'Auto-updating preview Users can enable auto-updating preview in the behavior tab, allowing changes in CSS and JavaScript to be reflected without manually refreshing the page, enhancing the development experience.']}], 'highlights': ['CodePen allows users to create and showcase code snippets, including HTML, CSS, and JavaScript, with real-time preview, making it a valuable tool for learning to code.', "Real-time collaboration in CodePen enables multiple users to work together, showcasing the platform's interactive features and suitability for teamwork and teaching environments.", 'Support for external libraries and preprocessors CodePen supports adding external JavaScript libraries like jQuery, React, and preprocessors like Babel and CoffeeScript, providing flexibility for developers to use advanced tools in their projects.', 'Adding libraries like Foundation to the codebase allows for easy integration and application of pre-built styles, enhancing the visual appeal of elements.', "SCSS is used as a CSS preprocessor on CodePen, enabling the creation of variables like 'BG color' and applying them to CSS styles, enhancing the design and functionality of components.", 'Explaining how to set default preferences for starting a new pen, such as making Sass the default and choosing font and tab preferences.', 'Navigating and managing work in CodePen, including saving pens, titling them for easy retrieval, accessing the dashboard, and searching for specific work.', 'Auto-updating preview Users can enable auto-updating preview in the behavior tab, allowing changes in CSS and JavaScript to be reflected without manually refreshing the page, enhancing the development experience.', 'The chapter demonstrates creating a card component using HTML and CSS, showcasing the utilization of features like Emmet for quicker HTML writing and code completion for CSS.', "Users can use the fork button on CodePen to create a new copy of another user's code snippet, allowing for immediate modification and experimentation."]}