Introduction to HTML, CSS, and Chrome DevTools for Shiny Apps Layouts

Marcelo Guarido

For this lab, we will continue from where we stopped in Lab 2: Fundamentals of R, Flexdashboard, and Shiny for Data Science, when we built a Shiny App from scratch but without modifying its layout. Now, the next step to create a product to increase the business value of your organization is to edit the app's layout to something that has the "face" of your research group, company, or organization. This requires mild abilities in HTML, CSS, and a little help from the Chrome DevTools (this last one is not mandatory, but it is quite powerful). We are going to show you how to change and edit the app's fonts, colours, and behaviour by combining the tools cited before. By the end of the session, you will be able to easily read a Flexdashboard code, interpret all the CSS and HTML layouts, and to create your own app!!!