Let’s Look at the HTML Markup
Lab: Customizing the “Read More” Link in Beans
Video Runtime: 09:16
In this episode, let’s devise a strategy for finding where the “read more” code is being processed in Beans. The strategy I use is to start with the end result, which in this case is the HTML in the browser. Using Developer Tools, you’ll inspect the HTML (in either Firefox or Chrome). Then we’ll talk about different strategies you can use to find the source code that builds (renders) this HTML.
We’ll also talk about what the term “render” means as we talk about how web servers and browsers work.
Whoever says that coding is hard, just smack them.
Episodes
Total Lab Runtime: 02:21:26
- 1 Lab Introductionfree 17:36
- 2 Let's Look at the HTML Markupfree 09:16
- 3 Find Where Beans Renders the "Read More"pro 15:37
- 4 Remove the >> Iconfree 09:46
- 5 Change the "Continue reading" Textfree 08:03
- 6 Append "..." After the Textfree 06:06
- 7 Dive into Bean's beans_output()pro 15:46
- 8 Dive into Beans' beans_open_markup()pro 15:50
- 9 Dive into Beans' beans_close_markup()pro 03:04
- 10 Adding HTML Attributes using beans_add_attributes()pro 09:10
- 11 Style It to Look Like a Buttonfree 04:04
- 12 Add UIKit Button Attributespro 08:16
- 13 No More Inline. Put On A New Linepro 01:48
- 14 Wrap It in a Paragraphpro 05:11
- 15 Change the UIKit Iconpro 06:32
- 16 Wrap it Upfree 05:21
