HTML, CSS, Javascript
Transcript: An ID must be unique on a page. It is meant to be more specific than a class. A class can be used multiple times on a page. An element can have both an ID and class. An element can have multiple classes (separated with spaces), but can have only one ID. Scripting language for your web page that is executed client-side in the web browser or server side using something like Node.js JavaScript can be used to validate data entered into a form, provide drag and drop functionality, change styles on the fly, animate elements ... <a href="https://www.google.com">Google</a> Most elements will inherit many style properties from their parent elements by default. For example, in your CSS body { font-family: "Times New Roman", Georgia, Serif; } Then in your HTML <body> <p>This is my paragraph text</p> </body> The font used in the <p> (paragraph) uses the same font as the body. p Type (element) # ID . class HTML <head></head> Presentation layer. Defines styles (such as colors) Mobile traffic continues to increase Using Bootstrap ready made classes, you can specify how many spots in the grid system you want each column to occupy When there are designers and developers working on a project, using a CSS framework provides consistency Page output remains the same across different web browsers CSS Rule A dynamic language Can react to events Validate data Create cookies Detect visitor's browser Read/write/modify HTML elements Objects: Anything can be - windows, documents, images, tables, forms, buttons, links, etc. Objects have properties that act as modifiers. JSON: JavaScript Object Notation https://getbootstrap.com/ JavaScript Simple Example Pick and choose the features you want to use, discard what you don't Bootstrap customize page for custom version The <head> element contains special elements that instruct the browser where to find stylesheets, provide meta info and more. "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web." The doctype is not actually a tag Structure (HTML) Style (CSS) Behavior (JavaScript) body CSS Inheritance http://foundation.zurb.com/ <p>This is where some text will be</p> http://semantic-ui.com/ <script src="/js/jquery.js"></script> <script src="/js/myapp.js"></script> document is the object, write is the method Bootstrap Attribute HTML ul <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Plain Template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html> The Behavior CSS Weekly https://css-weekly.com Javascript Weekly https://javascriptweekly.com Responsive Design Weekly http://responsivedesignweekly.com Web Design Weekly https://web-design-weekly.com Frontend Focus https://frontendfoc.us Website Magazine https://www.websitemagazine.com Adds interactivity <div id="nav-bar"> . . . </div> <p id="primary" class="right uppercase noprint">Example with id and multiple classes on an element</p> <div class="noprint">A class can be used multiple times on one page</div> Class Selectors - Referenced with a period . <tag attribute="property">content</tag> Customizable CSS Hypertext Markup Language The declaration contains at last one property/value pair. Three layers of a web page Why Use a CSS Framework such as Bootstrap Nested Elements and the DOM h1 Note: When using a CDN, use the link & script tags recommended by Bootstrap that include integrity and crossorigin properties. Those were removed from above to simplify what is shown to pull in Bootstrap components from a CDN Finding HTML Elements Examples <!DOCTYPE html> Consistency <body> <h1>Heading</h1> <p>Paragraph text</p> <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </body> <h1>My Main Headline</h1> Using Separate JavaScript File <html></html> HTML + CSS + JavaScript = Front End Foundation Describes the content to the browser <input type="text" name="first_name" /> CSS body { font-family: Arial; } p { color: #777777; font-size: 18px; } h1, h2, h3, h4 { font-weight: bold } The <html> element defines the whole HTML document JavaScript Essentials selector { property: value; } Start tag Basic HTML page structure https://getbootstrap.com Popular Front-End Frameworks HTML 5 - common layout Aaron Rodden CSS #sidebar .author { font-size: 12px; color: red; } The doctype above declares HTML 5 The <body> elements contains the document content (what is shown inside the browser window) JavaScript <!DOCTYPE html> <html> <head><title>Simple Javascript</title>
Prezi Present
Prezi Video
Prezi Design
