create a landing page

Download Create a landing page

Post on 12-Apr-2017

322 views

Category:

Technology

0 download

Embed Size (px)

TRANSCRIPT

  • CREATE A LANDING PAGE

  • YOUR WEAPONS

  • WHICH CODE EDITOR ?

    SublimeText WebStorm

    Bothhave (ZenCoding)Emmet(http://docs.emmet.io/)

    http://docs.emmet.io/

  • WHICH BROWSER ?

  • CHROME, DEFINITELY.CHROME, DEFINITELY.

  • HTML & CSS

  • ARCHITECTURE OF A WEB PAGESkeletonwith

    HTMLDesignwith

    CSSInteractwithJavascript

  • LET'S SET A SIMPLE EXAMPLEHTML

    hello world

    CSS.hello { font-size: 50px; color: red; }.highlight { font-weight: bold; }

    RESULT

    helloworld

  • AND A FULL PAGE !

    The title of my page This is my header

  • HTML5 / ALL THE TAGS

  • HTML5 / COMMON TAGS USEDWeprimarilyuse:div&spananda,img,form,input,button.

  • CSS / BIND TO HTML WITH SELECTORStoidentifyHTMLtagsandapplydesign

    .container {}

    .container .item:first-child {}:last-child:not(:last-child)

  • CSS / COMMON STYLES USEDposition,float,display

    margin,padding

    fontfamily,fontsize,fontweight

    textalign

    color,background

  • CSS / ADJUST STYLES WITH CHROME DEVTOOLSLIVECODING(slides/htmlcss/css/example.html)

    http://localhost:9000/slides/htmlcss/css/example.html

  • SASS / ORGANIZE THE CSSSASS:

    isaCSSpreprocessorsimplifyreadingofthecodestructurecodeinmultiplefiles

  • SASS / SIMPLIFY THE CSSDon'twrite:

    .hero { background: black; }

    .hero h1 { color: red; }

    .hero .highlight { font-weight: bold; }

    Butwrite:.hero { background: black;

    h1 { color: red;

    .highlight { font-weight: bold; } }}

  • SASS / SPLIT THE CSS IN MULTIPLE FILESDon'twriteallyourCSSin1file...

    .hero { color: red; }/* ... > 1000 CSS messy lines */.footer { font-size: 12px; }

    Butsplititinmultiplefiles,sortbycategories:@import '_header';@import '_layout';// ...@import '_footer';

  • BOOTSTRAPhttp://getbootstrap.com(http://getbootstrap.com)

    http://getbootstrap.com/

  • EXISTINGS FRAMEWORKS ?

    enfranais!...

    TwitterBootstrap(http://getbootstrap.com)

    Foundation(http://foundation.zurb.com)KNACSS(http://www.knacss.com)

    http://www.knacss.com/http://foundation.zurb.com/http://getbootstrap.com/

  • GRID / UNDERSTAND THE GRID SYSTEMBootstraphasagridof12columns.

  • GRID / USE THE GRID SYSTEMHowtousethegrid?

    Column 1 Column 2 Column 3

    Thegridwillhave:

    3columnsforamediumscreen(width>=992px)

    2columnsforasmallscreen(768px>=width>992px)1columnsforatinyscreen(width

  • BUTTONSStandard: Button

    Button

    Color: ButtonButton

    Size: Button ButtonButtonButton

  • FORMSEmail

    Password

    Sign in

    Sign in

  • CLEAN

  • THE SMACSS METHOD EXTENDEDSMACSS(ScalableandModularArchitectureforCSS)isa

    styleguideforCSS.https://smacss.com(https://smacss.com)

    Wesplitthecodeintofunctionalmodules

    https://smacss.com/

  • ORGANIZE FILES / OVERVIEWmylandingpage|- bower_components : external plugins|- node_modules : tools to build the project|- scss : my common styles|- src |- app : the page |- assets : media files |- images |- index.html : the homepage|- bower.json : list of the external plugins|- gulpfile.js : JS makefile|- package.json : list of tools to build the project

  • ORGANIZE FILES / 'SCSS' DIRECTORYmylandingpage|- scss |- _base.scss : basics styles |- _form.scss : forms |- _layout.scss : all about structure |- _mixins.scss : functions |- _variables.scss : common configuration |- index.scss : import the previous |- vendor.scss : import the external styles

  • ORGANIZE FILES / 'SRC/APP' DIRECTORYmylandingpage|- src |- app |- _header.scss : header of the page |- _features.scss : feature part |- _footer.scss : footer of the page |- _hero.scss : hero part |- _prices.scss : prices part |- navbar.js : navbar behavior JS |- index.js : misc behavior JS

  • ORGANIZE THE HTML CODESeparateintofunctionalpart

    Use the best, use Jobboard. and stay on top

    Register

    .hero { padding: 100px 0;

    .hero-header { color: gray; } .hero-header-title { font-size: 40px; } .hero-header-subtitle { font-size: 20px; } .hero-calltoaction { margin-top: 50px; }}

    .btn-register { color: white; background: orange; }

  • CSSstylescanquicklybecomemessy

  • ORGANIZE THE CSS CODE / ORGANIZESo,weorganizestylesas:

    1. position

    2. display3. colors

    4. font

    5. miscellaneous

  • ORGANIZE THE CSS CODE / EXAMPLE.myitem { /* Position */ position: absolute; top: 0;

    /* Display */ display: block; width: 100px; height: 50px; margin: 0 5px 20px 10px; padding: 5px 5px;

    /* Colors */ color: whitesmoke; background: green;

    /* Font */ font-family: 'Arial'; font-size: 12px;

    /* Miscellaneous */ border-radius: 50%;}

  • RESPONSIVE !

  • WHAT IS RESPONSIVE WEB DESIGN(RWD) ?

    Createasitewhichcanbereadacrossawiderangeofdevices,fromdesktoptomobile.

    Findscreenssizehere:http://screensiz.es(http://screensiz.es)

    http://screensiz.es/

  • WHAT STRATEGY TO USE ?1. First,developfordesktop!2. Second,adaptmobileandtablet:)

  • USE @MEDIA QUERIES !Example:

    .hero { width: 960px; }

    @media screen and (max-width: 768px) { .hero { width: 600px; }}

  • ENDING

  • TO GO FURTHER

    Intgrerunemaquette,Grafikart(french)(http://www.grafikart.fr/tutoriels/htmlcss/integration

    frontend497)

    http://www.grafikart.fr/tutoriels/html-css/integration-front-end-497

  • frontend497)

    RESOURCESUX: ,

    Fonts: ,

    Colors:Icons:

    Codrops(http://tympanus.net/codrops) CodyHouse(http://codyhouse.co)

    GoogleFonts(http://www.google.com/fonts) DaFont(http://www.dafont.com)

    AdobeColor(https://color.adobe.com/)FontAwesome

    (http://fontawesome.github.io/FontAwesome)

    http://www.grafikart.fr/tutoriels/html-css/integration-front-end-497http://www.dafont.com/http://codyhouse.co/http://fontawesome.github.io/Font-Awesomehttps://color.adobe.com/http://www.google.com/fontshttp://tympanus.net/codrops

  • TUTORIAL

  • INSTALLATION / MAC (BREW)Inashell,execute:

    $ brew install node$ sudo npm -g install gulp grunt grunt-cli yo sass node-sass bower

  • INSTALLATION / UBUNTUInashell,execute:

    $ curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -$ sudo apt-get install -y nodejs git$ sudo npm -g install gulp grunt grunt-cli yo sass node-sass bower

  • INSTALLATION / WINDOWSDownload&Install

    Download&Install

    Download&Install

    AddpythonexecutabletothePATH

    Inashell,execute:

    GitExtensions(https://code.google.com/p/gitextensions)

    NodeJS0.10.33(http://nodejs.org/dist/v0.10.33)

    Python2.X.X(https://www.python.org/downloads)

    npm -g install gulp grunt grunt-cli yo sass node-sass bower

    https://www.python.org/downloadshttps://code.google.com/p/gitextensionshttp://nodejs.org/dist/v0.10.33

  • TUTORIAL / HEROGET THE PROJECT

    $ git clone https://github.com/fabienvauchelles/stweb-landingpage-tutorial.git$ cd stweb-landingpage-tutorial/

    $ npm install$ bower install

    $ git reset --hard q0

    $ gulp serve

    CREATE THE HERO

    1. AddtheHTMLinindex.html2. AddtheSCSS

  • 2. AddtheSCSS

    TUTORIAL / FEATURESGET THE NEXT STEP

    $ git reset --hard q1

    $ gulp serve

    CREATE THE FEATURES

    1. AddtheHTMLinindex.html2. AddtheSCSS

  • TUTORIAL / BOOTSTRAP

    GET THE NEXT STEP$ git reset --hard q2

    $ gulp serve

    USE BOOTSTRAPUseBootstrap'scolumnsforfeatures

  • FabienVauchelles(2015)

    TUTORIAL / FINALGET AND READ THE SOLUCE

    $ git reset --hard q3

    $ gulp serve