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

English [Auto],

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
Explore the basic structure of a Semantic UI page by setting up a container and a responsive two column grid, with head scripts for jQuery and Semantic UI.
About4:21
Work Experience8:24
Build a six-item work experience section inside a fluid cart using Semantic UI, each item pairing a left icon with right content, a header, a link, and a date.
Education3:36
Update the education section by replacing icons and headings with university-themed entries, listing degrees from Stanford, Harvard, Berkeley, New York college, and New York high school, while fixing misspellings.
Testimonials3:10
Contact13:50
Create a responsive contact info card with a fluid UI card, stacked items and icons, plus a labeled contact form with name, email, message, and a submit button.
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
Master the basic setup for a Semantic UI project: default installation, type declarations, meta tags, a title and company name, and linking the Semantic UI and jQuery scripts.
Index – Navigation4:37
Create a responsive Semantic UI navigation bar with links for home, services, about, team, and contact, plus a hover-activated language dropdown that stacks on small devices.
Index – Hero3:45
Create a responsive hero section with a latch image, company name, subheader, and two call-to-action buttons, using a responsive grid that stacks on mobile and becomes two columns on desktop.
Index – Message2:05
Create a message block with a light blue border, featuring a header 'we are hiring', descriptive text, and a link, arranged in a 16-column grid using the info color.
Index – About3:56
Create the about section with a responsive grid that stacks on mobile and becomes a nested two-column layout at larger breakpoints, including an image, header, text, and a primary button.
Index – News4:06
Master Semantic UI by building a news grid that shows four items per row on desktop, two on tablet, and one on mobile, with header, date, description, and read more.
Index – Footer9:40
Create the final footer for the home page with four sections: quick links, information, follow us, and location, featuring social icons and company contact details in a responsive grid.
Services5:02
Create a responsive services page with a stackable two-column grid that reverses columns on larger screens, featuring an image, descriptive text, and a primary read more button.
About – Story2:21
Create the first section of the about page by duplicating the file, updating the title and header, adding a center-aligned 'our story' heading, and inserting three paragraphs of text.
About – Office2:14
Continue building office section as a two-column grid with an image and two paragraphs, using mobile 16-wide and computer 8-wide columns with the glasses UI and a center-aligned H2 header.
About – Clients2:34
Create a responsive clients grid on the about page, starting with a two-column layout that becomes four columns on larger screens, displaying twelve client images with a centered, large heading.
Team5:27
Contact – Address4:06
Create the contact page with an address section, opening hours, a message form, and an embedded Google Maps, using a responsive two column grid for desktop.
Contact – Hours1:36
Create a contact page section that displays opening hours in a two-column grid, with a header 'opening hours' and hours for Monday–Thursday, Friday–Saturday, and Sunday, including lunch breaks.
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
Create the index navigation with a teal inverted UI stackable menu, centered container with a max width, brand header, and a right dropdown that stacks on small screens.
Index – Search1:59
Index – Articles3:55
Create a responsive most-read articles section using Semantic UI's stackable grid; stacks on mobile, shows two columns on tablet, and full width on computer, with image cards and linked headings.
Index – Categories3:44
Create a responsive categories section with a twelve-item grid, stackable layouts, a central title, and a divider, featuring accessible headings and category links.
Index – Footer4:17
Learn to build a responsive footer with Semantic UI by creating a center-aligned container, a compact icon menu, and a copyright paragraph styled with white smoke background and padding.
Category – Search3:23
Category – Breadcrumb2:01
Construct a two-column responsive breadcrumb using semantic UI, featuring a home link, a divider, and an active current category heading page label that reverses order at tablet and computer breakpoints.
Category – Page Navigation6:02
Learn to implement category page navigation using a responsive three-column grid with fluid UI elements, a secondary vertical fluid menu, and a smooth scrolling plugin.
Category – Article List3:09
Category – Support1:58
Create the final column as a fluid card with a header and a button link labeled contact support using Semantic UI. The lecture shows building the third column.
Article – Breadcrumb2:29
Create the article page by updating the breadcrumb, page navigation, and main content, including headings, images, links, ordered lists, a scrollable code block, a small table, and a feedback form.
Article – Page Navigation0:45
Article – Content4:44
Structure article content with headers, paragraphs, lists, images, links, tables, and code blocks; enable smooth scroll and horizontal overflow handling for a polished page.
Article – Feedback4:29
Create a glasses user interface feedback form with a heading, a divider, a yes/no radio group, a labeled text area, and a submit button.
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: