[1] My name is Brad Frost • [2]Work • [3]Training • [4]Book • [5]Blog • [6]Contact Ella’s First Website ULTRA PROUD DAD MOMENT: Ella made her first website! Melissa and I woke up on Saturday morning to our goofy 6-year-old daughter entering our bedroom making this obnoxious sound. It was impressively annoying, especially considering she hasn’t seen [7]Dumb and Dumber yet. She truly is her father’s daughter. After we were done laughing, we recorded her and cracked ourselves up listening to the playback. We joked that it would make for a really effective alarm clock. “We should make one!” I said. Her face lit up. “Yeah, we can make a little website that loops the sound. It’ll be funny.” I brought my laptop to breakfast and I fired up my trusty, faithful, incredible friend [8]Codepen. I insisted that Ella drive. Ella on Brad's laptop sitting at the breakfast table I decided to start her with one of the most magical, visceral aspects of front-end development: changing the body‘s background-color. Just look at that reaction as soon as the web page’s canvas changed colors: Ella reacting to the browser window change from white to green when she entered the appropriate CSS code. Surprise. Wonder. Happiness. Pride. Satisfaction. You can see the gears turning. We continued on our journey. Like most kids her age, she is learning to spell and isn’t used to typing on a keyboard. On the back of an envelope, I wrote some of the words and syntax down for her to transcribe: A zoom in of my writing code on the back of an envelope She diligently followed instructions, and though it required patience (she definitely started losing focus over time!) we kept at it. I said we needed picture of her that would be part of the alarm clock website. We took the photo and turned our attention to the next magic trick: replacing the background with her goofy face. She truly is her father’s daughter. I had to intervene a bit here to open up [9]Codepen’s super helpful assets feature to get the image online. But! I taught her how to use the trackpad, as well as copy and paste keyboard commands. It took a second and some fiddling around with the [10]background-size value, but we got her goofy mug onto the website: From there, we turned our attention to the HTML panel to add the [11]audio tag. That was a little tougher, especially since her patience was wearing thin. But I was able to explain that writing [12]loop would make the sound repeat forever, which she thought was funny. I also explained that autoplay would make it start playing immediately, but I learned autoplay (rightly) [13]blocked by default to prevent, say, an annoying sound to loop for infinity. After a little bit more finessing and me getting the audio asset in there, she had her finished website! So here it is: Ella’s [14]funny annoying alarm clock website! See the Pen [15] funny annoying alarm clock by Brad Frost ([16]@bradfrost) on [17]CodePen. She had a great initial reaction, and I think hearing her annoying sound come from a totally different machine didn’t really compute to her. And while her patience was understandably spent, she enjoyed the results. There is a lot I could say here. That this is a beautiful reminder of the absolute magic that is web design and development. That a beginner’s mind can change your perspective. That the declarative and human-readable languages of CSS and HTML help make coding less intimidating. That we could continue to improve the website and add new features. That accessible tools that help people learn web development are incredible. I could go on about all of these things, but I won’t. Instead I will say that I am so incredibly proud of Ella. I am lucky to be the dad of such a smart, creative, hilarious, curious, and yes obnoxious girl. I hope this is but one of many many many many many many creations that leave her head and make their way out into the world. I love you so much, Ella. And yes, I woke her up for school today with her alarm clock. Posted by [18]Brad Frost on [19]27 Nov, 2024 Tags: [20]codepen, [21]css, [22]education, [23]ella, [24]html, [25]life, [26] personal, [27]web design, [28]web development • Brad Frost Hey there! I'm [29]Brad Frost, a design system consultant, web designer, speaker, writer, and musician located in beautiful Pittsburgh, PA. • [30] Atomic Design Book [atomic-des] [atomic-des] • [31]Atomic Design I wrote a book called [32]Atomic Design, which covers all that goes into creating and maintaining effective design systems. You can [33]read it online and [34]order the ebook. • [35] Brad Frost speaking at TEDx Pittsburgh • [36] Wanna work together? I'm a principal and technical strategist at Big Medium, where we help teams establish and evolve design systems, establish more collaborative workflows, and create better software together. Need design system help? Need help leveling up your organization's digital practice? Get in touch! • [37] Blog I write about web design best practices, design systems, responsive design, and other tasty topics on my blog. I also enjoy sharing and commenting on interesting links from around the web. • [38] Contact Does your team need help taking your design system to the next level? Interested in a workshop, consulting, or co-creation project? Have a question about atomic design or web development? Get in touch! • [39] Music Music gives me an enormous amount of mental, physical, and spiritual satisfaction. I just love playing music, plain and simple. • Around the web You can follow along on [40]Bluesky, [41]LinkedIn, [42]Mastodon, [43] Threads, [44]YouTube, [45]Instagram, [46]Github, [47]Codepen, [48]Spotify, and [49]Last.fm. • References: [1] https://bradfrost.com/ [2] https://bradfrost.com/work [3] https://bradfrost.com/workshops [4] http://atomicdesign.bradfrost.com/ [5] https://bradfrost.com/blog [6] https://bradfrost.com/contact [7] https://www.youtube.com/watch?v=aR3MDSF-IpQ [8] https://codepen.io/ [9] https://codepen.io/features/asset-hosting [10] https://developer.mozilla.org/en-US/docs/Web/CSS/background-size [11] https://www.w3schools.com/html/html5_audio.asp [12] https://www.w3schools.com/tags/att_audio_loop.asp [13] https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide [14] https://codepen.io/bradfrost/pen/GRVLEKY?editors=1100 [15] https://codepen.io/bradfrost/pen/GRVLEKY [16] https://codepen.io/bradfrost [17] https://codepen.io/ [18] http://bradfrost.com/ [19] https://bradfrost.com/blog/post/ellas-first-website/ [20] https://bradfrost.com/blog/tag/codepen/ [21] https://bradfrost.com/blog/tag/css/ [22] https://bradfrost.com/blog/tag/education/ [23] https://bradfrost.com/blog/tag/ella/ [24] https://bradfrost.com/blog/tag/html/ [25] https://bradfrost.com/blog/tag/life/ [26] https://bradfrost.com/blog/tag/personal/ [27] https://bradfrost.com/blog/tag/web-design/ [28] https://bradfrost.com/blog/tag/web-development/ [29] http://bradfrost.com/about [30] https://shop.bradfrost.com/ [31] https://shop.bradfrost.com/ [32] http://atomicdesign.bradfrost.com/ [33] http://atomicdesign.bradfrost.com/table-of-contents/ [34] https://shop.bradfrost.com/products/atomic-design-ebook [35] https://bradfrost.com/speaking [36] https://bradfrost.com/work [37] https://bradfrost.com/blog [38] https://bradfrost.com/contact [39] https://bradfrost.com/music [40] https://bsky.app/profile/bradfrost.com [41] https://www.linkedin.com/in/bradfrost [42] https://mastodon.social/@brad_frost [43] https://www.threads.net/@brad_frost [44] https://www.youtube.com/@brad_frost [45] http://instagram.com/brad_frost [46] https://github.com/bradfrost [47] http://codepen.io/bradfrost/ [48] https://open.spotify.com/user/ienjoyhotsoup [49] http://www.last.fm/user/brad_frost