Web Development CSS , JavaScript , HTML
more notes on web dev more in depth. more coming along the way. these notes were ment for me. so there may be some things you dont understand. or lazy misspellings. and that is because it want notes for me. but i figured i would share it anyway
1. CSS
1.1. style With CSS! -
2. JavaScript
2.1. JavaScript beginner plurasight classes
2.1.1. Constructor is called when a class is created.
2.1.1.1. methood -- EXAMPLE CODE let nikko = new Dog('Nikko'); // Create dog named Nikko nikko.incrementBehavior(); // Add 1 to nikko instance's behavior let bradford = new Dog('Bradford'); // Create dog name Bradford console.log(nikko.behavior); // Logs 1 to the console console.log(bradford.behavior); // Logs 0 to the console
3. STARTING DOC // <!DOCTYPE html> instruction to let the website know what to use.
3.1. PART 2 ---- Intro to TABLES this will go into how to work with tables in HTML follow up on other parts named part 2 use ctrl f to find the follow up on the bottom
3.1.1. Table borders - they can be added using the table attribute - EXAMPLE : (this is in CSS) table, td { border: 1px solid black; }
3.1.1.1. Spanning columns - useing <td colspan="data"</td> we can span data across days or weeks like a calendar does.
3.1.1.2. Spanning Rows -: using the tag "rowspan" we can input data spanning multiple rows. (greater than or equal to 1) to denote the number of rows it spans across.
3.1.2. table Footer: using tag <tfoot> you can use a table footer to section off sums, differences, and other data results.
3.1.3. Table body:- Long tables can be sectioned off using the table body element: <tbody>. The <tbody> element should contain all of the table’s data, excluding the table headings (more on this in a later exercise).
4. Styling text - if you want to style text you can use stuff like <p><em></p> for italic text. - or <strong> for BOLD <ins> adds Underline <sub> = subscript - <hr> = horizontal rule / draws a line across the page
4.1. line breaks = <br> this will break lines in the text in the browser. it can be used even like <br><br> for a line break /
4.1.1. div is used to as a placeholder for style agents like id= or class separate groups of elements. they are used later in css and JavaScript. aka nested elements.
4.1.1.1. Un ordered lists: with tag <ul><ul> & <li><li>
4.1.1.1.1. Ordered Lists - <ol><ol> like the before <UL> but ordered with numbers. adding items with the <li> tag example like so <ol><li>LISTNAME</li></ol>
5. HTML
5.1. Video tutorials notes <HTML>
5.1.1. REMEMBER -- ! + ENTER for body for html wrapper
5.1.1.1. META Tags are used for Google SEO / important for building websites for production
5.1.1.1.1. INLINE elements no new line <span> <img> <a>
5.1.1.1.2. Block Elements starts a NEW LINE <div> <h1> <h6> <p>
5.2. HOW FORMS WORK: EXAMPLE <form action="/example.html" method="POST"> </form> method; http type action: where the data goes
5.2.1. Text input :! - if you want a input field in your form you will need to use the element <input> The <input> element has a type attribute tells page what to render. we will explore the "text" attribute that will make a TEXT box for users- It’s also important that we include a name attribute for the <input> — without the name attribute, information in the <input> won’t be sent when the <form> is submitted.
5.2.1.1. default values can be set so we have a prefilled value in the text box to help the users experience
5.2.1.1.1. attributes -- Value="this" will put text in the search box as a helper for users - name="this" when you hover over will print the text 'helper' you want
5.3. Introduction to Semantic HTML
5.3.1. tags - <main> 4 main content of a webpage unique TO THAT PAGE <section> Defines a certin section of a webpage EG blog,contact list/info <article> defines a bit of content whitch makes up an article blogpost. <aside> Defines some content related to something else <header> for the header of a website - contains the NAV , title etc <footer> for the footer of a website
5.3.2. more info on semantic code
5.3.2.1. Main and Footer Two more structural elements are <main> and <footer>. These elements along with <nav> and <header> help describe where an element is located
5.3.2.1.1. Article and Section
5.3.3. The Aside Element
5.3.3.1. The <aside> element is used to mark additional information that can enhance another element
5.3.3.1.1. Some common uses of the <aside> element are for: Bibliographies Endnotes Comments Pull quotes Editorial sidebars Additional information
5.3.4. Figure and Figcaption
5.3.4.1. <figcaption> will caption the image for you <figure> goes outside the image and figcaption inside both the img src goes.
5.3.5. Audio and Attributes
5.3.5.1. EXAMPLE: <audio> <source src="iAmAnAudioFile.mp3" type="audio/mp3"> </audio>