Packt

JavaScript

Web Development

HTML

Material UI

Embark on this course in web development with HTML, CSS, JS, and React for a comprehensive training program designed to empower beginners and experienced designers alike with the essential skills needed to create captivating and dynamic websites. Explore the power of React.js, HTML5, CSS3, JavaScript, and build scalable components with React.

The Front-End Web Developer Bootcamp - HTML, CSS, JS, and React

General Admission

<div>
					<div>
								<section>
						<div>
							<div>
					<div>
			<div>
							<div>
						<div>
				<div>
					</div>
				</div>
						</div>
					</div>
		</div>
								</div>
					</div>
		</section>
							</div>
				</div>
			This course is for anyone that knows basic HTML and a little CSS that wants to take their frontend website and UI creation to the next level using the Materialize CSS framework which is based off of Google's Material Design scheme. You will learn all of the CSS and JavaScript components, animations/transitions and build 5 beautiful and completely responsive, real world themes from absolute scratch.
Custom Materialize Sandbox
I have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an html page associated with it and has a start state. As we move along through the lectures, you code along with me learning all that Materialize offers including CSS components, utilities, JS widgets and more.
5 Real Projects/Themes
We will create the following projects from scratch..
<ol>
<li>Travelville -  A travel agency website/theme  (Carousel slider, autocomplete, scrolling navigation)</li>
<li>Quazzu - Cloud hosting theme (SideNav, cards, CSS overlays)</li>
<li>Madmin - Interactive admin theme (Working todo list, charts, preloader, counter script)</li>
<li>BizLand - Business consultation theme with a full screen landing page (Scrollfire, Google maps integration)</li>
<li>Galappear - Graphic design portfolio (Uses Sass and scrollfire for scroll animations)</li>
</ol>
<h3>What you'll learn</h3>
<ul>
<li>Learn to correctly structure HTML 5 documents with semantic tags and attributes</li>
<li>Learn and create amazing high quality Materialize themes and UIs from scratch</li>
<li>Learn the Materialize utilities, classes, components &amp; JS widgets using a custom sandbox environment</li>
<li>Learn some custom JavaScript/JQuery to make your themes more interactive</li>
</ul>
<h3>Requirements</h3>
<div>
<ul>
<li>Basic HTML &amp; CSS</li>
</ul>
<h3>Who is the target audience?</h3>
<ul>
<li>Anyone that wants to learn &amp; master Materialize CSS and build real world themes</li>
</ul>
</div><table>				<tbody><tr>
					<td colspan="4">Intro &amp; Getting Started</td>
				</tr>
								<tr>
					<td></td>
					<td>Welcome To The Course</td>
					<td>FREE </td>
					<td> 00:06:00</td>
				</tr>
								<tr>
					<td></td>
					<td>What is Materialize &amp; Why Use It</td>
					<td>FREE </td>
					<td> 00:05:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Environment Setup</td>
					<td> </td>
					<td> 00:09:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Materialize Sandbox Setup</td>
					<td> </td>
					<td> 00:07:00</td>
				</tr>
								<tr>
					<td colspan="4">CSS Components - Part 1</td>
				</tr>
								<tr>
					<td></td>
					<td>Typography &amp; Alignment</td>
					<td> </td>
					<td> 00:10:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Text &amp; Background Colors</td>
					<td> </td>
					<td> 00:08:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Buttons and Icons</td>
					<td> </td>
					<td> 00:11:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Floating &amp; Fixed Action Buttons</td>
					<td> </td>
					<td> 00:13:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Navbar</td>
					<td> </td>
					<td> 00:16:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Collections &amp; Badges</td>
					<td> </td>
					<td> 00:13:00</td>
				</tr>
								<tr>
					<td></td>
					<td>The Grid System</td>
					<td> </td>
					<td> 00:11:00</td>
				</tr>
								<tr>
					<td colspan="4">CSS Components - Part 2</td>
				</tr>
								<tr>
					<td></td>
					<td>Cards</td>
					<td> </td>
					<td> 00:22:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Breadcrumbs &amp; Footer</td>
					<td> </td>
					<td> 00:09:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Basic Form &amp; Input</td>
					<td> </td>
					<td> 00:15:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Fancy Form &amp; Input</td>
					<td> </td>
					<td> 00:15:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Tables &amp; Media</td>
					<td> </td>
					<td> 00:06:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Chips &amp; Pagination</td>
					<td> </td>
					<td> 00:10:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Preloaders</td>
					<td> </td>
					<td> 00:05:00</td>
				</tr>
								<tr>
					<td colspan="4">Interactive Components - Part 1</td>
				</tr>
								<tr>
					<td></td>
					<td>Carousel</td>
					<td> </td>
					<td> 00:08:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Collapsible Accordions</td>
					<td> </td>
					<td> 00:06:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Feature Discovery</td>
					<td> </td>
					<td> 00:07:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Dialogs</td>
					<td> </td>
					<td> 00:09:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Material Box and Slider</td>
					<td> </td>
					<td> 00:07:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Modals</td>
					<td> </td>
					<td> 00:09:00</td>
				</tr>
								<tr>
					<td colspan="4">Interactive Components - Part 2</td>
				</tr>
								<tr>
					<td></td>
					<td>Parallax</td>
					<td> </td>
					<td> 00:03:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Side Nav</td>
					<td> </td>
					<td> 00:09:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Pushpin</td>
					<td> </td>
					<td> 00:09:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Scrollspy</td>
					<td> </td>
					<td> 00:05:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Tabs</td>
					<td> </td>
					<td> 00:08:00</td>
				</tr>
								<tr>
					<td colspan="4">Project 1 - Travelville</td>
				</tr>
								<tr>
					<td></td>
					<td>Project 1 Intro</td>
					<td> </td>
					<td> 00:02:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Navbar &amp; Sidenav</td>
					<td> </td>
					<td> 00:12:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Image Slider</td>
					<td> </td>
					<td> 00:07:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Search &amp; Icon Boxes</td>
					<td> </td>
					<td> 00:11:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Popular Places &amp; Gallery</td>
					<td> </td>
					<td> 00:14:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Contact Section &amp; Scrollspy</td>
					<td> </td>
					<td> 00:12:00</td>
				</tr>
								<tr>
					<td colspan="4">Project 2 - Quazzu</td>
				</tr>
								<tr>
					<td></td>
					<td>Project 2 Intro</td>
					<td> </td>
					<td> 00:03:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Navbar &amp; Showcase</td>
					<td> </td>
					<td> 00:15:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Icon Boxes, About and Overlay</td>
					<td> </td>
					<td> 00:14:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Podcast Section &amp; Testimonial Carousel</td>
					<td> </td>
					<td> 00:14:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Footer &amp; Login Modal</td>
					<td> </td>
					<td> 00:08:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Solutions Page</td>
					<td> </td>
					<td> 00:16:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Signup Page</td>
					<td> </td>
					<td> 00:10:00</td>
				</tr>
								<tr>
					<td colspan="4">Project 3 - Madmin</td>
				</tr>
								<tr>
					<td></td>
					<td>Project 3 Intro</td>
					<td> </td>
					<td> 00:04:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Navbar &amp; Sidenav</td>
					<td> </td>
					<td> 00:12:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Stat Counters &amp; Preloader</td>
					<td> </td>
					<td> 00:15:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Display Chart &amp; Recent Comments</td>
					<td> </td>
					<td> 00:13:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Recent Posts &amp; Todo List</td>
					<td> </td>
					<td> 00:16:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Floating Button &amp; Modals</td>
					<td> </td>
					<td> 00:12:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Posts &amp; Categories Pages</td>
					<td> </td>
					<td> 00:15:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Comments &amp; Users Pages</td>
					<td> </td>
					<td> 00:10:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Login &amp; Details Pages</td>
					<td> </td>
					<td> 00:13:00</td>
				</tr>
								<tr>
					<td colspan="4">Project 4 - BizLand</td>
				</tr>
								<tr>
					<td></td>
					<td>Project 4 Intro</td>
					<td> </td>
					<td> 00:02:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Full Screen Header</td>
					<td> </td>
					<td> 00:14:00</td>
				</tr>
								<tr>
					<td></td>
					<td>ScrollFire &amp; Boxes</td>
					<td> </td>
					<td> 00:12:00</td>
				</tr>
								<tr>
					<td></td>
					<td>About, Testimonials &amp; ScrollSpy</td>
					<td> </td>
					<td> 00:13:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Contact &amp; Google Map</td>
					<td> </td>
					<td> 00:14:00</td>
				</tr>
								<tr>
					<td colspan="4">Project 5 - Galappear (With Sass)</td>
				</tr>
								<tr>
					<td></td>
					<td>Project 5 Intro</td>
					<td> </td>
					<td> 00:02:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Koala Setup &amp; Sass</td>
					<td> </td>
					<td> 00:12:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Header and Nav</td>
					<td> </td>
					<td> 00:09:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Changing &amp; Using Variables</td>
					<td> </td>
					<td> 00:04:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Gallery Layout</td>
					<td> </td>
					<td> 00:11:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Modals &amp; ScrollFire</td>
					<td> </td>
					<td> 00:12:00</td>
				</tr>
								<tr>
					<td></td>
					<td>Inner Pages</td>
					<td> </td>
					<td> 00:08:00</td>
				</tr>
				</tbody></table>

iStudy UK

Online Course Creation

HTML & CSS

Content Design

Visual Design

Web Design

Materialize CSS From Scratch With 5 Projects

Janets

Online Course Marketing

MERN Stack

Professional Skills Course (PSC)

Full Stack Developer

Trainers Course

The Complete Full-Stack JavaScript Course!

Get hands-on and learn to build a full-stack app using React.js as the frontend and its web API for the backend
 In this course, you will learn how to build a web application from scratch. You'll use React.js for the frontend and Microsoft SQL Server as the database; you'll also use the ASP.NET Web API to create APIs. This is not a comprehensive guide to React.js concepts; instead, this course adopts a practical approach as you learn to build a web app using some of the most commonly used React.js controls. Make sure you check out the additional resources section for theoretical/advanced concepts.
&bull; Install Angular 8 and create projects
&bull; Install Bootstrap and add material designs to your Angular project
&bull; Consume API methods (GET, PUT, POST, and DELETE)
&bull; Angular routing
&bull; Use form fields with drop-downs and date pickers
By the end of this course, you will be able to create a simple full-stack app from scratch.
All the code and supporting files for this course are available at - https://github.com/PacktPublishing/Learn-React-JS-and-Web-API-by-Creating-a-Full-Stack-Web-App
 <h2>What You Will Learn</h2>Learn React.js and its web API. Implement the GET, POST, PUT, and DELETE methods. Learn about the Material UI
 <h2>Audience</h2>This course is for web developers, .NET developers, Java developers, and UI developers and others who will benefit from this course.
 <h2>Approach</h2>The structure of this course will empower you to move forward smoothly and efficiently gain as much knowledge as possible. This course is incredibly comprehensive and uses real-world projects; the advanced concepts you'll master will ensure you can build your own apps in a very effective way.
 <h2>Key Features</h2>Learn to build a full-stack web app. * Create a web API project * Implement routing for your React applications
 <h2>Github Repo</h2>https://github.com/packtpublishing/learn-react-js-and-web-api-by-creating-a-full-stack-web-app
 <h2>About the Author</h2><h3>Frahaan Hussain</h3>Frahaan Hussain is a 3 time published author with over 500,000 students enrolled on his courses online and more than 40,000 loyal YouTube followers. Before he started teaching programming online, Frahaan graduated top of his class with honours in Computer Games Programming from De Montfort University. After just 2 years, he was invited back to become module leader at his Alma Mater. While consulting with huge clients such as Google and Chukong, Frahaan continues to further the education of others and himself. <h3>Vinay Kumar</h3>Vinay currently works as a Software Engineer. His core area of expertise is development of Web Applications and Business Intelligence. He has worked on technologies such as .NET, Angular, React JS, SSIS and Power BI.
 <h2>Course Outline</h2><h4>1. Introduction</h4><table width='100%'><tbody><tr><td style='padding: 15px;'>1. IntroductionIntroduction: Introduction</td></tr></tbody></table> <h4>2. Web API</h4><table width='100%'><tbody><tr><td style='padding: 15px;'>1. Install SQL Server and SSMSWeb API: Install SQL Server and SSMS</td></tr><tr><td style='padding: 15px;'>2. Install Visual Studio 2019Web API: Install Visual Studio 2019</td></tr><tr><td style='padding: 15px;'>3. Create Database in MS SQL ServerWeb API: Create Database in MS SQL Server</td></tr><tr><td style='padding: 15px;'>4. Create Department Table in MS SQLWeb API: Create Department Table in MS SQL</td></tr><tr><td style='padding: 15px;'>5. Create Employee Table in MS SQLWeb API: Create Employee Table in MS SQL</td></tr><tr><td style='padding: 15px;'>6. Create Web API project in Visual StudioWeb API: Create Web API project in Visual Studio</td></tr><tr><td style='padding: 15px;'>7. Force Web API to output JSON response onlyWeb API: Force Web API to output JSON response only</td></tr><tr><td style='padding: 15px;'>8. Install Postman clientWeb API: Install Postman client</td></tr><tr><td style='padding: 15px;'>9. Create Model Class for our ApplicationWeb API: Create Model Class for our Application</td></tr><tr><td style='padding: 15px;'>10. Create Web API ControllersWeb API: Create Web API Controllers</td></tr><tr><td style='padding: 15px;'>11. Implement GET method in Web APIWeb API: Implement GET method in Web API</td></tr><tr><td style='padding: 15px;'>12. Implement POST method in Web APIWeb API: Implement POST method in Web API</td></tr><tr><td style='padding: 15px;'>13. Implement PUT method in Web APIWeb API: Implement PUT method in Web API</td></tr><tr><td style='padding: 15px;'>14. Implement DELETE method in Web APIWeb API: Implement DELETE method in Web API</td></tr></tbody></table> <h4>3. React JS</h4><table width='100%'><tbody><tr><td style='padding: 15px;'>1. Install Node JSMovement: Install Node JS</td></tr><tr><td style='padding: 15px;'>2. Install Visual Studio CodeMovement: Install Visual Studio Code</td></tr><tr><td style='padding: 15px;'>3. Create React JS ProjectMovement: Create React JS Project</td></tr><tr><td style='padding: 15px;'>4. Install react-bootstrapMovement: Install react-bootstrap</td></tr><tr><td style='padding: 15px;'>5. Create React ComponentsMovement: Create React Components</td></tr><tr><td style='padding: 15px;'>6. Implement Routing for our React ApplicationMovement: Implement Routing for our React Application</td></tr><tr><td style='padding: 15px;'>7. Add Navigation menuMovement: Add Navigation menu</td></tr><tr><td style='padding: 15px;'>8. React bootstrap TableMovement: React bootstrap Table</td></tr><tr><td style='padding: 15px;'>9. Consume GET method and display Department detailsMovement: Consume GET method and display Department details</td></tr><tr><td style='padding: 15px;'>10. The CORS problemMovement: The CORS problem</td></tr><tr><td style='padding: 15px;'>11. Modal Pop up using react bootstrapMovement: Modal Pop up using react bootstrap</td></tr><tr><td style='padding: 15px;'>12. Add Form FieldsMovement: Add Form Fields</td></tr><tr><td style='padding: 15px;'>13. Consume POST method in react js for Departments TableMovement: Consume POST method in react js for Departments Table</td></tr><tr><td style='padding: 15px;'>14. Refresh react bootstrap table on insertionMovement: Refresh react bootstrap table on insertion</td></tr><tr><td style='padding: 15px;'>15. Snackbar component in Material designMovement: Snackbar component in Material design</td></tr><tr><td style='padding: 15px;'>16. Edit Modal and PUT method for DepartmentMovement: Edit Modal and PUT method for Department</td></tr><tr><td style='padding: 15px;'>17. Delete method for DepartmentMovement: Delete method for Department</td></tr><tr><td style='padding: 15px;'>18. GET and DELETE Methods for EmployeeMovement: GET and DELETE Methods for Employee</td></tr><tr><td style='padding: 15px;'>19. Modal and POST for EmployeeMovement: Modal and POST for Employee</td></tr><tr><td style='padding: 15px;'>20. Dropdown and Datepicker in FormMovement: Dropdown and Datepicker in Form</td></tr><tr><td style='padding: 15px;'>21. Modal and PUT method for EmployeeMovement: Modal and PUT method for Employee</td></tr></tbody></table>

Get hands-on and learn to build a full-stack app using React.js as the frontend and its web API for the backend

Learn React JS and Web API by Creating a Full Stack Web App.

Material UI courses in Bradford

Online Options

The Front-End Web Developer Bootcamp - HTML, CSS, JS, and React

By Packt

Materialize CSS From Scratch With 5 Projects

By iStudy UK

The Complete Full-Stack JavaScript Course!

By Janets

Learn React JS and Web API by Creating a Full Stack Web App.

By Packt

Search By Location