- Overview
- Transcript
1.1 Introduction
Welcome to Semantic UI for Your Web Apps. In this course, I'll show you how to use Semantic UI in your web app projects. You'll learn how to integrate Semantic in three different front-end environments: Angular 2, React, and vanilla JavaScript.
1.Introduction
1.1Introduction00:52
2.Get Started with Semantic UI
2.1What Is Semantic UI?04:11
2.2Theming in Semantic UI06:42
2.3Semantic Collections04:36
2.4Semantic Elements03:22
2.5Semantic Views and Modules04:01
3.Semantic Ui and Vanilla JavaScript
3.1Set Up the JavaScript Project05:37
3.2Set Up the Header With a Menu and Hero Area03:36
3.3Add Some Sections03:32
3.4About and Contact Sections03:37
4.Semantic Ui for React
4.1Set Up the React Project04:16
4.2The `Menu` Component03:25
4.3The `Submenu` Component03:09
4.4Create a File Listing02:34
4.5Set Up the Angular 2 Project02:06
4.6Set Up the Menu03:25
5.Semantic Ui and Angular
5.1Set Up a Hero Area05:11
5.2Set Up the Campaign Information03:00
6.Conclusion
6.1Conclusion00:47
1.1 Introduction
As a web developer you often have a lot of choices to make. One of these choices is how you will construct the user interface of your site or app. Everyone knows about popular libraries like Bootstrap or Foundation, but that often leads to cookie cutter sites when components aren't customized. Semantic UI is a CSS framework built on less. It is notable because it lives up to its name. Using Semantic components is like writing a sentence. Semantic offers all of the components and features you would expect, along with a lot more you didn't see coming. In this course we'll briefly go over the Semantic components, then we build three projects using the framework. First we build a small template with plain JavaScript, HTML, and CSS. Then we will use React to build a small clone of GitHub. Then finally, we will employ Angular 2 with Semantic to build a KickStarter clone. After this course you should understand how to use Semantic UI in your projects going forward.
