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.
Web Designing using React
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.
Job Prospects
Completing RKCLs Web Designing using React course can lead to various job prospects, including key job roles like:
-
React Developer: Build and maintain interactive user interfaces and single-page applications using React.
-
Front-End Developer: Design and implement user-facing features and interfaces, integrating React with HTML, CSS, and JavaScript.
-
UI/UX Designer: Focus on creating user interfaces with React, ensuring a seamless and engaging user experience.
-
Web Application Developer: Develop and manage web applications, utilizing React to create dynamic and responsive front-end components.
-
Full-Stack Developer: Work on both front-end and back-end development, with React handling the front-end and integrating with back-end services.
-
Freelance Web Designer: Offer React-based web design and development services to clients, creating custom solutions and interactive web experiences.
-
Software Engineer: Contribute to larger software projects and development teams, focusing on building scalable and maintainable React applications.
These roles leverage React skills to create modern, responsive, and interactive web applications and user interfaces.
How to Enroll
Course Prerequisites
To ensure successful participation in the course, the following prerequisites are recommended:
-
Basic HTML/CSS Knowledge: Familiarity with HTML for structuring web content and CSS for styling and layout.
-
Basic JavaScript Knowledge: Understanding of JavaScript fundamentals, including variables, functions, and control flow.
-
Basic Command Line Skills: Comfort with using the command line for managing development environments and running development tools.
-
Basic Understanding of Web Development Concepts: Familiarity with core web development concepts such as responsive design and client-server architecture.
-
RS-CIT Course (Not Compulsory): It is desirable that the learner should have completed the RS-CIT course.
-
Class 12th Pass (Not Compulsory): The learner should preferably be a Class 12th pass student.
These prerequisites are designed to ensure that learners have the foundational skills required to fully benefit from the course. Even if you feel you might not meet all the prerequisites perfectly, a willingness to learn and engage with the course material will also go a long way in ensuring your success.
Key Steps for Enrolment
-
1.
A learner can search & locate his/her nearest RKCL Training center (IT Gyan Kendra) in Rajasthan by Click Here
-
2.
The learner should fill an application form available at the RKCL Training center (IT Gyan Kendra), submit relevant documents & pay the prescribed course fees.
-
3.
Once the learner submits his/her details, relevant documents and pays the fees, the RKCL Training center (IT Gyan Kendra) will fill the learner details in the RKCL portal and upload the learner data. Further, the RKCL Training center (IT Gyan Kendra) coordinator will hand over a fee receipt. Learner is expected to verify the online details (personal details, course name, batch/month, fee receipt) as filled in by RKCL Training center (IT Gyan Kendra).
-
4.
Once Admission is confirmed on RKCL portal, RKCL Training center (IT Gyan Kendra) will assign a mutually suitable training batch & time to the learner. After batch/time allotment, learner has to physically attend the classes at IT Gyan Kendra premises. A well trained & qualified faculty/instructor will teach the course as per schedule and impart both theoretical and practical lab-based knowledge.
-
5.
Subsequently after few days, the learner also receives a User ID and password from RKCL Training center (IT Gyan Kendra) to start e-learning through RKCL LMS portal.
Duration
-
Course Duration: 120 Hours (ideally 3 months i.e. 2 hours daily for 5 days a week)
-
Course Fees: Rs 7,000/- only per candidate
Curriculum
| Chapter No | Chapter Name | Sub Topics |
|---|---|---|
| 1 | Getting Started with HTML | Introduction to the Internet Introduction to HTML Terminology Options for Writing HTML Unicode Transformation Format (UTF) HTML5 Resources |
| 2 | New HTML5 | What’s Different in HTML5? in HTML5 |
| 3 | Designing a Home Page | Design Considerations and Planning Basic Tags and Document Structure HTML Tags Head Tags Title Tags Body Tags Metadata Saving an HTML Page |
| 4 | Web Page Formatting | Adding a New Paragraph Adding a Line Break Inserting Blank Space Preformatted Text Changing a Page’s Background Color Div Element |
| 5 | Text Items and Objects | Headings Comments Block Quotes Horizontal Lines Special Characters |
| 6 | Creating Lists | Numbered (Ordered) Lists Bulleted (Unordered) Lists Nested Lists Definition Lists |
| 7 | Working With Links | What are Links? Text Links Image Links Opening a Page in a New Window or Tab Setting all Links on a Page to Open in a New Window or Tab Linking to an Area on the Same Page (Bookmarks) Linking to an E-mail Address Linking to Other Types of Files |
| 8 | Working With Images | Introduction to Images for Webpages Adding Images to Webpages Resizing an Image Alternative (ALT) Text Image Labels |
| 9 | Working With Tables | Inserting a Table Table Borders Table Headers Table Attributes |
| 10 | Working With IFrames | What is an Iframe? Inserting Iframes Setting Height and Width Using an Iframe for a link target |
| 11 | Working With Forms | 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 |
| 12 | Inserting Video and Audio | About Video and Audio Files Linking to Video and Audio Files Adding Video Adding Audio Using YouTube to Display Video |
| 13 | CSS - Introduction | 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 |
| 14 | Working With Text in 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 |
| 15 | Creating Backgrounds in CSS | Colors Images Fixed Images |
| 16 | Working With Images in CSS | Opacity Floating Images Image Galleries Image Sprites |
| 17 | Working With Box Model in CSS | What is a box model? Margin Padding Border Outline |
| 18 | Working With Elements in CSS | Display and Visibility Grouping and Nesting Dimensions of Elements Positioning Floating Pseudo-Classes/Pseudo-Elements |
| 19 | Working With Table in CSS | Borders Collapsed Borders Table Width and Cell Height Table Color Table Text Element Table Padding |
| 20 | Working With Transforms in CSS | What are Transforms? 2D Transforms 3D Transforms |
| 21 | Transitions and Animations in CSS | Transitions Animations |
| 22 | Adding a Navigation Bar in CSS | CSS Visibility CSS Display CSS Scrollbars CSS Positioning Static Positioning Fixed Positioning Relative Positioning Absolute Positioning CSS Layers with Z-Index |
| 23 | Introduction To jQuery | 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 |
| 24 | jQuery – Basics | String Numbers Boolean Objects Arrays Functions Arguments Scope Built-in Functions |
| 25 | jQuery – Selectors | 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 |
| 26 | jQuery – DOM Attributes | Get Attribute Value Set Attribute Value |
| 27 | jQuery – DOM Traversing | Find Elements by index Filtering out Elements Locating Descendent Elements jQuery DOM Traversing Methods |
| 28 | jQuery – CSS Methods | Apply CSS Properties and Multiple CSS Properties Setting Element Width & Height jQuery CSS Methods |
| 29 | jQuery – DOM Manipulation 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 |
| 30 | jQuery – Effects | jQuery Effect Methods, Hide and Show jQuery Toggle jQuery Slide – slideDown, slideUp, slideToggle jQuery Fade – fadeIn, fadeOut, fadeTo jQuery Custom Animations |
| 31 | jQuery – AJAX | load() get() post() ajax() |
| 32 | jQuery – JSON | getJSON() |
| 33 | Introduction to React JS | History of front end libraries Motivation for using React Key differentiators Thinking in React Modern Javascript (ES6) for React |
| 34 | React Components | React component Render function Component API Component lifecycle State Props Mixins JSX |
| 35 | React internals | Reconciliation algorithm |
| 36 | Component inter communication | Component composition Pass data from parent to child Pass data from child to parent |
| 37 | Component styling | Radium CSS Modules LESS/SASS |
| 38 | Unit testing components | Jasmine React test utilities |
| 39 | Performance optimizations | PureRenderMixin Expensive DOM manipulations Performance tools |
Study Material
-
This course is fully ILT based i.e. Instructor Led Training.
-
RKCL Training Center (IT Gyan Kendra) faculty provides offline study notes & provides lab environment for hands on experience.
Pedagogy
We employ ILT mode (offline training) hands on pedagogical model for teaching this course. However, course end evaluation is done using Online exams on RKCL LMS portal.
Salient features of Offline Learning model:
-
1.
Guided DIY Sessions: Hands-on sessions are conducted in a physical classroom or lab, where students can apply concepts, work on projects, and receive direct guidance from RKCL center instructors. The course makes a learner learn a tool through an output-based approach rather than the usual tool-based approach. Outcome driven approach based on case studies and live projects is more effective for concept building.
-
2.
Group Work and Collaboration: Offline sessions foster teamwork, allowing students to collaborate on group projects and engage in peer learning.
-
3.
Mentorship and Support: Face-to-face meetings with instructors and mentors provide personalized support, guidance, and troubleshooting for complex topics.
Exam
-
Mode of Exam: Online
-
Exam Portal: RKCL LMS portal
-
Exam Venue: RKCL Training Center (Computer Lab)
-
Duration of Exam: 60 minutes (1 Hour)
-
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
RKCL provides a printed certificate to the learner (via RKCLs Training center) after his/her successful course completion.
A digital copy is also made available at DigiLocker portal Click Here Sample certificate design shared below -
