Create a landing page
•
1 like•675 views
http://fabienvauchelles.github.io/stweb-landingpage-create
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to Create a landing page
Similar to Create a landing page (20)
More from Fabien Vauchelles
Recently uploaded
Recently uploaded (20)
Create a landing page
- 1. CREATE A LANDING PAGE
- 2. YOUR WEAPONS
- 3. WHICH CODE EDITOR ? Sublime Text Web Storm Both have (Zen Coding)Emmet (http://docs.emmet.io/)
- 6. HTML & CSS
- 7. ARCHITECTURE OF A WEB PAGE Skeleton with HTML Design with CSS Interact with Javascript
- 8. LET'S SET A SIMPLE EXAMPLE HTML <div class="hello"> hello <span class="highlight">world</span> </div> CSS .hello { font-size: 50px; color: red; } .highlight { font-weight: bold; } RESULT hello world
- 9. AND A FULL PAGE ! <html> <head> <title>The title of my page</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header">This is my header</div> <script src="myscript.js"></script_> </body> </html>
- 10. HTML5 / ALL THE TAGS
- 11. HTML5 / COMMON TAGS USED We primarily use : div & span and a, img, form, input, button.
- 12. CSS / BIND TO HTML WITH SELECTORS to identify HTML tags and apply design .container {} .container .item:first-child {} :last-child :not(:last-child)
- 13. CSS / COMMON STYLES USED position, float, display margin, padding font‐family, font‐size, font‐weight text‐align color, background
- 14. CSS / ADJUST STYLES WITH CHROME DEVTOOLS LIVE CODING (slides/htmlcss/css/example.html)
- 15. SASS / ORGANIZE THE CSS SASS : is a CSS preprocessor simplify reading of the code structure code in multiple files
- 16. SASS / SIMPLIFY THE CSS Don't write : .hero { background: black; } .hero h1 { color: red; } .hero .highlight { font-weight: bold; } But write : .hero { background: black; h1 { color: red; .highlight { font-weight: bold; } } }
- 17. SASS / SPLIT THE CSS IN MULTIPLE FILES Don't write all your CSS in 1 file ... .hero { color: red; } /* ... > 1000 CSS messy lines */ .footer { font-size: 12px; } But split it in multiple files, sort by categories : @import '_header'; @import '_layout'; // ... @import '_footer';
- 20. GRID / UNDERSTAND THE GRID SYSTEM Bootstrap has a grid of 12 columns.
- 21. GRID / USE THE GRID SYSTEM How to use the grid ? <div class="row"> <div class="col-md-4 col-sm-6">Column 1</div> <div class="col-md-4 col-sm-6">Column 2</div> <div class="col-md-4 col-sm-6">Column 3</div> </div> The grid will have : 3 columns for a medium screen (width >= 992px) 2 columns for a small screen (768px >= width > 992px) 1 columns for a tiny screen (width < 768px) DEMO (slides/bootstrap/grid/demo.html)
- 22. BUTTONS Standard : Button <button class="btn btn-default" type="submit">Button</button> Color : Button <button class="btn btn-primary" type="submit">Button</button> Size : Button Button <button class="btn btn-primary btn-lg" type="submit">Button</button> <button class="btn btn-primary btn-xs" type="submit">Button</button>
- 23. FORMS Email Password Sign in <form class="form-horizontal"> <div class="form-group"> <div class="col-sm-12"> <input type="email" class="form-control" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input type="password" class="form-control" placeholder="Passwor d"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
- 24. CLEAN <CODE>
- 25. THE SMACSS METHOD EXTENDED SMACSS (Scalable and Modular Architecture for CSS) is a style guide for CSS. https://smacss.com (https://smacss.com) We split the code into functional modules
- 26. ORGANIZE FILES / OVERVIEW mylandingpage |- 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
- 27. ORGANIZE FILES / 'SCSS' DIRECTORY mylandingpage |- 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
- 28. ORGANIZE FILES / 'SRC/APP' DIRECTORY mylandingpage |- 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
- 29. ORGANIZE THE HTML CODE Separate into functional part <div class="hero"> <div class="hero-header"></div> <div class="hero-header-title">Use the best, use Jobboard.</div> <div class="hero-header-subtitle">and stay on top</div> </div> <div class="hero-calltoaction"> <button class="btn-register">Register</button> </div> </div> .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; }
- 31. ORGANIZE THE CSS CODE / ORGANIZE So, we organize styles as : 1. position 2. display 3. colors 4. font 5. miscellaneous
- 32. 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%; }
- 33. RESPONSIVE !
- 34. WHAT IS RESPONSIVE WEB DESIGN (RWD) ? Create a site which can be read across a wide range of devices, from desktop to mobile. Find screens size here : http://screensiz.es (http://screensiz.es)
- 35. WHAT STRATEGY TO USE ? 1. First, develop for desktop ! 2. Second, adapt mobile and tablet :)
- 36. USE @MEDIA QUERIES ! Example : <div class="hero">…</div> .hero { width: 960px; } @media screen and (max-width: 768px) { .hero { width: 600px; } }
- 37. ENDING
- 39. front‐end‐497) RESOURCES UX : , Fonts : , Colors : Icons : Codrops (http://tympanus.net/codrops) Cody House (http://codyhouse.co) Google Fonts (http://www.google.com/fonts) Da Font (http://www.dafont.com) Adobe Color (https://color.adobe.com/) Font Awesome (http://fontawesome.github.io/Font‐Awesome)
- 40. TUTORIAL
- 41. INSTALLATION / MAC (BREW) In a shell, execute : $ brew install node $ sudo npm -g install gulp grunt grunt-cli yo sass node-sass bower
- 42. INSTALLATION / UBUNTU In a shell, 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
- 43. INSTALLATION / WINDOWS Download & Install Download & Install Download & Install Add python executable to the PATH In a shell, execute : Git Extensions (https://code.google.com/p/gitextensions) NodeJS 0.10.33 (http://nodejs.org/dist/v0.10.33) Python 2.X.X (https://www.python.org/downloads) npm -g install gulp grunt grunt-cli yo sass node-sass bower
- 44. TUTORIAL / HERO GET THE PROJECT $ git clone https://github.com/fabienvauchelles/stweb-landingpage-tutor ial.git $ cd stweb-landingpage-tutorial/ $ npm install $ bower install $ git reset --hard q0 $ gulp serve CREATE THE HERO 1. Add the HTML in index.html 2. Add the SCSS
- 45. TUTORIAL / FEATURES GET THE NEXT STEP $ git reset --hard q1 $ gulp serve CREATE THE FEATURES 1. Add the HTML in index.html 2. Add the SCSS
- 46. TUTORIAL / BOOTSTRAP GET THE NEXT STEP $ git reset --hard q2 $ gulp serve USE BOOTSTRAP Use Bootstrap's columns for features
- 47. © Fabien Vauchelles (2015) TUTORIAL / FINAL GET AND READ THE SOLUCE $ git reset --hard q3 $ gulp serve