Summer internship report- Web Development using Nodejs And Reactjs/Abstraction

 Overview/Abstract:

planning:

The primary motive of a site map is to create a website user-friendly and create a structure of a site. A wireframe provides a visual description of a site. Other than that,  I have decided that I am going to make a blog website and I will add functions and feature in a site as I want. This function includes login, email subscription, about, contact, some small feature and so much more.

Design: 

The web design is created according to the target audience. Things to keep in mind are a theme, color contrast, where to place text, head fonts images, videos, etc. The design layout will structure your page is a systematic manner so that it would look appealing. 

1.Navigation bar: this is going to be fixed at the top of the page and will remain at same place when we navigate through the web site, as navigation bar I am going to add logo, links, and login menu at the right side.

2. Content page: Here I will add my text and image/video content with some text styles. A horizontally long  banner of the website will be created, and below of this banner text content and a side menu bar will be created, from the menu user can go to its desire/required page by clicking or typing the page name.

3.Footer: A Simple footer with creator and website information will be displayed


Development:

A home page is first designed than the other pages. the landing or main page is created first, and then all other web pages are added, So I firstly created main page as the  development server(local host) using Nodejs and the whole page is made using Html and CSS. 

In the beginning I just creates a rough idea of website by creating required section and container in Html and give them desired aspect ratio, then I started to create content/features in it and made the page responsible to mobile phone devices also, after creation of the page/project I started page content and some additional features like sidebar, animations, and some other small features.

 


 

Comments

Post a Comment

Popular posts from this blog

edistrict

  id: 100894661 prevpass: Chandan@1234 pass: Chandan@123             17/aug/2021 linked with: Adhaar: 490556476387 phone number: 8285281356 email id:  imjunior471@gmail.com pass: Chandan@123, 1-aug-2023
Read more

richTextEditor

  import   React   from   'react' ; import  { Editor ,  EditorState , getDefaultKeyBinding ,  RichUtils }  from   'draft-js' ; import    '../assets/StyleTextEditor.css' ; import   '../../node_modules/draft-js/dist/Draft.css' ; class   RichTextEditor   extends   React . Component  {       constructor (props) {         super ( props );         this . state   =  {editorState:  EditorState . createEmpty ()};         this . focus   =  ()  =>   this . refs . editor . focus ();         this . onChange   =  (editorState)  =>   this . setState ({ editorState });         this . handleKeyCommand   =   this . _handleKeyCommand . bind ( this ); ...
Read more

CSS-position property

  position:static; Element cannot be move from their position, that is element get fixed   position:relative; It helps move an element with respect to its original position. position:fixed: It moves the element with respect to the browser windows. The position of the element remains fixed even if we scroll the web page. The next element present after the position element takes the place of the element leaving no gap. position:absolute; It moves the element with respect to the nearest positioned ancestor element. Next element will take the gap. z-index; It is used to position an element along the z axis. It works only positioned on elements.
Read more