Scribd Logo
Upload

Welcome to Scribd!

  • Web Development

    Uploaded by

    YENDUVA YOGESWARI
    23 views10 pages

    Original Title

    WEB DEVELOPMENT

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    23 views10 pages

    Web Development

    Uploaded by

    YENDUVA YOGESWARI

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    WEB

    DEVELOPM
    ENT
    Yenduva Yogeswari
    191220053
    Summer Internship
    June-July,2021
    • Web development is a broad term for the work involved in developing a website for the Internet
    (World Wide Web) or an intranet (a private network). Web development can range from developing
    the simplest static single page of plain text to the most complex web based internet applications (or
    just ‘web apps’) electronic businesses, and social network services.

    - HTML
    Front end - CSS
    - JavaScript
    Full Stack Web
    Development
    - node.js
    Back end - PHP
    • Server - Java
    • Application - Ruby
    • database - SQL
    Front-end web development, also known as client-side development is the practice of producing HTML,
    CSS and JavaScript for a website so that a user can see and interact with them directly.

    • Hyper Text Markup • Cascading Style Sheets • JavaScript


    Language </>
    • It describes the structure of a
    {..} </>
    Web page. • CSS describes how HTML • JavaScript is programming
    • It consists of a series of elements are to be displayed language commonly used
    on screen. in web development.
    elements.
    • CSS saves a lot of • It gives the functionality to
    • It’s elements tell the browser
    work(repetition of code). the website.
    how to display the content.

    HTM CSS JS
    L
    INTO THE WORLD OF HTML
    terminology
     The <!DOCTYPE html> declaration defines that
    this document is an HTML5 document
     The <html> element is the root element
    of an HTML page
     The <head> element contains meta information
    about the HTML page
     The <title> element specifies a title for the HTML page
    (which is shown in the browser's title bar or in the page's tab)
     The <body> element defines the document's body,
    and is a container for all the visible contents, such as
    headings, paragraphs, images, hyperlinks, tables, lists, etc
     HTML Comments  <!-- text -->
     HTML
    Introduction to CSS

    • CSS is used to define styles for your web pages, including the design,
    layout and variations in display for different devices and screen sizes.
    • CSS comments /*--------------*/

    CSS SELECTORS CSS Styles:


    Element selector:
    element-name{….} 1. Background properties
    Class selector: 2. Border properties
    .classname{….} 3. Padding
    Id selector 4. Margin ,Color
    #id-name{….} 5. Font properties
    Universal selector 6. Text properties Link properties / Navigation
    *{….} bar properties
    ways of inserting a style sheet

    External Internal Inline


    FRAMEWORK

    A framework is a platform for developing software applications. It provides a foundation on which software
    developers can build programs for a specific platform.

    BOOTSTRAP

    Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML
    and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels
    and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create
    responsive designs

    There are two ways to start using Bootstrap 4 on your own website.
    ● Include Bootstrap 4 from a CDN(Content Delivery Network).
    ● Download Bootstrap 4 from getbootstrap.com

    Advantages

    • Easy to use Responsive features


    • Mobile-first approach Browser compatibility
    JAVASCRIPT
    • Javascript is a text - based programming language that allows you to make web pages
    interactive. JavaScript is an object-based scripting language that is lightweight and cross-
    platform.
    • In HTML, JavaScript code is inserted between <script> tags.
    • Code after double slashes // or between /* and */ is treated as a comment.

    When you are building a house ,


    INTERPRETATION Html is the structure of the house ,
    OF HTML ,CSS
    CSS is the decoration/painting of the house and
    AND
    JavaScript is the functionality/behaviour
    JAVA SCRIPT
    like electricity of the house.
    Document Object Model JQUERY

    DOM is a javascript class that defines HTML elements jQuery is a lightweight, "write less, do more”, JavaScript library.
    as objects. It supports properties, methods, events. It is a Selecting elements with jQuery
    programming interface for HTML documents.
    $() → similar to document.querySelector()
    Selecting HTML elements Some methods and properties
    document.getElementbyId() append() ,prepend()
    document.getElementbyClassName() before() , after()
    document.getElementbyTagName()
    remove(), empty()
    document.querySelector() document.querySelectorAll()
    addClass(), removeClass()
    To modify texts , html content and attributes with Js dom
    toggleClass()
    inner html, text-content
    animate()
    get-attribute(), set-attribute()
    hide(), toggle()
    addEventListener()
    fadeIn() , fadeout()
    console.log()
    fadeToggle()
    slideDown()
    z

    PROJECTS
     PROJECT1 : Portfolio website

     RESULT : https://yogeswari3.github.io/portfolio/

     PROJECT2 : online shopping system

     RESULT : https://wellyfy-wd02-mb2.netlify.app/

    THANKYOU

    You might also like