Web Development Tools and Languages

Minimum Requirements for Web Development

• Minimum requirements:
  • Computer with Internet access.
  • Basic text editor.
  • Web browser application.
• Effective developers need familiarity with various tools to improve efficiency.

Ideal Tools for Web Development

• Specialized applications can aid specific development types (database, Windows, web).

Code Editor

• Applications designed for various coding languages.
• Features:
  • Basic text editor.
  • Syntax colorization for error detection and code navigation.
  • Built-in tools like resource navigator and code map for project file management.
• Some editors (e.g., Notepad++) offer plugins for additional features, language support, debugging, and testing.
• Brackets include a live editor that renders code output in real-time.

Terms to Know:

• Code Editor: Application for editing programming, scripting, and markup text-based code files.
• Text Editor: Software for editing nonspecific text-based files.
• Syntax: Rules for arranging keywords, identifiers, and characters into meaningful statements.
• Plugin: Software component adding a specific function to an existing program.

Integrated Development Environment (IDE)

• More advanced than code editors.
• Includes:
  • Colorized text editor.
  • Resource navigator.
  • Document map.
• Advanced debugging tools.
• Management tools for data sources and assets.
• Tools for remote collaboration.
• WYSIWYG (What You See Is What You Get) editor for interacting with webpage content without extensive HTML/CSS knowledge.
• IDE options for web development:
  • Visual Studio Code
  • Adobe Dreamweaver
  • Eclipse
  • NetBeans

Terms to Know:

• Integrated Development Environment (IDE): Software with a code editor, utilities, and tools designed to aid in software creation.
• WYSIWYG (What You See Is What You Get) Editor: Software that allows users to see, create, and edit website content as it would appear in the final product.

Web-Based IDEs

• Full IDEs accessible through a web browser with online storage.
• Features:
  • Project hosting.
  • Support for multiple files and resources.
  • Testing and running code within the site.
• Benefits:
  • Development uncoupled from the physical computer.
  • Inherent collaboration and code sharing.
  • Code compilation and packaging for deployment.
  • Integrated support for Git version control.
  • Support forking of projects.
  • Package managers for installing additional software and code packages.

Key Concept: Git

• Version control system that logs changes to code files.
• Allows reverting to previous versions and enables multiple developers to work on a single file.
• Developers use Git to create a "branch" for their assigned task.
• "Forking" a project means making a complete copy of a project folder.

Terms to Know:

• Git: A free and open-source version control system designed to provide version control over software to enable distributed collaboration, forking, branching, change tracking and merging.
• Version Control: The practice of tracking and managing changes to software code.
• Forking: A Git operation that creates a complete copy of a project, one that is not associated with the original project.
• Package Manager: Command-line interface (CLI) software used to locate, download, and install pre-build software packages that add additional functionality and capabilities to a coding language, a framework, or directly into a project.
• Branching: A Git operation that causes change logs to be kept separate to allow a developer to work separately and then merge their changes into the central project.

Content Management System (CMS)

• GUI-based application for site creation and content management.
• Simplifies content management and website design.
• Easy creation of new pages, applying site themes, and integrating pages into navigation menus.
• Common CMS options:
  • WordPress
  • Joomla
  • Drupal
  • Squarespace
  • Wix
  • Shopify

Big Idea

• CMS enables developers to focus on content creation.
• Allows non-developers to participate in content creation and site management.

Terms to Know:

• GUI-Based Application: A computer software application that provides graphic elements on the computer screen that allow users to interact with the computer.
• Content Management System (CMS): A GUI-based system of software designed to aid in the creation and management of website pages and content.
• Graphical User Interface (GUI): A method of interacting with technology that uses visual elements such as images, icons, drop-down menus that users directly interact with to control the system.

Coding Languages

• Web developers need to know markup and scripting languages.
• Grouped by where they operate: client-side or server-side.

In Context

• Client-side language: code that executes on the client's system.
• Server-side language: code that executes on the server.
• Front-end: what the user sees and interacts with.
• Back-end: how client requests are processed and handled by the server.
• Full-stack developer: can handle both front-end and back-end development.

Terms to Know

• Front End: Refers to anything that the user sees and interacts with when they access a website.
• Back End: Refers to the technology that resides and runs on the web server and directly or in-directly supports the operations of the website.
• Full-Stack Developer: A developer with the skills and knowledge to develop both the front end of a website that the user interacts with as well as the back-end technology that supports the website.

Client-Side Languages

• HTML (HyperText Markup Language)
• CSS (Cascading Style Sheet)
• JS (JavaScript)
• Client-side scripting languages execute on the client's systems.
• When a visitor requests a webpage, the client-side code is transmitted to the visitor's browser.
• HTML: Defines webpage content and structure using tags.
• CSS: Integrates with HTML to control webpage content rendering.
• JS: Customizes website behavior and operates; used to edit webpage content in response to events.

Big Idea

• HTML creates the page and content, CSS styles the content and controls the layout, and JS provides interactivity and functionality.

Terms to Know

• Client-Side Scripting: Any computer language that is executed on a client system.
• HyperText Markup Language (HTML): The standard language for creating structured documents designed to be displayed within a web browser.
• Tag: The building blocks of HTML. Tags are used to surround text and other tags to control layout, organization, and to apply styles.
• Cascading Style Sheets (CSS): The standard, rule-based style language for describing the presentation of an HTML document.
• Selector: A component of a CSS that determines which element in the HTML should receive a set of style properties.
• JavaScript (JS): The computer language that is used to manipulate HTML and CSS elements of a webpage that executes on the client’s system.
• Single Page Application (SPA): An architectural style of building a web application that rewrites the content of a single webpage to present the user with an interface.

Server-Side Languages

• Stored and executed on the server.
• Used for operations like accessing a database, sending emails, or generating webpages.
• Offload processing burdens and provide a light-weight interface for user systems.
• Common server-side languages:
  • PHP: Popular server-side scripting language framework.
  • Python: General-purpose language and framework for server-side scripting.
  • ASP.NET/C#: Server-side scripting language and framework for Windows systems.
  • GoLang: Modern server-side scripting language for distributed web services.
  • Ruby: Server-side scripting language focused on simplicity and productivity.
  • JavaScript with NodeJS: Framework that allows JS to be used as a server-side scripting language.
  • Java: Platform-independent, general-purpose language that can be easily implemented as a server-side scripting language

Term to Know

• Server-Side Languages: Any computer language that executes on a server.

Developer Information Resources

• Software developers need self-sufficiency and resourcefulness.
• Important to be aware of available resource types.

Key Concept

• Some sites include all three resource types.

Reference Sites

• Each coding language has a dedicated site with:
  • Language reference: proper syntax, keywords, operators, shorthands, and procedures.
  • Library reference: use and operations of the pre-built code and objects.
• Examples:
  • php.net
  • python.org
  • go.dev

Tutorial Sites

• Help individuals learn new skills.
• Organized into sequenced chapters with explanations, demonstrations, and interactive examples.
• Useful for learning new languages or concepts.
• Examples:
  • w3schools.com
  • tutorialspoint.com

Developer Forums

• Discussion forums where users can post questions and receive responses from the developer community.
• For scenario and situational questions.
• Users can find answers to similar questions.
• Example: Stackoverflow.com