Preparation for presentation:
Developing the website model - bringing this into a browser model to see how it looks as a layout -
I feel from here the font needs to be smaller in the type, but the layout does work nicely cohesively
Wireframe for presentation -
Video Style - Starting to create scenes and imagery
Story-board created to show in presentation - Motion Graphic
Lynda.com Tutorial Notes -
I watched the lynda tutorials for HTML and CSS.
HTML Essential Training
HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that's simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.
HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that's simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.
Chapter: 1. Introducing HTML
Video: Basic HTML syntax (5 Notes)
<p> paragraph </p>
attributes <p lang="en"> saying the paragraph is English - name, value <br />Attributes can be links as welll
<h1> heading 1 - top level heading </h1>
<em> - emphasis </em> - nesting
Video: Basic HTML syntax (5 Notes)
<p> paragraph </p>
attributes <p lang="en"> saying the paragraph is English - name, value <br />Attributes can be links as welll
<h1> heading 1 - top level heading </h1>
<em> - emphasis </em> - nesting
Child elements have to close inside the parent tags <p> <em> <strong> </strong> </em></p>
Video: HTML resources (1 Notes)
MORE INFORMATION FOR HTML
Chapter: 2. Basic Page Structure
Video: Exploring an HTML document (3 Notes)
<!DOCTYPE HTML>
<HTML> </HTML>
Two main areas <head> non visual emements that go into make the page work </head><div><body> all visual elements on the page </body></div>
Video: DOCTYPE declarations (1 Notes)
Doctype declaration - must be at the top when coding <!doctype html>
Video: The document head (1 Notes)
MORE INFORMATION FOR HTML
Chapter: 2. Basic Page Structure
Video: Exploring an HTML document (3 Notes)
<!DOCTYPE HTML>
<HTML> </HTML>
Two main areas <head> non visual emements that go into make the page work </head><div><body> all visual elements on the page </body></div>
Video: DOCTYPE declarations (1 Notes)
Doctype declaration - must be at the top when coding <!doctype html>
Video: The document head (1 Notes)
<meta charset="utf-8"> - standard
Video: The document body (1 Notes)
Creating the basic starters - title is what appears in the top bar
Video: Understanding content models (1 Notes)
Elements and categories of code
Chapter: 3. Formatting Page Content
Video: Formatting content with HTML (4 Notes)
<pre> Pre formatted text - displayed how it is seen in the code including enters </pre>
<h4> Heading 4 </h4>
H1 - h6 are just like paragraph styles that you can make look any way you wang
Creating the basic starters - title is what appears in the top bar
Video: Understanding content models (1 Notes)
Elements and categories of code
Chapter: 3. Formatting Page Content
Video: Formatting content with HTML (4 Notes)
<pre> Pre formatted text - displayed how it is seen in the code including enters </pre>
<h4> Heading 4 </h4>
H1 - h6 are just like paragraph styles that you can make look any way you wang
<i> italics </i>
Video: Using headings (1 Notes)
H1-6 are about the structure of the document to illustrate the same titles in certain H's
Video: Formatting paragraphs (1 Notes)
Use CSS for spacing between pages
Video: Controlling line breaks (1 Notes)
<br> line break within paragraphs.
Video: Emphasizing text (2 Notes)
<dt> </dt>
<strong> and <em> is for screen reader - use this to really emphasise this - b / i is presentational and the other is logical
Video: Displaying images (2 Notes)
keep images that will be used in the same folder as the code - <img src="where/the/imageis.jpg" width="300" height="300" alt="what the image does">
H1-6 are about the structure of the document to illustrate the same titles in certain H's
Video: Formatting paragraphs (1 Notes)
Use CSS for spacing between pages
Video: Controlling line breaks (1 Notes)
<br> line break within paragraphs.
Video: Emphasizing text (2 Notes)
<dt> </dt>
<strong> and <em> is for screen reader - use this to really emphasise this - b / i is presentational and the other is logical
Video: Displaying images (2 Notes)
keep images that will be used in the same folder as the code - <img src="where/the/imageis.jpg" width="300" height="300" alt="what the image does">
In <img align="left" to wrap text (recommend to be done in CSS
Chapter: 4. Structuring Content
Video: The value of structure (1 Notes)
main structure of a webpage <h1-6> <article> <aside> <nav> <section> <header> <main> <footer>
Video: The nav element (1 Notes)
<nav> </nav>
Video: The div element (1 Notes)
<div> grouping element </div> can add class="what it is"
Chapter: 5. Creating Links
Video: Linking to pages within your site (1 Notes)
<p> link to <a href="filename.html" title="link to page in same directory">to display</a>
Video: The value of structure (1 Notes)
main structure of a webpage <h1-6> <article> <aside> <nav> <section> <header> <main> <footer>
Video: The nav element (1 Notes)
<nav> </nav>
Video: The div element (1 Notes)
<div> grouping element </div> can add class="what it is"
Chapter: 5. Creating Links
Video: Linking to pages within your site (1 Notes)
<p> link to <a href="filename.html" title="link to page in same directory">to display</a>
Video: Linking to external pages (1 Notes)
Linking to external sites - need full URL <a href="http://www.site.whatever/" title="visit this site"> link </a>
Linking to external sites - need full URL <a href="http://www.site.whatever/" title="visit this site"> link </a>
Video: Linking to page regions (4 Notes)
Anchors - sections with in a document
id="value" - these make section places capitalisation matters. linking within a page to sections <a href="#idhere" title="whatitis"> linked element </a>
Be sure to link things back up if you link down the page
Can add #into links to other pages if you know the section you are wanting to link to
Chapter: 6. Creating Lists
Video: Unordered lists (1 Notes)
<ul> un ordered list tag at start and very end<br /><il> list item tag </il><br /><il> each item new tag </il>
Anchors - sections with in a document
id="value" - these make section places capitalisation matters. linking within a page to sections <a href="#idhere" title="whatitis"> linked element </a>
Be sure to link things back up if you link down the page
Can add #into links to other pages if you know the section you are wanting to link to
Chapter: 6. Creating Lists
Video: Unordered lists (1 Notes)
<ul> un ordered list tag at start and very end<br /><il> list item tag </il><br /><il> each item new tag </il>
Chapter: 7. Controlling Styling
Video: HTML and CSS (1 Notes)
!-- commenting out --!
!-- commenting out --!
CSS Fundamentals
Chapter: 1. CSS Basics
Video: CSS syntax (1 Notes)
p{font-family: Arial, Helvetica, sans-serif; font-size: 1em}
Video: Basic selector types (4 Notes)
Chapter: 1. CSS Basics
Video: CSS syntax (1 Notes)
p{font-family: Arial, Helvetica, sans-serif; font-size: 1em}
Video: Basic selector types (4 Notes)
CSS (aka Cascading Style Sheets) is one of the "big three" languages of the web. It's used to style text, images, and other page elements, and control their positioning on webpages. CSS saves time because you can change the look of everything on your page—or just one element or section—with a simple line of code. After you have mastered HTML, CSS is the logical next step. CSS Fundamentals covers the basic concepts, terminology, and techniques you need to read and write CSS. It's for people who want a big-picture overview before taking hands-on courses. Author James Williamson explains how CSS affects text, borders, backgrounds, and images; how CSS works with HTML; and how the W3C's evolving CSS specification impacts designers. He also reviews some of the most popular CSS editors and frameworks and lists online tools and resources for further study.
Selectors - <br />Element selector p {information changed}<br />h1 {} ul {} <br />class selectors
class="subheading" .subheading {} <br />ID selectors id="sidebar" unique to page #sidebar {} 1:35
selector then write around the rest
Can add element to the front of ID's - there can be no spaces or special characters for class/ID
class="subheading" .subheading {} <br />ID selectors id="sidebar" unique to page #sidebar {} 1:35
selector then write around the rest
Can add element to the front of ID's - there can be no spaces or special characters for class/ID
dependent selectors div p span {}
Grouping selectors h1, h2, .quote {}
Video: CSS authoring options (3 Notes)
Can make external style sheets .css documents - use a link to get there
Embedded styles only apply for the certain pages you are using
Inline is in the bracket of HTML
Video: How browsers apply styles (3 Notes)
Grouping selectors h1, h2, .quote {}
Video: CSS authoring options (3 Notes)
Can make external style sheets .css documents - use a link to get there
Embedded styles only apply for the certain pages you are using
Inline is in the bracket of HTML
Video: How browsers apply styles (3 Notes)
main - index - inline (last rule applied wins) this applies to style sheets themselves - the last applied
overrights the last 2:09
You can set a main rule for the entire body, then overnight certain things - start by writing for the body
You can set a main rule for the entire body, then overnight certain things - start by writing for the body
Styles add all together
Chapter: 3. Common CSS Concepts
Video: Working with fonts (3 Notes)
System fonts -
Requesting fonts CSS order - Arial, Helvetica, Verdana, sans-serif
@font-face syntax to use your own font if needed
Video: Formatting text (2 Notes)
pixels are fixed - em changes and is relevant to your device
System fonts -
Requesting fonts CSS order - Arial, Helvetica, Verdana, sans-serif
@font-face syntax to use your own font if needed
Video: Formatting text (2 Notes)
pixels are fixed - em changes and is relevant to your device
font-weight font-style font-variant (caps, small caps etc) text-transform (upper or lower case), text-align
text-indent indent the first line of the paragraph letter-space and word-space, line-height 6:16 Video: What is the box model? (6 Notes)
Width, height, padding margins etc
Margin - space around the element, used to define the space around the element.
Border - Elements are allowed borders border-width, border-style, border-colour etc.
Margin - space around the element, used to define the space around the element.
Border - Elements are allowed borders border-width, border-style, border-colour etc.
Padding - space added to an element inside the border. The packing around the text to stop the text
from touching the side of the box. 2:29
Width and height - the content and element have different sizes
Box-sizing - there is two ways to do this.
Video: Margins & padding (2 Notes)
Margins are important for the spacing between objects
Margins collapse on one another
Video: Backgrounds (1 Notes)
Box-sizing - there is two ways to do this.
Video: Margins & padding (2 Notes)
Margins are important for the spacing between objects
Margins collapse on one another
Video: Backgrounds (1 Notes)
Background - code
Video: Working with color (1 Notes)
Video: Working with color (1 Notes)
you can use colour keywords supported by CSS or HEX numers
Video: Floats (1 Notes)
Floats are good ways to layout things
Video: Basic CSS layout concepts (2 Notes)
Initial page elements - to ensure the page fits to screen
Positioning layout
Video: Floats (1 Notes)
Floats are good ways to layout things
Video: Basic CSS layout concepts (2 Notes)
Initial page elements - to ensure the page fits to screen
Positioning layout
No comments:
Post a Comment