Introduction to the elm-ui Course
Welcome to the elm-ui course! We are going to be building a complex dashboard completely from scratch with elm-ui, with a mobile-first approach and in the final lessons of the course we will make it fully responsive! I hope you enjoy the course and that you choose elm-ui for your next project!
Instructor: [0:00] Hey, welcome to my Elm-UI course. I really hope you enjoy it.
[0:04] Elm-UI is an alternative way of doing HTML and CSS, but it does not require you to have a solid understanding of how HTML and CSS work underneath. You don't have to write any HTML or CSS with Elm-UI, which is kind of great.
[0:21] Elm-UI is kind of a replacement to the elm-html module that comes by default [inaudible] with Elm, but of course you can use both, in which we use a single element and style it by using special attributes to style every single element in our application.
[0:37] Ideally, by learning Elm-UI, you won't have to fall back into CSS in 99.99 percent of cases.
[0:45] In this course we're going to go through some of the main modules, most used ones, in Elm-UI, such as Element.Background, Border, Events, Fonts, Inputs and Regions. The project that we're going to build together to learn Elm-UI is the following dashboard.
[1:03] We have a few interaction requirements. There are four dropdowns, each one for each section. As you see, there are four sections in our view. Each dropdown should contain at least 10 options, but we should be prepared to have even more options, but the minimum is 10.
[1:19] Each option within the dropdown should be selected by a checkbook, and when clicked again, it should uncheck the checkbook. Each dropdown should be opened and closed by clicking on it. As you are noticing, only one dropdown can be open at the same time. Clicking anywhere outside each dropdown should close it.
[1:38] Selecting and deselecting an option within each dropdown should obviously not close the dropdown. We need to handle the on-outside dropdown state, so to speak. Selected options should appear as text underneath each category.
[1:51] Last but not least, we should display two columns when we're on desktop, but if we get the screen narrower, say on a mobile device, everything should be displayed in one column and work exactly the same.
[2:04] As you see, it's a simple UI that it's good as any as an example to learn Elm-UI. It has some special touches that will make it a bit interesting, so let's build it together.
[2:14] I hope you enjoy this Elm-UI course. If you do, please share it with others, and see you in the next course.