Master Semantic UI and code 3 projects with 9 pages
4.0 (34 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
303 students enrolled

Master Semantic UI and code 3 projects with 9 pages

Master the latest version of Semantic UI and create real projects and themes while learning HTML, web design and coding
4.0 (34 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
303 students enrolled
Last updated 6/2019
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 14 hours on-demand video
  • 1 article
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn how to create and use all elements, collections, views and modules of the Semantic UI framework
  • Learn how to create three different responsive websites using the Semantic UI framework
  • Practice using a special built Semantic UI Learning Kit with more than 100 source files free to download and use
  • Master the latest version: Semantic UI 2.4
  • How to creating fluid and responsive layouts
  • How to use breakpoints and the grid system
  • How to structure all kinds of content
  • How to build all of the 16 elements
  • How to build all of the 6 collections
  • How to build all of the 6 views
  • How to build all of the 15 modules
  • Project 1: Create a Resume and CV Page
  • Project 2: Create a Small Business Website
  • Project 3: Create a Knowledge Base
Course content
Expand all 98 lectures 14:00:30
+ Introduction
5 lectures 22:52

An introduction to this course, what you are going to learn, the teaching style, and which extra learning materials are included.

Preview 03:54

Get an overview of all the projects you will learn to create in this course. You can also follow the links to experience live demos of all the projects.

Projects Overview and Demos
00:16

A quick introduction to the Semantic UI framework. You will learn about the history, the features, and the process for creating and modifying UI components.

Preview 06:14

Learn how to download and install Semantic UI. This will be a simple setup with compiled and minified source files making it easy for beginners.

Preview 09:49

An introduction to the custom Learning Kit created specifically for this course. You will see what it is and learn how to use it to better learn to code with Semantic UI.

Preview 02:39
+ Elements
17 lectures 03:10:53

Learn how to create and use buttons. A button indicates a possible user action.

Button – Part I
19:04

Learn how to create and use buttons. A button indicates a possible user action.

Button – Part II
13:24

Learn how to create and use containers. A container limits content to a maximum width.

Container
03:50

Learn how to create and use dividers. A divider visually segments content into groups.

Preview 06:17

Learn how to create and use flags. A flag is used to represent a political state.

Flag
02:04

Learn how to create and use headers. A header provides a short summary of content.

Header
12:40

Learn how to create and use icons. An icon is a glyph used to represent something else.

Icon
13:40

Learn how to create and use images. An image is a graphic representation of something.

Image
10:48

Learn how to create and use inputs. An input is a field used to elicit a response from a user.

Preview 12:59

Learn how to create and use labels. A label displays content classification.

Label
15:05

Learn how to create and use lists. A list is used to group related content.

List
23:05

Learn how to create and use loaders. A loader alerts a user to wait for an activity to complete.

Loader
07:55

Learn how to create and use placeholders. A placeholder is used to reserve space for content that soon will appear in a layout.

Preview 10:00

Learn how to create and use rails. A rail is used to show accompanying content outside the boundaries of the main view of a site.

Rail
07:30

Learn how to create and use reveals. A reveal displays additional content in place of previous content when activated.

Reveal
04:36

Learn how to create and use segments. A segment is used to create a grouping of related content.

Segment
17:04

Learn how to create and use steps. A step shows the completion status of an activity in a series of activities.

Preview 10:52
+ Collections
10 lectures 02:19:50

Learn how to create and use breadcrumbs. A breadcrumb is used to show hierarchy between content.

Preview 04:47

Learn how to create and use forms. A form displays a set of related user input fields in a structured way.

Preview 16:42

Learn how to create and use forms. A form displays a set of related user input fields in a structured way.

Form – Part II
08:25

Learn how to create and use grids. A grid is used to harmonize negative space in a layout.

Preview 14:11

Learn how to create and use grids. A grid is used to harmonize negative space in a layout.

Grid – Part II
17:21

Learn how to create and use menus. A menu displays grouped navigation actions.

Menu – Part I
14:58

Learn how to create and use menus. A menu displays grouped navigation actions.

Menu – Part II
14:10

Learn how to create and use messages. A message displays information that explains nearby content.

Message
11:07

Learn how to create and use tables. A table displays a collections of data grouped into rows.

Table – Part I
25:01

Learn how to create and use tables. A table displays a collections of data grouped into rows.

Table – Part II
13:08
+ Views
6 lectures 01:05:22

Learn how to create and use advertisements. An ad displays third-party promotional content.

Advertisement
08:13

Learn how to create and use cards. A card displays site content in a manner similar to a playing card.

Preview 15:53

Learn how to create and use comments. A comment displays user feedback to site content.

Comment
11:44

Learn how to create and use feeds. A feed presents user activity chronologically.

Feed
08:20

Learn how to create and use items. An item view presents large collections of site content for display.

Item
10:52

Learn how to create and use statistics. A statistic emphasizes the current value of an attribute.

Statistic
10:20
+ Modules
17 lectures 04:02:56

Learn how to create and use accordions. An accordion allows users to toggle the display of sections of content.

Accordion
12:52

Learn how to create and use checkboxes. A checkbox allows a user to select a value from a small set of options, often binary.

Checkbox
13:56

Learn how to create and use dimmers. A dimmer hides distractions to focus attention on particular content.

Preview 14:22

Learn how to create and use dropdowns. A dropdown allows a user to select a value from a series of options.

Dropdown – Part I
17:53

Learn how to create and use dropdowns. A dropdown allows a user to select a value from a series of options.

Dropdown – Part II
20:02

Learn how to create and use embeds. An embed displays content from other websites like YouTube videos or Google Maps.

Embed
11:23

Learn how to create and use modals. A modal displays content that temporarily blocks interactions with the main view of a site.

Modal – Part I
17:34

Learn how to create and use modals. A modal displays content that temporarily blocks interactions with the main view of a site.

Modal – Part II
10:22

Learn how to create and use popups. A popup displays additional information on top of a page.

Popup
20:30

Learn how to create and use progress bars. A progress bar shows the progression of a task.

Progress
15:56

Learn how to create and use ratings. A rating indicates user interest in content.

Preview 06:48

Learn how to create and use search modules. A search module allows a user to query for results from a selection of data.

Search
10:27

Learn how to create and use shapes. A shape is a three dimensional object displayed on a two dimensional plane.

Shape
18:02

Learn how to create and use sidebars. A sidebar hides additional content beside a page.

Sidebar
13:36

Learn how to create and use stickies. Sticky content fixes itself to the browser viewport as content is scrolled.

Sticky
11:03

Learn how to create and use tabs. A tab is a hidden section of content activated by a menu.

Tab
12:11

Learn how to create and use transitions. A transition is an animation usually used to move content in or out of view.

Transition
15:59
+ Project 1 – Resume and CV Page
9 lectures 55:39

An introduction to this project. Get an overview of all of the different sections and pages that make up this project and that you'll learn to create. You can also follow the links provided in the "Resources" section of this lecture to download the source code for this project or see an online working demo of the project.

Preview 02:07
Basic Structure
03:57
About
04:21
Work Experience
08:24
Education
03:36
Testimonials
03:10
Contact
13:50
Portfolio
06:56
Skills
09:18
+ Project 2 – Small Business Website
17 lectures 01:10:46

An introduction to this project. Get an overview of all of the different sections and pages that make up this project and that you'll learn to create. You can also follow the links provided in the "Resources" section of this lecture to download the source code for this project or see an online working demo of the project.

Preview 02:50
Index – Basic Setup
01:08
Index – Navigation
04:37
Index – Hero
03:45
Index – Message
02:05
Index – About
03:56
Index – News
04:06
Index – Footer
09:40
Services
05:02
About – Story
02:21
About – Office
02:14
About – Clients
02:34
Team
05:27
Contact – Address
04:06
Contact – Hours
01:36
Contact – Message
11:55
Contact – Map
03:24
+ Project 3 – Knowledge Base
17 lectures 52:11

An introduction to this project. Get an overview of all of the different sections and pages that make up this project and that you'll learn to create. You can also follow the links provided in the "Resources" section of this lecture to download the source code for this project or see an online working demo of the project.

Preview 02:41
Index – Basic Setup
Processing..
Index – Navigation
04:41
Index – Search
01:59
Index – Articles
03:55
Index – Categories
03:44
Index – Footer
04:17
Category – Search
03:23
Category – Breadcrumb
02:01
Category – Page Navigation
06:02
Category – Article List
03:09
Category – Support
01:58
Article – Breadcrumb
02:29
Article – Page Navigation
00:45
Article – Content
04:44
Article – Feedback
04:29
Article – Related Articles
01:54
Requirements
  • Basic understanding of HTML
  • A code editor and a browser
Description

ABOUT

Semantic UI - one of the world's most popular front-end frameworks!

This course covers all the different parts of the latest version of one of the world's most popular front-end framework, Semantic UI 2.4.2. Semantic UI has been used by thousands of people around the world and have been carefully developed to cover a wide range of typical user interfaces.

Web pages built with Semantic UI works across all kinds of devices, browsers and screen sizes and will have a clean and modern design.

This course is for the beginner who want to learn Semantic UI from the bottom up. It goes through all the different parts, but each lecture can be watched independently.

In addition to just learning about the different parts of Semantic UI you will find a detailed walk-through of how to build three different responsive and modern complete projects using only Semantic UI.

PROJECTS

Learn to build the following projects using Semantic UI:

  • Project 1: Resume and CV Page

  • Project 2: Small Business Website

  • Project 3: Knowledge Base

LEARNING STYLE

More than just video lectures

In addition to the video lectures this course contains the following kinds of learning materials:

  • Semantic UI Learning Kit:
    Downloadable ZIP file that works offline
    A custom built learning kit with source code for all parts of Semantic UI. Features a reference section with many examples and a practice section, which you can use while learning about Semantic UI. More than 100 source files included in this learning kit.

UPDATES

Upcoming future updates for this course will include the following:

  • New projects will be added: online shop, social network, portfolio, CMS admin, dashboard and more...

  • New components, utilities and other features in future versions of Semantic UI will be added

  • Advanced section on how to customize Semantic UI with Sass

  • Coding exercises, quizzes and assignments

TESTIMONIALS

Don't take my word for it – read what other students are saying:

Good. Thanks teacher !
– Tạ Hồng Bản

Excelente eleccion.
– Gabriel Galán Maldonado

Who this course is for:
  • Anyone who wants to learn how to make responsive and modern websites with Semantic UI
  • Anyone who wants to learn how to make quick prototypes