Web Designing Using React

Web Designing using React


RKCLs Web Designing using React course (Code - RCWDS) is tailored for individuals who want to create modern, responsive user interfaces and web applications with one of the most popular JavaScript libraries. React JS, developed by Facebook, allows developers to build dynamic and interactive web experiences with ease. This course covers essential HTML/CSS skills along with React concepts, including components, state management, hooks, and routing, and provides hands-on experience in creating reusable UI components and integrating with APIs. Participants will learn to design and develop high-performance web applications, focusing on best practices for scalable and maintainable code. By the end of the course, you'll have the skills to build engaging and efficient web interfaces using React JS, setting you up for success in the ever-evolving field of web development.


Skills you'll learn

Under RKCLs Web Designing using React course, you will learn following key skills:

  • HTML5: Advanced HTML5 features and semantics for structuring web content and creating modern, responsive web pages.
  • CSS: Advanced CSS techniques and responsive design principles for styling and layout.
  • jQuery: Using jQuery for DOM manipulation, event handling, and simplifying JavaScript interactions on web pages.
  • React JS: Core concepts of React, including components, props, state management, and the virtual DOM for building interactive UIs.
  • React Components: Creating and managing reusable React components, including functional and class-based components.
  • State Management: Implementing state management in React applications, including local state and global state management with tools like Context API or Redux.
  • Routing: Setting up client-side routing in React applications using libraries like React Router for single-page applications.
  • Performance Optimization: Techniques for optimizing React application performance, including code splitting and lazy loading.
  • Integration Combining React with HTML5 and CSS for a cohesive web design, and leveraging jQuery for specific interactions when needed.

These skills will enable you to design and develop modern, interactive web applications using React, along with HTML5, CSS, and jQuery.

Duration & Fees

  • Course Duration: 120 Hours(3 Months)
  • Course Fees: 7000/-

Curriculum

  • Introduction to the Internet
  • Introduction to HTML Terminology
  • Options for Writing HTML
  • Unicode Transformation Format (UTF)

  • Design Considerations and Planning
  • Basic Tags and Document Structure
  • HTML Tags
  • Head Tags
  • Title Tags
  • Body Tags
  • Metadata
  • Saving an HTML Page

  • Adding a New Paragraph
  • Adding a Line Break
  • Inserting Blank Space
  • Preformatted Text
  • Changing a Page’s Background Color
  • Div Element

  • Headings
  • Comments
  • Block Quotes
  • Horizontal Lines
  • Special Characters

  • Numbered (Ordered) Lists
  • Bulleted (Unordered) Lists
  • Nested Lists
  • Definition Lists

  • What are Links?
  • Text Links
  • Image Links
  • Linking to an E-mail Address
  • Linking to Other Types of Files

  • Introduction to Images for Webpages
  • Adding Images to Webpages
  • Resizing an Image
  • Alternative (ALT) Text
  • Image Labels

  • Inserting a Table
  • Table Borders
  • Table Headers
  • Table Attributes

  • About Forms
  • Sending to E-mail
  • Text Boxes
  • Text Areas
  • Check Boxes
  • Menu Lists
  • Radio Buttons
  • The Submit Button
  • The Reset Button
  • Changing the Tab Order

  • About Video and Audio Files
  • Linking to Video and Audio Files
  • Adding Video
  • Adding Audio
  • Using YouTube to Display Video

  • Benefits of CSS
  • CSS Versions History
  • CSS Syntax
  • External Style Sheet using link
  • Multiple Style Sheets
  • Value Lengths and Percentages
  • ID and Class
  • Linking to a CSS

  • Emphasizing Text (Bold and Italic)
  • Decoration
  • Indentation
  • Transformation
  • Text Alignment
  • Fonts
  • Font Sizes
  • Letter Spacing (Kerning)
  • Line Spacing (Leading)
  • Text Color
  • Margins
  • Padding
  • Borders
  • Styling Links
  • Number and Bullet Styles
  • Sizing Elements
  • Text Wrapping
  • Shadowing

  • Colors
  • Images
  • Fixed Images

  • Opacity
  • Floating Images
  • Image Galleries
  • Image Sprites

  • What is a box model?
  • Margin
  • Padding
  • Border
  • Outline

  • Display and Visibility
  • Grouping and Nesting
  • Dimensions of Elements
  • Positioning
  • Floating
  • Pseudo-Classes/Pseudo-Elements

  • Borders
  • Collapsed Borders
  • Table Width and Cell Height
  • Table Color
  • Table Text Element
  • Table Padding

  • What are Transforms?
  • 2D Transforms
  • 3D Transforms

  • Transitions
  • Animations

  • CSS Visibility
  • CSS Display
  • CSS Scrollbars
  • CSS Positioning
  • Static Positioning
  • Fixed Positioning
  • Relative Positioning
  • Absolute Positioning
  • CSS Layers with Z-Index

  • What You Should Already Know
  • What is jQuery?
  • Adding the jQuery Library to Your Pages
  • Basic jQuery Example
  • Downloading jQuery
  • Alternatives to Downloading
  • jQuery Syntax
  • The Document Ready Function
  • How to use Custom Scripts?
  • Using Multiple Libraries
  • jQuery – noConflict() Method

  • String, Numbers, and Booleans
  • Objects and Arrays
  • Functions, Arguments, Scope
  • Built-in Functions

  • jQuery – CSS Element Selector and ID Selector
  • jQuery – CSS Element Class Selector and Universal Selector
  • jQuery – CSS Multiple Elements E, F, G Selector
  • jQuery Callback Functions

  • Get Attribute Value
  • Set Attribute Value

  • Find Elements by index
  • Filtering out Elements
  • Locating Descendent Elements
  • jQuery DOM Traversing Methods

  • Apply CSS Properties and Multiple CSS Properties
  • Setting Element Width & Height
  • jQuery CSS Methods

  • Content Manipulation
  • DOM Element Replacement
  • Removing DOM Elements
  • Inserting DOM elements
  • DOM Manipulation Methods
  • Binding event handlers
  • Removing event handlers
  • Event Types
  • The Event Object and Attributes

  • jQuery Effect Methods, Hide and Show
  • jQuery Toggle
  • jQuery Slide – slideDown, slideUp, slideToggle
  • jQuery Fade – fadeIn, fadeOut, fadeTo
  • jQuery Custom Animations

  • load()
  • get()
  • post()
  • ajax()

  • getJSON()

  • History of front end libraries
  • Motivation for using React
  • Key differentiators
  • Thinking in React
  • Modern Javascript (ES6) for React

  • React component
  • Render function
  • Component API
  • Component lifecycle
  • State, Props
  • Mixins
  • JSX

  • Reconciliation algorithm

  • Component composition
  • Pass data from parent to child
  • Pass data from child to parent

  • Radium
  • CSS Modules
  • LESS/SASS

  • Jasmine
  • React test utilities

  • PureRenderMixin
  • Expensive DOM manipulations
  • Performance tools

Exam

  • Mode of Exam: Online
  • Exam PortalRKCL LMS portal
  • Exam Venue: TILS Education (RKCL Authorized Training Center)
  • Duration of Exam: 60 Minutes
  • Total Marks in Exam: 100
  • Passing Marks in Exam: 40
  • Exam Time Slots: Available for 2 days (Schedules intimated well in advance)
  • Result Pattern: Grade based (RKCL awards grade to the candidate as commensurate with the marks secured by them in the course end exam)

Certification

  • Learn can collect their certificate(Provided by RKCL) from TILS The Institute of Languages & Skills(RKCL Authorized Training Center).
  • A digital copy is also made available at DigiLocker portal .
  • Sample Certificate shown below;-