Scribd
Upload
55 views12 pages

Adhil Proposal

The document provides details about a study focusing on front end web design using React JS. The study aims to help spread Islamic teachings through new technologies by equipping students with skills like programming, web development, and data management. The study covers HTML, CSS, JavaScript, and React JS. Key areas of learning include HTML structure and tags, CSS styling and layout, JavaScript basics and control flow, and building React components and handling state. The intended method of study includes online classes, tutorials, and research from sources like MDN, W3Schools, freeCodeCamp, and YouTube channels. Upon completion, the student is requesting 3 credits for the study.

Uploaded by

irshadvtl272
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views12 pages

Adhil Proposal

The document provides details about a study focusing on front end web design using React JS. The study aims to help spread Islamic teachings through new technologies by equipping students with skills like programming, web development, and data management. The study covers HTML, CSS, JavaScript, and React JS. Key areas of learning include HTML structure and tags, CSS styling and layout, JavaScript basics and control flow, and building React components and handling state. The intended method of study includes online classes, tutorials, and research from sources like MDN, W3Schools, freeCodeCamp, and YouTube channels. Upon completion, the student is requesting 3 credits for the study.

Uploaded by

irshadvtl272
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Web Design Front End

Study
(Focusing on React Js)

Adhilsha PP

CIC No: 8933

Department of Transactional Jurisprudence


MAJMA’ SHAREEATH AND ARTS COLLEGE KAVANUR
Introduction

We live in a society where technology is the primary source of


improvements. If we look to all countries around the world, we can see,
they have improved quite a bit, and this development is responsible for
the advancement of technology. As we live in technological world, we
need technology in every single matter of our life.
In this era, we are seeing the rapid development of advanced
Web and app applications.
All these technologies are built on programming languages, so
programming language are very important.

studying front-end development empowers individuals to shape the digital experiences of


tomorrow and positions them for rewarding and in-demand careers in the tech industry.
As a student of religion, I have to be a part of the digital community to do

my best, from being part of such technologies by developing computer programmes, web
applications, data management, and etc to help
spreading our ideologies to a larger audience in a cost-efficient way and
improve the quality of our propagation using these technologies.
Importance
o It gives you the chance to create your zone and make you feel independent to
propagate Islamic teachings.
o The fundamental of programming
o It gives the ability to solve problems. Finding solutions to these problems requires
logical and in-depth thinking.
o Understanding front-end technologies and best practices helps in achieving cross-
browser compatibility.
o Front-end developers contribute significantly to the success of a digital product by
focusing on the aspects that directly impact users.
o studying front-end development skills is essential for creating a positive user
experience.

Aims and Objectives


o To help Islam to propagate through new technologies.
o To build professional team in techie community.
o To improve skills like techniques for reasoning, solving problems, decision making,
etc.
o To produce us equipped with an understanding of fundamental programming.

Needed Credit for the Study


Kindly requesting to approve 3 credits regarding the importance and areas covered in the
study. Mainly focusing on react js.
Tools

Html5 Css3 visual studio Sass


Code

Java Script React Git Bootstrap Firebase

Area of Study
o Introduction to Front-End Development
o Introduction to HTML
 Overview of HTML (Hypertext Markup Language)
 Role of HTML in web development
 Basics of web browsers and rendering
o HTML Document Structure
 Understanding the basic structure of an HTML document
 Head and body sections
 Basic document elements: <!DOCTYPE>, <html>, <head>, <body>

o Text Formatting Tags


 Paragraphs: <p>
 Headings: <h1> to <h6>
 Line break: <br>
 Horizontal line: <hr>
 Emphasis: <em> and <strong>
 Subscript and Superscript: <sub> and <sup>

o Lists and Links


 Unordered Lists: <ul> and <li>
 Ordered Lists: <ol> and <li>
 Definition Lists: <dl>, <dt>, <dd>
 Hyperlinks: <a> and its attributes (href, target, etc.)

o Images
 Embedding images: <img> and its attributes (src, alt, width, height)
 Image maps: <map> and <area>

o Module 6: Forms and Input Elements


 Form structure: <form>, <input>, <label>, <button>, <select>, <textarea>
 Common input types: text, password, checkbox, radio, etc.
 Form attributes: action, method, enctype

o Tables
 Creating tables: <table>, <tr>, <td>, <th>
 Table headers and captions
 Table styling and attributes

o Semantic Elements
 Introduction to semantic HTML
 Semantic tags: <header>, <nav>, <section>, <article>, <aside>, <footer>
o Multimedia
 Embedding audio: <audio> and its attributes
 Embedding video: <video> and its attributes
 Multimedia fallback options

o HTML5 Canvas
 Introduction to the <canvas> element
 Basic drawing operations using JavaScript

o Meta Tags
 <meta> tags for character encoding, viewport, and more
 Favicon: Creating and linking to a favicon

o Module 12: Document Structure and Outlining


 <head> elements: <title>, <meta>, <link>
 Outlining the document with <header>, <main>, <nav>, <footer>

o Miscellaneous Tags
 <blockquote> for block quotes
 <abbr> for abbreviations
 <cite> for citations
 <code> for code snippets
 <time> for representing dates and times

o Introduction to CSS (Cascading Style Sheets)


 Overview of CSS and its role in web development
 CSS syntax and structure
 Inline vs Internal vs External CSS
 CSS Selectors and specificity
o Basic Styling
 Styling text with properties like font-family, font-size, font-weight, and color
 Setting background properties: background-color, background-image,
background-size
 Adjusting margins, padding, and borders

o Module Box Model


 Understanding the CSS box model
 Margin, border, padding, and content properties
 Box-sizing property and its impact

o Positioning and Layout


 Positioning elements: static, relative, absolute, fixed
 Display property: block, inline, inline-block
 Floats and clearing floats
 Flexbox basics

o Responsive Design with Media Queries


 Introduction to responsive design principles
 Using media queries to create responsive layouts
 Mobile-first design approach
 Viewport meta tag

o CSS Transitions and Animations


 Adding transitions with transition property
 Creating animations using @keyframes
 Timing functions and easing

o CSS Flexbox
 Understanding the Flexbox layout model
 Flex container and flex items
 Properties like flex-direction, justify-content, and align-items
o CSS Grid
 Introduction to the CSS Grid layout
 Creating grid containers and items
 Grid lines, tracks, and areas
 Grid template areas

o Advanced Selectors and Combinators


 Pseudo-classes and pseudo-elements
 Attribute selectors
 Combining selectors with combinators

o CSS Variables
 Declaring and using CSS variables
 Scope and inheritance of variables
 Dynamic styling with variables

o CSS Preprocessors (Optional)


 Introduction to CSS preprocessors (e.g., Sass)
 Variables, nesting, and mixins
 Importing and organizing styles with preprocessors

o Introduction to JavaScript
 Overview of JavaScript
 JavaScript in the context of web development
 Basic syntax and data types
 Variables, operators, and expressions

o JavaScript Control Flow


 Conditional statements (if, else if, else)
 Switch statements
 Looping structures (for, while, do-while)
 Introduction to functions
o Introduction to React.js
 Understanding React.js and its role in front-end development
 Setting up a React development environment
 Creating a simple React component
 JSX syntax and its benefits

o React Components
 Creating and using functional components
 Class components and their lifecycle methods
 State and props in React components
 Handling events in React

o Module React State and Lifecycle


 Managing state in React components
 Lifecycle methods and their uses
 Updating state and re-rendering components

o React Forms and Handling User Input


 Creating forms in React
 Handling form submissions and user input
 Controlled components in React

o React Hooks
 Introduction to hooks (useState, useEffect)
 Using multiple state variables with hooks
 Custom hooks

o React Router
 Introduction to client-side routing in React
 Navigation with React Router
 Route parameters and nested routes
o State Management with React Context (Optional)
 Managing state at the application level with React Context
 Creating context providers and consumers
 Avoiding prop drilling

o Hooks in React
 Introduction to React Hooks (useState, useEffect)
 Custom hooks for reusable logic
 Rules of hooks

o API Calls in React


 Making API calls in React applications
 Using fetch or axios for data fetching
 Handling asynchronous operations in React

o React Best Practices and Code Organization


 Best practices for organizing React code
 Component structure and naming conventions
 Code splitting for performance optimization

Method of Study

o Reaserch
o Online Classes
o Tutorials
Sources

HTML and CSS:


1. MDN Web Docs
2. W3Schools HTML Tutorial
3. freeCodeCamp HTML and HTML5 Basics
4. CSS-Tricks
Sass:
1. Sass Documentation
2. Scotch.io - Getting Started with Sass
JavaScript:
1. MDN Web Docs - JavaScript Guide
2. freeCodeCamp - JavaScript Algorithms and Data Structures Certification
3. JavaScript.info - Modern JavaScript Tutorial
React:
1. Official React Documentation
2. freeCodeCamp - Full Course on React
3. Codecademy - Learn React
General Learning Platforms:
1. YouTube - Traversy Media
2. YouTube - The Net Ninja
3. YouTube - Academind
4. YouTube - Programming with Mosh

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy