➤ Fundamental HTML and CSS syntax and how to build web pages ➤ How to style a website and add interactivity using CSS and JavaScript ➤ How to organize front-end code ➤ Getting your website online
the fundamental building blocks of the web ➤ Create landing pages or marketing emails ➤ Manage entries in a CMS or blogging system like Wordpress ➤ Design and code entire websites from scratch
Sublime Text 3 is an excellent choice (sublimetext.com/3) ➤ Install Node.js (nodejs.org) ➤ Are you on Windows? You may want to install some additional tools: ➤ Cygwin (https://cygwin.com) ➤ GOW (https://github.com/bmatzelle/gow) ➤ GitHub for Windows (https://desktop.github.com)
a URL into your browser or clicking a link ➤ A server handles that request ➤ The server will read the contents of a file or run a program that generates HTML ➤ The HTML is sent back to your browser ➤ Your browser renders the HTML ➤ Images, CSS, and JavaScript are linked to from the HTML and run separately ➤ Each external asset loads when it is called, in the order it is referenced in HTML
web browsers render pages ➤ This isn’t as much of an issue today as it was a few years ago but… ➤ You should always test in the big 3 (Chrome, Firefox, and Internet Explorer/Edge)
was totally justified! ➤ But since version 9 there’s been less and less to complain about ➤ It’s market share is smaller (almost non-existent in some niches) ➤ Enjoy the shit talking while it lasts
Describes the structure of content ➤ HTML pages are documents ➤ Should always be thought of as “pages” or “documents” ➤ Influences accessibility ➤ Affects Google’s view of your site (SEO) ➤ Originally built as a text-only medium
interpret the document (sort of optional but never leave it off) ➤ <html></html> - The container for the entire document ➤ <body></body> - The container for content that is to be displayed in the browser
levels of headings. Lower numbers are assigned to top level headings (like section titles) ➤ <p> - A paragraph tag ➤ <ul> & <ol> - Unordered (dotted) and ordered (numbered) list elements ➤ <li> - List items. Used in both ordered and unordered lists ➤ <a> - Anchor tags (for links) ➤ There are many more but these are just the most common ones
page. ➤ <main> - Denotes the main content apart from headers or footers ➤ <section> - A logical grouping of content and elements that would make sense on their own ➤ <article> - Content that can be syndicated on its own. An article, basically. But it can be more than just that. ➤ <nav> - Element that contains navigation elements ➤ <header> - The header of a page or section ➤ <footer> - Footer of a page or section or both ➤ <aside> - Additional information not part of the main content or section or a sidebar
information about the document itself but not any content ➤ Titles, references to external assets ➤ Additional meta information and browser instructions
all about the Cascade ➤ Elements, classes, and IDs are used to select parts of a document to style ➤ Selectors can be chained for greater accuracy ➤ CSS Syntax selector { property: value; }
a text element color Sets the color of text background Controls background color or image of an element font-size Set the font size of a text element font-weight Change the “boldness” of text margin Set the amount of space outside an element padding Set the amount of space inside an element border Set a border. Self-explanatory display Make an element inline, block, or hidden float Used for layout. “Floats” an element left or right
HTML that can be used as part of a selector ➤ ID attributes on HTML elements ➤ Can only be used once per page ➤ DO NOT USE IDs FOR STYLING ➤ Class attributes on HTML elements ➤ Multiple elements can have the same class
render in the document flow in the order they’re written ➤ Relative - Like static but with the option to move the element from the top, right, bottom, or left from the position it started ➤ Fixed - The element will be positioned as if it’s glued to its parent — which is the top-most parent, or the top-most parent that's positioned relatively — and won’t move when scrolling ➤ Absolute - The element will be positioned relative to the browser window, not its parent, but won’t stick on screen when scrolling like fixed elements ➤ Floating - Floating originally started with the intention of having an image off to the side with text flowing around it - think of a magazine layout. It takes an element out of the normal flow and moves it either left or right.
and put our files online ➤ Go here to get a free month of web hosting with DigitalOcean (https://goo.gl/oUS5M9) ➤ Sign up for an account and we’ll be online within 5 minutes
February 18th. This 10 week course runs from 6pm-9pm on Tuesdays and Thursdays. In this course, students learn how to build beautiful, interactive websites using HTML, CSS, and JavaScript.. If interested, take five minutes to submit your application here today. ➤ General Assembly’s Javascript Development Part-Time Course starts on March 9th. This 10- week course runs from 6pm-9pm on Mondays and Wednesdays. In this course, students will learn how to create advanced interactive web experiences with Javascript. If interested, take five minutes to submit your application here today.
➤ Used for adding interactivity to web pages ➤ Tried to piggyback off of the popularity of Java by using a similar name (JavaScript has nothing to do with Java)
URLs to code functions ➤ Models - Communicates with a database, describes data ➤ Views - The HTML pages rendered in a user’s browser ➤ Controllers - Handles a request and passes data to a view ➤ Databases - Persistent storage
billpatrianakos
jnchito
daitasu
skrb
yukukotani
masuda220
kishida
arkw
pocke
x5gtrn
tnagao7
mackee
yaotti
marcelosomers
.jpg){kind=avatar}
cargoodrich
marktimemedia
tamaranovitovic
malarkey
wayneb77
tammyeverts
bermonpainter
mfonobong
rmw
kastner
