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

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

by Meta Brains
Released June 2023
Publisher(s): Packt Publishing
ISBN: 9781805129813

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

This course covers essential topics including HTML and CSS fundamentals, creating responsive layouts, JavaScript for interactivity, introduction to React, building reusable components, working with APIs, and designing quality front-end UIs. Gain skills needed to work on front-end web development and create engaging and dynamic websites.

This in-depth course covers HTML, CSS, JS, and React. You will learn HTML 5 features, CSS 3 styling techniques, JavaScript syntax and implementation, React.js components and hooks, DOM manipulation, working with APIs, and using libraries such as Material UI. Through hands-on projects and practical examples, we will build interactive and dynamic websites. Dive into HTML and CSS, learning tags, attributes, selectors, and styles. Build responsive layouts using CSS Grid and Flexbox. Add interactivity with JavaScript, including event listeners, DOM manipulation, and animations. Explore React’s core concepts, building reusable components and handling state. Work with APIs to fetch and display data.

Upon completion of the course, this course will equip you with the tools and knowledge to excel in front-end web development. From JavaScript basics to advanced app development, become a confident and up-to-date JavaScript developer.

What You Will Learn

  • Create responsive layouts using CSS Grid and Flexbox
  • Learn JavaScript fundamentals and build modern/complex applications
  • Learn to use APIs to fetch and display data on your web pages
  • Learn the basics of React components, props, state, and lifecycle methods
  • Build complex/reusable components using React with conditional rendering
  • Design quality websites using HTML and CSS

Audience

The course caters to a diverse audience relating to website development: Beginners eager to delve into this field and learn website development basics using HTML and CSS, or experienced website designers wishing to update with the latest HTML and CSS coding standards. Developers with a foundation of JavaScript can expand their skillset by adding React JS and professionals already familiar with web frameworks such as Angular or Vue can benefit from the course. Basic internet and website composition skills, stable internet connection, and a code editor such as Visual Studio Code, etc. is required.

About The Author

Meta Brains: Meta Brains is a team of passionate software developers and finance professionals. They provide professional training programs that combine their expertise in coding, finance, and Excel.

With a focus on the Metaverse, they aim to equip learners with the necessary skills to participate in the next computing revolution. Their inclusive approach ensures accessibility to everyone, fostering a community that collaboratively codes and builds the future of the Metaverse.

Table of contents

  1. Chapter 1 : Introduction to HTML5
    1. Introduction
    2. Features of HTML5
    3. Benefits of Using HTML5
    4. Where and How Is HTML5 Used?
    5. HTML5 Editors
    6. Downloading Visual Studio Code
  2. Chapter 2 : Structure of an HTML5 File
    1. What Are HTML Tags?
    2. Structure of an HTML5 File
    3. File and Folder Structure
    4. How to Create an HTML5 File?
  3. Chapter 3 : HTML5 Basic Building Blocks
    1. Heading Tags in HTML
    2. HTML5 Quotation and Citation Tags
    3. Commenting Out Code in HTML5
    4. HTML5 Attributes
    5. How to Style in HTML5
  4. Chapter 4 : Exploring HTML5 Tags
    1. What Are Anchor Tags?
    2. What Are Image Tags?
    3. What Are Paragraph Tags?
    4. What Are Break Tags?
    5. What Are Table Tags?
    6. List Tags
    7. Video Tag
    8. Audio Tag
  5. Chapter 5 : Building a Form from Scratch with HTML5
    1. Form Tags
    2. Input Types
    3. Input Attributes (Size, Read-Only, Disabled)
    4. Additional Input Attributes (Min, Max, Multiple, and Placeholder)
    5. Required Inputs
  6. Chapter 6 : Block and Inline Elements
    1. Introduction
    2. Examining Block and Inline Elements
  7. Chapter 7 : Conclusion (HTML5 Part)
    1. Conclusion
  8. Chapter 8 : Introduction to CSS3
    1. Introduction to CSS3
    2. Syntax of CSS3
    3. Uses of CSS3
    4. Types of CSS3
    5. Selectors and Colors in CSS3
  9. Chapter 9 : Basics Properties of CSS3
    1. Background
    2. Borders
    3. Outline
    4. Height and Width
    5. Margin and Padding
  10. Chapter 10 : Typography Properties of CSS3
    1. Text Alignment
    2. Text Decoration
    3. Text Transform
    4. Text Spacing
    5. Font Family
    6. How to Use Font Awesome Icons
  11. Chapter 11 : Selectors Properties in Depth of CSS3
    1. Display
    2. Positions
    3. Z-Index
    4. Overflow
    5. Float
    6. DOM Model
    7. Pseudo-Classes Part 1
    8. Pseudo-Classes part 2
    9. Pseudo-Elements
  12. Chapter 12 : Extra Features in CSS3
    1. Opacity and Important
    2. Border-Radius
    3. Box Shadow
  13. Chapter 13 : Responsive Design with CSS3
    1. Grid System
    2. Flexbox
    3. Media Queries
  14. Chapter 14 : Mini Project
    1. Mini Project
  15. Chapter 15 : Introduction to JavaScript
    1. Introduction and History of JavaScript
    2. Syntax of JavaScript and Overview
    3. JavaScript Implementation
    4. How to Use HTML Tags in JavaScript
  16. Chapter 16 : Variables
    1. Var in JavaScript
    2. Global and Local Var in JavaScript
    3. Advanced console.log
  17. Chapter 17 : Statements in JavaScript
    1. If Statement
    2. If Else Statement
    3. Condition Ternary Statement
    4. Switch Statement
    5. If Else If Statement
    6. Break and Continue Statement
    7. Data Types
  18. Chapter 18 : Operators in JavaScript
    1. Arithmetic Operator
    2. Assignment Operator
    3. Comparison Operator
  19. Chapter 19 : Popup Boxes in JavaScript
    1. Alert Boxes
    2. Confirm Box
    3. Prompt Box
    4. Functions
    5. Functions with Parameters
    6. Function with Return
  20. Chapter 20 : Events in JavaScript
    1. Events in JavaScript
  21. Chapter 21 : Loops in JavaScript
    1. While Loop
    2. Do While Loop
    3. For Loop
    4. Nested Loop
  22. Chapter 22 : Arrays in JavaScript
    1. Arrays
    2. Modify and Delete Arrays
    3. Sort and Reverse Methods
    4. Pop and Push Methods
    5. Shift and Unshift Methods
    6. Concat and Join Methods
    7. Slice and Splice Methods
    8. The isArray Method
    9. Indexof and lastindex Methods
    10. The forEach Method
    11. The toString(), valueOf(), and fill() Methods
    12. Include Method
    13. Some and Every Methods
    14. Find and findIndex Methods
    15. Filter Method
  23. Chapter 23 : Objects and Their Methods
    1. Objects
    2. Arrays Objects
    3. For-In Loop
  24. Chapter 24 : String and Its Methods
    1. String Methods - Part 1
    2. String Methods - Part 2
    3. String Methods - Part 3
  25. Chapter 25 : JavaScript Number Methods
    1. Number Methods
    2. Math Method - Part 1
    3. Math Method - Part 2
    4. Date Method
  26. Chapter 26 : DOM Model
    1. DOM Model
    2. DOM Other Objects
    3. DOM Get Methods
    4. DOM Styling
    5. addEventListener (Events)
    6. useCapture
    7. classList Method
    8. Parent Nodes
    9. Children Nodes
    10. First and Last Child
    11. Next and Previous Siblings
    12. Create Element Text Node
    13. Append Child and Insert Before
    14. Insert Adjacent Element and Insert Adjacent HTML
  27. Chapter 27 : Conclusion
    1. Conclusion
  28. Chapter 28 : Introduction to React: A JS Library for Building User Interfaces
    1. Introduction to React.JS
    2. First React App
    3. JSX In React.JS
  29. Chapter 29 : Styling Components Hooks
    1. Inline and Internal Styling in React.JS
    2. Template Literals in React.JS
    3. Components in React.JS
    4. Props in React.JS
    5. Hooks in Reacts.JS
  30. Chapter 30 : Hierarchy Rendering and Advanced Hooks
    1. Understanding Hierarchy in React.JS
    2. Conditional Rendering
    3. useEffect Hook in React.JS
  31. Chapter 31 : DOM
    1. React-Router-DOM
    2. Linking in React-Router-DOM
    3. Handling Error Pages with React-Router-DOM
    4. Using the useNavigate() Hook
  32. Chapter 32 : Projects
    1. First Project (Part 1)
    2. First Project (Part 2)
  33. Chapter 33 : Building a Calculator App
    1. Building a Calculator - Part 1
    2. Building a Calculator - Part 2
  34. Chapter 34 : Using the Pokémon API
    1. Building a Restful API in React.JS - Part 1
    2. Building a Restful API in React.JS - Part 2
    3. Building a Restful API in React.JS - Part 3
    4. Using array.map() Inside JSX Elements
    5. How to Use Material UI in React.JS
  35. Chapter 35 : Conclusion
    1. Conclusion

Product information

  • Title: The Front-End Web Developer Bootcamp - HTML, CSS, JS, and React
  • Author(s): Meta Brains
  • Release date: June 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781805129813