FREELessons: 19Length: 1.1 hours


Next lesson playing in 5 seconds
CancelSemantic UI for Web Apps: Angular, React, and Vanilla JS
Introduction
00:52
Semantic UI is a CSS framework with a unique, programmer-friendly concept. With Semantic UI, you describe what each part of your interface is for, and the framework will use that information to decide how it looks. Classes are simple and readable, and they use a very natural syntax.
In this course, you'll learn how to use Semantic UI in your web app projects. You'll see how easy it is to create a great interface with Semantic, how to use its many unique components, and how to use themes to modify every part of the default look and feel. Not only that, but you'll get to see how Semantic is integrated in three different front-end environments: Angular, React, and vanilla JavaScript.
1.Introduction1 lesson, 00:52
1 lesson, 00:52
1.1Introduction00:52
1.1
Introduction
00:52
2.Get Started with Semantic UI5 lessons, 22:52
5 lessons, 22:52
2.1What Is Semantic UI?04:11
2.1
What Is Semantic UI?
04:11
2.2Theming in Semantic UI06:42
2.2
Theming in Semantic UI
06:42
2.3Semantic Collections04:36
2.3
Semantic Collections
04:36
2.4Semantic Elements03:22
2.4
Semantic Elements
03:22
2.5Semantic Views and Modules04:01
2.5
Semantic Views and Modules
04:01
3.Semantic Ui and Vanilla JavaScript4 lessons, 16:22
4 lessons, 16:22
3.1Set Up the JavaScript Project05:37
3.1
Set Up the JavaScript Project
05:37
3.2Set Up the Header With a Menu and Hero Area03:36
3.2
Set Up the Header With a Menu and Hero Area
03:36
3.3Add Some Sections03:32
3.3
Add Some Sections
03:32
3.4About and Contact Sections03:37
3.4
About and Contact Sections
03:37
4.Semantic Ui for React6 lessons, 18:55
6 lessons, 18:55
4.1Set Up the React Project04:16
4.1
Set Up the React Project
04:16
4.2The `Menu` Component03:25
4.2
The `Menu` Component
03:25
4.3The `Submenu` Component03:09
4.3
The `Submenu` Component
03:09
4.4Create a File Listing02:34
4.4
Create a File Listing
02:34
4.5Set Up the Angular 2 Project02:06
4.5
Set Up the Angular 2 Project
02:06
4.6Set Up the Menu03:25
4.6
Set Up the Menu
03:25
5.Semantic Ui and Angular2 lessons, 08:11
2 lessons, 08:11
5.1Set Up a Hero Area05:11
5.1
Set Up a Hero Area
05:11
5.2Set Up the Campaign Information03:00
5.2
Set Up the Campaign Information
03:00
6.Conclusion1 lesson, 00:47
1 lesson, 00:47
6.1Conclusion00:47
6.1
Conclusion
00:47
I'm a longtime Network admin who has finally moved over to coding. Skilled in web development and obsessed with frameworks (Angular, Meteor and Ionic to name a few), I am using my past experience as an instructor to help others learn to use technology.