Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Master Semantic UI and code 3 projects with 9 pages

Name: Master Semantic UI and code 3 projects with 9 pages
Rating: 4.1 (50 reviews)

Master the latest version of Semantic UI and create real projects and themes while learning HTML, web design and coding

Created byJeppe Schaumburg Jensen

Last updated 6/2019

English

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

8 sections • 98 lectures • 14h 0m total length

About the Course3:54
An introduction to this course, what you are going to learn, the teaching style, and which extra learning materials are included.
Projects Overview and Demos0:16
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.
Understanding Semantic UI6:14
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.
Downloading and Installing Semantic UI9:49
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.
Learning Kit2:39
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.

Button – Part I19:04
Learn how to create and use buttons. A button indicates a possible user action.
Button – Part II13:24
Learn how to create and use buttons. A button indicates a possible user action.
Container3:50
Learn how to create and use containers. A container limits content to a maximum width.
Divider6:17
Learn how to create and use dividers. A divider visually segments content into groups.
Flag2:04
Learn how to create and use flags. A flag is used to represent a political state.
Header12:40
Learn how to create and use headers. A header provides a short summary of content.
Icon13:40
Learn how to create and use icons. An icon is a glyph used to represent something else.
Image10:48
Learn how to create and use images. An image is a graphic representation of something.
Input12:59
Learn how to create and use inputs. An input is a field used to elicit a response from a user.
Label15:05
Learn how to create and use labels. A label displays content classification.
List23:05
Learn how to create and use lists. A list is used to group related content.
Loader7:55
Learn how to create and use loaders. A loader alerts a user to wait for an activity to complete.
Placeholder10:00
Learn how to create and use placeholders. A placeholder is used to reserve space for content that soon will appear in a layout.
Rail7:30
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.
Reveal4:36
Learn how to create and use reveals. A reveal displays additional content in place of previous content when activated.
Segment17:04
Learn how to create and use segments. A segment is used to create a grouping of related content.
Step10:52
Learn how to create and use steps. A step shows the completion status of an activity in a series of activities.

Breadcrumb4:47
Learn how to create and use breadcrumbs. A breadcrumb is used to show hierarchy between content.
Form – Part I16:42
Learn how to create and use forms. A form displays a set of related user input fields in a structured way.
Form – Part II8:25
Learn how to create and use forms. A form displays a set of related user input fields in a structured way.
Grid – Part I14:11
Learn how to create and use grids. A grid is used to harmonize negative space in a layout.
Grid – Part II17:21
Learn how to create and use grids. A grid is used to harmonize negative space in a layout.
Menu – Part I14:58
Learn how to create and use menus. A menu displays grouped navigation actions.
Menu – Part II14:10
Learn how to create and use menus. A menu displays grouped navigation actions.
Message11:07
Learn how to create and use messages. A message displays information that explains nearby content.
Table – Part I25:01
Learn how to create and use tables. A table displays a collections of data grouped into rows.
Table – Part II13:08
Learn how to create and use tables. A table displays a collections of data grouped into rows.

Advertisement8:13
Learn how to create and use advertisements. An ad displays third-party promotional content.
Card15:53
Learn how to create and use cards. A card displays site content in a manner similar to a playing card.
Comment11:44
Learn how to create and use comments. A comment displays user feedback to site content.
Feed8:20
Learn how to create and use feeds. A feed presents user activity chronologically.
Item10:52
Learn how to create and use items. An item view presents large collections of site content for display.
Statistic10:20
Learn how to create and use statistics. A statistic emphasizes the current value of an attribute.

Accordion12:52
Learn how to create and use accordions. An accordion allows users to toggle the display of sections of content.
Checkbox13:56
Learn how to create and use checkboxes. A checkbox allows a user to select a value from a small set of options, often binary.
Dimmer14:22
Learn how to create and use dimmers. A dimmer hides distractions to focus attention on particular content.
Dropdown – Part I17:53
Learn how to create and use dropdowns. A dropdown allows a user to select a value from a series of options.
Dropdown – Part II20:02
Learn how to create and use dropdowns. A dropdown allows a user to select a value from a series of options.
Embed11:23
Learn how to create and use embeds. An embed displays content from other websites like YouTube videos or Google Maps.
Modal – Part I17: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 II10:22
Learn how to create and use modals. A modal displays content that temporarily blocks interactions with the main view of a site.
Popup20:30
Learn how to create and use popups. A popup displays additional information on top of a page.
Progress15:56
Learn how to create and use progress bars. A progress bar shows the progression of a task.
Rating6:48
Learn how to create and use ratings. A rating indicates user interest in content.
Search10:27
Learn how to create and use search modules. A search module allows a user to query for results from a selection of data.
Shape18:02
Learn how to create and use shapes. A shape is a three dimensional object displayed on a two dimensional plane.
Sidebar13:36
Learn how to create and use sidebars. A sidebar hides additional content beside a page.
Sticky11:03
Learn how to create and use stickies. Sticky content fixes itself to the browser viewport as content is scrolled.
Tab12:11
Learn how to create and use tabs. A tab is a hidden section of content activated by a menu.
Transition15:59
Learn how to create and use transitions. A transition is an animation usually used to move content in or out of view.

About the Project2:07
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.
Basic Structure3:57
About4:21
Work Experience8:24
Education3:36
Testimonials3:10
Contact13:50
Portfolio6:56
Skills9:18

About the Project2:50
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.
Index – Basic Setup1:08
Index – Navigation4:37
Index – Hero3:45
Index – Message2:05
Index – About3:56
Index – News4:06
Index – Footer9:40
Services5:02
About – Story2:21
About – Office2:14
About – Clients2:34
Team5:27
Contact – Address4:06
Contact – Hours1:36
Contact – Message11:55
Contact – Map3:24

About the Project2:41
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.
Index – Basic Setup
Index – Navigation4:41
Index – Search1:59
Index – Articles3:55
Index – Categories3:44
Index – Footer4:17
Category – Search3:23
Category – Breadcrumb2:01
Category – Page Navigation6:02
Category – Article List3:09
Category – Support1:58
Article – Breadcrumb2:29
Article – Page Navigation0:45
Article – Content4:44
Article – Feedback4:29
Article – Related Articles1: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

Master Semantic UI and code 3 projects with 9 pages

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 23min

Elements17 lectures • 3hr 11min

Collections10 lectures • 2hr 20min

Views6 lectures • 1hr 5min

Modules17 lectures • 4hr 3min

Project 1 – Resume and CV Page9 lectures • 56min

Project 2 – Small Business Website17 lectures • 1hr 11min

Project 3 – Knowledge Base17 lectures • 52min

Requirements

Description

Who this course is for: