From the course: Interactive Dashboards with Plotly and Dash
Unlock this course with a free trial
Join today to access over 25,300 courses taught by industry experts.
Solution: HTML and markdown
From the course: Interactive Dashboards with Plotly and Dash
Solution: HTML and markdown
- [Instructor] All right everybody, our solution code is up on the right. Let's go ahead and dive into the notebook. Alright, and so let's go ahead and run this cell. And so we end up with this page. Let's start with our first element. We had a font family of Ariel. Ariel tends to be better than the default times New Roman for web apps, typically we want San serif fonts rather than Sarif fonts. San sarif fonts tend to look a little bit cleaner. Sarif fonts like Times New Roman are better for printed materials. We change our background color to black and the text color to light gray, which is going to be the default unless less specified elsewhere. And so we then open up our children argument. So this is going to contain multiple HTML elements. So we have our level one header that says Hello, this is that gray aerial font. We then open up a paragraph that says Welcome to the and then Best. And we've made this red, bold, and font size 32. So compared to markdown, making things bold is…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
Intro to dashboard layouts2m 26s
-
(Locked)
Visual elements and layout options4m 40s
-
(Locked)
Revisiting Dash app layouts3m 54s
-
(Locked)
HTML and markdown7m 17s
-
(Locked)
Assignment: HTML and markdown2m 15s
-
(Locked)
Solution: HTML and markdown2m 28s
-
(Locked)
HTML styles5m 58s
-
(Locked)
Styling interactive elements4m 9s
-
(Locked)
Styling Plotly figures3m 4s
-
(Locked)
Assignment: App styling1m 26s
-
(Locked)
Solution: App styling2m 25s
-
(Locked)
Dash Bootstrap components4m 10s
-
(Locked)
Dash Bootstrap themes5m 1s
-
(Locked)
Demo: Applying a Bootstrap theme4m 27s
-
(Locked)
Grid-based layouts6m 44s
-
(Locked)
Demo: Grid-based layouts5m 54s
-
(Locked)
Multiple tabs3m 45s
-
(Locked)
Demo: Multiple tabs3m 48s
-
(Locked)
Assignment: Building a layout1m 27s
-
(Locked)
Solution: Building a layout3m 10s
-
(Locked)
Key takeaways2m 9s
-
(Locked)
-
-