HTML, CSS, React - Certification Course for Beginners
- Description
- Curriculum
- FAQ
- Reviews
Welcome to the HTML, CSS, and React Certification course for beginners. In this course you will learn how to develop stylish, mobile responsive web pages right from scratch using some of the most powerful front-end mark-up languages and JavaScript libraries. The course starts with an in-depth overview of HTML where we start by exploring the structure of an HTML web page. Once you’re comfortable with HTML foundations, we move on to demonstrating how to work with a number of HTML elements. This includes: Inline text elements, ordered and unordered lists, embedding media, link creation, tables, background images, form elements and iframes. The HTML segment concludes with a hands-on project that will guide you through creating a complete web page with headers, footers, callouts, images, links, forms and tabular data. By the end of the HTML segment, you’ll be able to proficiently code simple and complex html pages with ease.
The second section of this course focuses exclusively on CSS to bring your web pages to life with custom style sheets. Here, students will learn the importance of responsive design and cross browser compatibility by embedding CSS style rules for individual page components. We start by exploring the parts, and types of CSS rules followed by an introduction into CSS Id’s and divisions. From there we move on to CSS margins, text properties, borders, transparency and text on top of images. Once you have a handle on the foundations we move on to more intricate CSS concepts including CSS positioning, CSS float properties, Link Styling, and z-indexes. Similar to the HTML section, the CSS segment concludes with a comprehensive hands-on guide to building a responsive web page, complete with CSS style definitions, element containers, navigation, and a number of other CSS page elements.
Once you have a foundational understanding of HTML and CSS, we will dive into working with React, a powerful JavaScript library used for front-end UI development. The React section starts off with a hands-on project where you’ll learn how to work with functional React components, props, Callback functions, OnClick Events, and the React State hook to build a fully functional calculator. From there we will dive into project number two, where you will build a connect-4 clone. Here we will cover more intermediate concepts including passing props, destructuring, passing arguments to click events, various styling methods, and handling callbacks. You will also learn about the React key property, React lifecycle events, and conditional rendering. By the end you will have built a complete multi and single player connect-4 game board with built-in AI capabilities.
In the final section of the course we further unleash the power of React by building out a complete e-commerce site with multiple product categories, a product showcase, shopping cart feature, and much more. Here, we introduce a number of integral new concepts including: JSON server, Fetch API, and installing React router. These essential building blocks will be used to render the product categories, style the product list, and configure the product details page. From there we dive into styled components, refactoring the shop layout, and exploring the concept of “context” in React. In the final stages of the project students will configure the shopping cart basket, and the checkout feature. We will also implement a product search feature, followed by in-depth exercises on validating input forms in React.
As you can see this course covers a tremendous bit of ground. Best of all it’s co-authored by Tim Maclachlan – a renowned senior full-stack developer with over 20 years of commercial development experience. As a multi-faceted developer, Tim specializes in algorithmic, analytical and mobile development. To date, he’s written hundreds of applications and worked in a number of industries from commercial aviation and military, to banking and finance. Tim has a genuine passion for teaching others how to become better coders and looks forward to interacting with his students.
With that said, we hope you’re just as excited about this course as we are, if so – hit that enroll button and let’s get started.
-
1Introduction to HTMLVideo lesson
-
2Basic Structure of a Web PageVideo lesson
-
3HTML Head TagsVideo lesson
-
4HTML Body TagVideo lesson
-
5HTML Paragraph SpacingVideo lesson
-
6HTML Line BreaksVideo lesson
-
7HTML Non-Breaking SpaceVideo lesson
-
8HTML Header TagsVideo lesson
-
9HTML Text Formatting and DecorationVideo lesson
-
10HTML Inline Text FormattingVideo lesson
-
11HTML Unordered ListsVideo lesson
-
12HTML Ordered ListsVideo lesson
-
13HTML Image InsertionVideo lesson
-
14HTML Embedding VideosVideo lesson
-
15HTML Absolute vs. Relative File ReferencingVideo lesson
-
16HTML Link CreationVideo lesson
-
17HTML Anchor TagsVideo lesson
-
18HTML TablesVideo lesson
-
19HTML Nested TablesVideo lesson
-
20HTML Merging CellsVideo lesson
-
21HTML Text WrappingVideo lesson
-
22HTML Table Background ImageVideo lesson
-
23HTML Cell AlignmentVideo lesson
-
24HTML - Introduction to FormsVideo lesson
-
25HTML Form Tags and AttributesVideo lesson
-
26HTML Forms - Post vs GetVideo lesson
-
27HTML Forms - Input Text FieldsVideo lesson
-
28HTML Forms - Select MenusVideo lesson
-
29HTML Forms - Check Boxes and Radio ButtonsVideo lesson
-
30HTML Forms - Text Areas and ButtonsVideo lesson
-
31HTML IframesVideo lesson
-
32HTML Project - IntroductionVideo lesson
-
33HTML Project - HeaderVideo lesson
-
34HTML Project - CalloutVideo lesson
-
35HTML Project - Image InsertionVideo lesson
-
36HTML Project - Text InsertionVideo lesson
-
37HTML Project - Links and FormVideo lesson
-
38HTML Project - Tabular DataVideo lesson
-
39HTML Project - FooterVideo lesson
-
40Introduction to CSSVideo lesson
-
41Parts of a CSS RuleVideo lesson
-
42Types of CSS RulesVideo lesson
-
43CSS - Color Names and CodesVideo lesson
-
44CSS Classes and SpansVideo lesson
-
45CSS Divisions - DIVsVideo lesson
-
46CSS IDsVideo lesson
-
47CSS MarginsVideo lesson
-
48CSS PaddingVideo lesson
-
49CSS Text PropertiesVideo lesson
-
50CSS Font PropertiesVideo lesson
-
51CSS BordersVideo lesson
-
52CSS BackgroundsVideo lesson
-
53CSS TransparencyVideo lesson
-
54CSS Text on Top of ImagesVideo lesson
-
55CSS Width and Height PropertiesVideo lesson
-
56CSS Display PropertiesVideo lesson
-
57CSS Static PositioningVideo lesson
-
58CSS Relative PositioningVideo lesson
-
59CSS Absolute PositioningVideo lesson
-
60CSS Fixed PositioningVideo lesson
-
61CSS Float PropertyVideo lesson
-
62CSS Clear PropertyVideo lesson
-
63CSS Z-IndexVideo lesson
-
64CSS Styling LinksVideo lesson
-
65CSS TablesVideo lesson
-
66CSS Project - IntroductionVideo lesson
-
67CSS Project - CSS RulesVideo lesson
-
68CSS Project - Navigation RulesVideo lesson
-
69CSS Project - Responsive CSSVideo lesson
-
70CSS Project - Page ElementsVideo lesson
-
73Project OverviewVideo lesson
-
74Hello ReactVideo lesson
-
75Tools NeededVideo lesson
-
76Code PenVideo lesson
-
77Intro to JSXVideo lesson
-
78Functional Components in ReactVideo lesson
-
79Why Components?Video lesson
-
80Intro to Props in ReactVideo lesson
-
81React Components, Props and CallbacksVideo lesson
-
82Building the calculator visualsVideo lesson
-
83OnClick Events in ReactVideo lesson
-
84Passing Parameters in Callback FunctionsVideo lesson
-
85Using React State HookVideo lesson
-
86Implementing the calculator - DisplayVideo lesson
-
87Implementing the calculator - OperatorsVideo lesson
-
88Debugging in ReactVideo lesson
-
89Project SummaryVideo lesson
External Links May Contain Affiliate Links read more