You're about to create your best presentation ever

Get started with Prezi

Html Css Javascript Presentation Template

Create your presentation by reusing one of our great community templates.

HTML/CSS Presentation

Transcript: The Languages of Websites HTML & CSS Intro HyperText Markup Language HyperText In reference to the links which connect websites to one another These links can be within a singular website Markup Includes images, gifs, and other content on a website A category of Computer Languages which focuses on text Language How you communicate with your computer to make a website What are some parts which make up this page? What do you see on page? Elements are Parts of a Webpage All elements are represented by tags <h1>A kiwi is not only a fruit but an animal</h1> Opening Tag Closing Tag Content Changes the behavior of the tag and adds more info Attributes extend tags <h1 alt="kiwi">A kiwi is not only a fruit but an animal</h1> name = value Structure of a Website John Doe Contact About Portfolio Header & Navigation Image Section Head <!DOCTYPE html> <html lang="en"> <head> <title>Profile Page</title> <meta charset="utf-8"> <!--Defines character set (keyboard)--> <link rel="stylesheet" type='text/css' href="css/style.css" /> </head> <body> <header> </header> <section><section> </body> </html> An element which provides basic info on the document itself. <head> <title>HTML/CSS Presentat</title> Shows up in the tab <meta> HTML metadata is data about the HTML document <link/> Connects external resources to current document All these elements within the head will NOT be display on the website <!DOCTYPE html> Lets you know what HTML version code is written in What You Have So Far... Header <header> <h1>Basic Website</h1> <nav> <ul> <li> <a href="portfolio.html">Portfolio</a> </li> <li> <a href="about.html">About</a> </li> <li> <a href="contact.html">Contact</a> </li> </ul> </nav> <header> Represents introductionary content, contains navigation and intro backing <header> <header> Navigation, unorderlist, and list items will go here. </header> Opening Tag Closing Tag Use as a heading. This element is defined as the most important heading thus it makes the text the biggest in size. <h6> is least important so smaller in size. <h1> <header> <h1>Write what you like</h1> </header> Which one is bigger or more important? <h2></h2> or <h4></h4> <h5></h5> or <h1></h1> Where all your navigation links are stored. <nav> <header> <h1>Basic Website</h1> <nav> Unorder list and list items will go here... </nav> <header> <ul> or unordered list has a bullet point for each list item. The <li> or list item is a singular item within such list. <ul> and <li> have a parent-child relationship. <ul> is the parent to <li> which is the child. <ul> and <li> <nav> <ul> <li>Profile</li> <li>About</li> <li>Contact</li> </ul> </nav> Parent Child Anchor element makes a hyperlink to other websites or pages within a website <a> <li><a href="https://www.instagram.com" target="_blank">Portfolio</a></li> Href is an attribute which shows where the link's destination is. You can put a url to link to any page you like. What You Have So Far... Basic Website Portfolio About Contact How HTML is displayed on the screen. Color, format, and many other design aspects are coded within a CSS page. Cascading Style Sheets (CSS) h1 { color: purple; } Value Property Selector Id An attribute to selecting one single element to style Id and Class Class An attribute to select multiple elements to style in a similar fashion #id { color: blue; } .class { color: blue; } What's the difference? CSS Box Model Content Padding Space in between the border Margin Space between everything else on page *Green line is border Block Elements: takes up the entire space of the container (or parent element) Block vs. Inline Elements Which one is inline and which one is block? thunderbird beauty school dropout Inline Elements: takes up only the space of itself font-family: 'Open Sans', sans-serif; To change the font of the text List of CSS properties font-size: 20px; Makes the text size bigger list-style-type: none; Try with ul and see what happens float: right; shifts elements either to the left or right of container text-align: center; How to align text. Values include left, right, & justify List of CSS properties text-decoration: none; Removes underlines. Values include... line-through, overline, and underline width: 100%; Element will take up entire container float: right; shifts elements either to the left or right of container header { width: 100%; /* Using precents, determine the width of the element */ } h1 { float: left; /* shifted element to left side of container */ font-family: 'Montserrat', sans-serif; } nav { float: right; } ul { list-style-type: none; /* removes all bullets */ } li { float: left; /* tells if content should go left of container */ } li a { display: block; // sets element to takes up entire space of container text-align: center; padding: 10px; font-size: 20px; text-decoration: none; // removes underline font-family: 'Montserrat', sans-serif; } a:hover { // @media CSS rule text-decoration: line-through; // can use overline or underline } What You Have So Far... Basic Website

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>

HTML/CSS PRESENTATION

Transcript: 1. Global CSS variables inside app project 2. Naming of CSS variables easy for using BEM 3. Font and usage of abas-elements typohraphy 4. Using colors variables in abas-elements with SASS COLORS * Include abas-element fonts. * Use variables from abas-elements CSS Naming Conventions BEM - Block Element Modifier Inside abas-elements TOPIC'S how to use abas-elements -fonts .stick-man {} Styles and Guides About Me PRESENTATION Question ? .stick-man--blue {} .stick-man--red {} Live DEMO Live Example Global CSS and BEM * Use of color's variables from abas-elements * Include color's from abas-elements in our project .stick-man__head {} .stick-man__arms {} .stick-man__feet {} .stick-man__head--small {} .stick-man__head--big {} Typography Miroslav Chalov Full stack developer Power of selectors CSS Sith power

HTML + CSS + Javascript

Transcript: position right Attributes HTML + CSS + Javascript Element Order ID is King !important is God <h1>Bad boy<h1> width CSS CSS selector Just a game .class #id * combine( ' , ' ' > ' ' + ' ' ' ) [attribute name = value] :psudo element IDC --> Cooper top name Detail 1 Detail 2 Box Model Color game bottom Common <h1>Jungle fly</h1> <a id="yahooLink" href="http://tw.yahoo.com/">Yahoo</a> Structured <body>, <div>, <span>, <ul>, <li>, <table>, <tr>, <td>... Form <form>, <input>, <textarea>... Presentation <a>, <img>, <title>, <h1>, <h2>, <b>, <i>... Others <script>... http://en.wikiversity.org/wiki/Web_Design/CSS_challenges value Javascript <h1>Bad boy left Detail 3 <br> HTML Tag height CSS applying rule Yahoo

Genius Hour: HTML, CSS, & JavaScript

Transcript: By: Jack Sellers Website Making Websites aren't like a google document. You can't just press a button for a heading or video, you have to do a string of commands using HTML, CSS, and JavaScript. Introduction: Introduction Strings are what you type down to create 1 line of code, in any coding language. What are Strings? What are strings? HTML is short for Hypertext Markup Language. HTML is the base of a website. HTML HTML Hypertext markup language let's you add the information; headings, images, text, videos, and more. What You Can do With It? Uses The strings: It's strings Headings: H1, H2... H6 Text: t Image: img Hyperlink: link Video: vid Forms Examples Me Using It: Using It https://drive.google.com/open?id=12nqc9g_LcE7fW_TMfkiV2nWWdLo1BWxH https://docs.google.com/forms/d/1YsFWKqr48kasYSpf6kAlBFHL0md7EMyd3z4vqZc1FFo/edit?usp=sharing Remake This! Your Challenge CSS is short for cascading style sheets. It lets your website come to life. CSS CSS CSS can be used to add a border, border weight, fill colors, and more. Uses Uses CSS always starts with what you are styling (Tags, ids, classes ect.). Then, you put a brace, which looks like this: . Then, you have the function, followed by what you want to do. How to Use It How to Use It { JavaScript JavaScript https://www.w3schools.com/ https://www.codecademy.com/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element Bibliography: My sources

HTML, JAVAScript,CSS and More

Transcript: Today’s web has evolved from the ongoing efforts of all the technologists, thinkers, coders and organizations who create these web technologies and ensure that they’re supported in web browsers like Internet Explorer, Firefox, Safari and Google Chrome. Do you know how web masters create the Web Pages ? Web pages have also become more expressive with the introduction of CSS ( Cascading Style Sheets ).CSS gives programmers an easy, efficient way to define a web page’s layout and beautify the page with design elements like colors, rounded corners, gradients, and animation. HTML ,Javascript and CSS and more I like to use google chromes because it very easy to use. In other way, HTML provides the basic building blocks for the web. It's pretty simple to create blocks to add the lines of text, links and images. Chapter 4 Web pages are written in HTML (Hypertext Mark up Language ) that tells web browsers how to structure and present content on a web page. This interaction between web technologies and browsers has made the web an open and friendly construction platform for web developers, who then bring to life many useful and fun web applications that we use daily.

HTML, CSS, and JavaScript

Transcript: Mitja Sajovic Informatika 2016/17 HTML CSS JavaScript Was it difficult? Did I learn anything new? Would I recommend Coursera to anyone? Yaakov Chaikin Adjunct Professor, Graduate Computer Science Course 3rd week Field work Interacting with a client Coding the restaurant site https://www.coursera.org/learn/html-css-javascript-for-web-developers/lecture/2wXNN/lecture-27-part-2-visit-with-the-client-field-trip https://www.coursera.org/ Conclusion Books Videos Quizzes HTML, CSS, and JavaScript for Web Developers 5 weeks https://www.coursera.org/learn/html-css-javascript-for-web-developers

Overview: HTML, CSS, and JavaScript

Transcript: CSS HTML, CSS, and JavaScript What's Style? Colors, various fonts and images are all a part of style. CSS also allows websites to adapt to various screen sizes and device types. JavaScript is essentially a more complicated language than HTML or CSS. CSS is about Style. JavaScript You can use HTML to add headings, control line breaks, format paragraphs, make lists, insert images, create links, and more. JavaScript allows for interactive web sites. An example of this would be where a "confirm" box pops up. HTML is found at the core of every web page. HTML functions using tags instead of programming language. An Overview: Web Design Definition It also allows for a slide-in-call-to-action. These are often found at the bottom right hand of a screen past the end of the sidebar. HyperText Markup Language HTML HTML provides the most basic structure of sites. This can be enhanced by CSS and JavaScript. CSS is used to control formatting, layout and presentation. JavaScript is used to control the behavior of all the different elements.

Explore our templates for more presentation inspiration

Lesson Plan - Board

Description: A well-organized lesson plan is the difference between getting things done and things getting out of hand. This vibrant, customizable, easy-to-use Prezi presentation template features a sticky note theme, so you'll be able to keep track of topics, assignments, exams, and more without missing a beat.

World Map - Antique

Description: Impactful presentations need stunning visuals and a meaningful metaphor to show high-level concepts and the smaller details. This customizable presentation template uses a classic world map visual to help you navigate complex information while staying grounded in your presentation’s core message.

Creativity-Paint

Description: For grant requests, funding pitches, program proposals, or any other kind of education or nonprofit presentation, this Prezi template is the way to generate interest and momentum. Like all Prezi education templates and Prezi nonprofit templates, it’s easily customizable.

Easy Book Presentation Template for Individual Design | Prezi

Description: When you need to clearly spell out your message, this creative Prezi template is the way to go. As with all Prezi education templates and Prezi nonprofit templates, this one is easy to customize to let you zoom in on your ideas or pull back to show the big picture.

Now you can make any subject more engaging and memorable

Get started with Prezi