Wifi:

Technexus / collaborat3


Download SublimeText:

http://www.sublimetext.com/3




Matt Soria


@matt_soria

mattsoria.com

matt.m.soria@gmail.com

 


F I R E B E L L Y

D E S I G N


@firebellydesign

firebellydesign.com




Review




HTML = HyperText Markup Language

+

CSS = Cascading StyleSheet



We learned the basic HTML syntax:

And the basic CSS syntax:


We looked at the Box Model


And we made this site:


What we'll cover today

  • More Advanced HTML
    • The <head>
    • Where stuff goes
    • Best Practices
  • More Advanced CSS
    • Selectors and naming
    • Best Practices + Tips
    • Media Queries
    • Intro to pre-processors (SASS)
  • How do I get this thing on the internet?
  • Tips for moving forward




Code is poetry.
— Wordpress.org




HTML



The  <head>


  • Establishes the document's language
  • Relays data about the doc to the browser
  • References other documents (CSS/JavaScript)


The Example:


<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Let's Make A (More Advanced) Website!</title>
    <meta name="author" content="Matt Soria">
    <meta name="description" content="A deeper dive into HTML & CSS with Matt Soria and Anyone Can Learn To Code">
    <meta name="keywords" content="HTML, CSS, workshop, code, web development">
    <link rel="shortcut icon" type="image/ico" href="favicon.ico">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/modernizr.custom.js"></script>
  </head>
</html>

Follow along at:

http://mattsoria/blog/lets-make-a-more-advanced-website


Check out:


http://mattsoria.com/blog/lets-make-a-more-advanced-website


for more info and resources about what we learned tonight, as well as what comes next.







Thank you!

Made with Slides.com