CSS & HTML - Code in one day

WEBSITE IN A WEEKEND The fastest way to master the
full stack

BILL PATRIANAKOS Software Engineer & Full stack developer Founded a
web design company Former CTO @ Aplo, LLC BEWD Instructor at General Assembly

WHAT WE’LL COVER ➤ How the internet and websites work
➤ 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

WHAT CAN I DO WITH THESE SKILLS? ➤ These are
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

SETTING UP YOUR ENVIRONMENT ➤ Get a text editor ➤
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)

HOW THE WEB WORKS Going from URL to rendered page

THE CLIENT-SERVER LOOP ➤ You request a page by typing
a URL into your browser or clicking a link ➤ A server handles that request ➤ The server will read the contents of a ﬁle 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

Clockwise from left: You request a page from any device;
A server accepts the request and generates HTML; The HTML is sent to your browser and a web page is rendered.

WEB BROWSERS ➤ There are slight diﬀerences in the way
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)

EVERYONE LIKES TO TALK SHIT ABOUT IE ➤ And it
was totally justiﬁed! ➤ 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

FRONT-END VS. BACK-END DEVELOPMENT Front-end development concerns what the user
sees Back-end development is responsible for functionality and persistence - invisible to the user

HTML BASICS Hypertext Markup Language

HTML BASICS ➤ What is HTML? Hypertext Markup Language ➤
Describes the structure of content ➤ HTML pages are documents ➤ Should always be thought of as “pages” or “documents” ➤ Inﬂuences accessibility ➤ Aﬀects Google’s view of your site (SEO) ➤ Originally built as a text-only medium

HTML BASICS ➤ DOCTYPE - Tells the browser how to
interpret the document (sort of optional but never leave it oﬀ) ➤ <html></html> - The container for the entire document ➤ <body></body> - The container for content that is to be displayed in the browser

TEXT ELEMENTS ➤ <h1> - <h6> - There are 6
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

SECTIONING ELEMENTS ➤ <div> - A generic division of the
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

THE HEAD OF THE DOCUMENT ➤ The <head> element contains
information about the document itself but not any content ➤ Titles, references to external assets ➤ Additional meta information and browser instructions

TAG WRAPPING

TAG NESTING

HTML ATTRIBUTES

YOUR FIRST WEB PAGE We’ll build a simple todo app

CSS BASICS Cascading Stylesheets

CSS BASICS ➤ What is CSS? Cascading Stylesheets ➤ It’s
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; }

APPLYING CSS TO A PAGE ➤ Inline styling ➤ Using
a style tag in the page head ➤ Link to an external stylesheet

Inline styles Style tag Link to external file

COMMON CSS PROPERTIES Selector Deﬁnition font-family Sets the font on
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

CSS HOOKS ➤ A hook is some part of your
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

SPECIFICITY & COMBINATORS Specificity always trumps the cascade. (Figure 1)
You can apply rules to multiple elements at once or select and chain multiple elements together to be more specific. (Figure 2)

BOX MODEL ➤ Every element in your document is a
rectangle ➤ An element’s dimensions are controlled by content, padding, margin, and borders

POSITIONING ➤ Static - The default for all elements. They’ll
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.

STYLING OUR PAGE Adding layout and colors

DEPLOYING A STATIC SITE Putting it online

DEPLOYING A SITE ➤ We’ll set up a cheap server
and put our ﬁles 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

LEARNING RESOURCES ➤ Beginner front-end courses http://eepurl.com/YIHFz ➤ http://eloquentjavascript.net ➤
http://www.amazon.com/dp/0596517742/?tag=stackoverﬂ08-20 ➤ https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re- introduction_to_JavaScript

➤ General Assembly's Front-End Web Development Part-Time Course starts on
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 ﬁve 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 ﬁve minutes to submit your application here today.

JAVASCRIPT It’s not Java

JAVASCRIPT ➤ The only programming language supported by web browsers
➤ Used for adding interactivity to web pages ➤ Tried to piggyback oﬀ of the popularity of Java by using a similar name (JavaScript has nothing to do with Java)

LEARNING JAVASCRIPT A crash course in programming

ADDING INTERACTIVITY TO OUR APP

COMPONENTS OF A WEB APP

THE COMPONENTS OF A WEB APP ➤ Router - Routes
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

WEB FRAMEWORKS ➤ Don’t repeat yourself ➤ Focus on your
problem domain, not common components

FINISHING OUR TODO APP

CSS & HTML - Code in one day

CSS & HTML - Code in one day

More Decks by Bill Patrianakos

Other Decks in Programming

Featured

Transcript