Lecture 7. Action View, Bootstrap & Deploying 1 / 40
|
|
- Adam Black
- 5 years ago
- Views:
Transcription
1 Lecture 7 Action View, Bootstrap & Deploying 1 / 40
2 Homeworks 5 & 6 Homework 5 was graded Homework 6 was due last night Any questions? 2 / 40
3 How would you rate the di culty of Homework 6? Vote at 3 / 40
4 Final Projects It's time to start thinking about your final project Proposals will be due on November 12 Ideas: Re-create one of your favorite sites Build off of one of the homeworks you started in this class More details to come next week 4 / 40
5 More Generators 5 / 40
6 More generators! These are the last generators that I will teach you There are plenty more, but these are enough for our purposes Model: rails g model model_name col1:type col2:type Scaffold: rails g scaffold model_name col1:type col2:type 6 / 40
7 Model Generator You pass the generator the name of the model and its attributes It creates the migrations and model file for you rails g model review course:references content:text 7 / 40
8 Sca old Generator Scaffolds made Rails famous Check out DHH's classic how to make a blog in 15 minutes video You pass the generator the name of the model and its attributes It creates: The migrations and model file The controller and views with RESTful routes The 7 RESTful routes in config/routes.rb rails g scaffold course code:string title:string 8 / 40
9 Action View 9 / 40
10 What does the View do? Handles data & communicates directly with the database Handles HTTP requests Displays content to the user Vote at 10 / 40
11 Using Action View in Rails It is Rails convention to place our views inside of the app/views/ directory Since views are associated with a controller, they'll be placed in a directory with the same name as the controller For our purposes, we will use files ending in.html.erb This allows us to embed ruby code directly in our views A view file for our traditional homepage might be placed inside of: app/views/welcome/index.html.erb 11 / 40
12 Which of the following will render the course's title to the screen? (In making this poll I discovered that Poll Everywhere uses Rails) A. %> B. %> C. %> Vote at 12 / 40
13 Layouts Can be used to extract out common boilerplate code Rails ships with a default layout: app/views/layouts/application.html.erb Every view that we create will be wrapped in this layout by default Contains <html>, <head>, <title>, <body> tags Our views will be placed inside of the <body> tags Uses <%= yield %> You can create other layouts (out of the scope of this class) 13 / 40
14 Partials Allow you to break your views into smaller chunks Great for small, reusable blocks of code They get placed into their own view file & can be rendered in other templates Names start with an _ Example: app/views/courses/_form.html.erb To render a partial in a template: <%= render 'courses/form' %> Notice the _ is omitted when rendering the partial 14 / 40
15 How can I pass data from the controller to the view? You can't You define a private method in the controller You define an instance variable in the controller action Vote at 15 / 40
16 Locals Partials should be modular Should not rely on instance variables passed from the controller Instead, they should use local variables that get passed along when the partial is rendered 16 / 40
17 Locals Example The courses form makes use of a course local variable <%# app/views/courses/_form.html.erb %> <%= form_with model: course do form %>... <% end %> The new controller action so we pass it to the form when rendering it <%# app/views/courses/new.html.erb %>... <%= render 'form', %> 17 / 40
18 Action View Helpers Rails provides us with a number of helpers that can replace writing direct HTML For example: <%# app/views/layouts/application.html.erb %>... <%= stylesheet_link_tag 'application', media: 'all', 'data <%= javascript_include_tag 'application', 'data-turbolinks-tr / 40
19 URL Helper The URL helper provides us with some methods of interacting with URLs The most important one for our purposes is link_to link_to generates an anchor tag with the provided text and URL <%# The following are equivalent %> %> <a %></a> 19 / 40
20 link_to By default, the link_to helper will generate a link that makes a GET request We can pass along the method option to change the type of HTTP request <%= link_to method: :delete %> There are many options that we can pass to a link_to <%= link_to 'Courses', courses_path, class: 'link', id: 'course_link' %> 20 / 40
21 Form Helpers The Form helper provides us with some methods for interacting with forms We will focus on form_with (not form_tag or form_for) form_with generates the actual form while there are additional helpers for generating form fields 21 / 40
22 form_with We can pass it an object <%= form_with model: Course.new do form %> <%= form.text_field :title %> <% end %> <form action="/courses" method="post" data-remote="true"> <input type="text" name="course[title]"> </form> Or a URL <%= form_with url: courses_path do form %> <%= form.text_field :title %> <% end %> <form action="/courses" method="post" data-remote="true"> <input type="text" name="title"> </form> 22 / 40
23 Form Field Helpers We also get helpers to generate form fields Here are a few:... <%= form.label :title %> <%= form.text_field :title %> <%= form.text_area :description %> <%= form.check_box :complete %> <%= form.password_field :password %> <%= form.collection_select :notebook_id, Notebook.all, :id, / 40
24 Other Helpers There are a lot more Check out some of them here 24 / 40
25 Bootstrap 25 / 40
26 What is an HTML class? A collection of methods and attributes that can be used to instantiate an object An identifier that only one HTML element on a page can have An identifier that multiple HTML elements can have Vote at 26 / 40
27 Bootstrap We will be briefly cover Bootstrap 4 Allows us to quickly create web applications that look nice without having to write our own CSS Has a 12 column grid system that allows us to easily layout our site Basically just involves adding classes to our HTML elements 27 / 40
28 Bootstrap Pros & Cons Pros: Supported by almost every browser Mobile-first & extremely responsive Customizable Grid System Good documentation Cons: Very verbose, end up adding a ton of classes Without extensive customization, every Bootstrap site looks the same Tied to jquery Bit of a learning curve 28 / 40
29 Bootstrap Gem There are a number of ways to include Bootstrap in your project, we'll use the gem Thorough setup instructions are provided on the website The gem uses the Rails asset pipeline which makes it easy to customize Bootstrap and follow Rails best practices 29 / 40
30 Getting Started To add Bootstrap styling to our HTML, we add specific classes to different HTML elements I generally start by wrapping my content inside of a container <%# app/views/layouts/application.html.erb %>... <body> <div class="container"> <%= yield %> </div> </body> / 40
31 Navbar Next I usually add a Bootstrap-styled navbar to my app I create a partial for the navbar: app/views/layouts/_nav.html.erb Then I render the partial in the default layout: <%# app/views/layouts/application.html.erb %>... <body> <%= render 'layouts/nav' %> <div class="container"> <%= yield %> </div> </body> / 40
32 Tables Styling tables is a pretty straightforward task in Bootstrap For a very basic table, just requires adding the.table class to the <table> tag <table class="table"> <tr> <th>col 1</th> <th>col 2</th> </tr> <tr> <td>data A1</td> <td>data A2</td> </tr> </table> 32 / 40
33 Forms In Bootstrap, form styling goes on the form elements instead of the form itself <%= form_with do form %> <div class="form-group"> <%= form.label :title %> <%= form.text_field :title, class: 'form-control' %> </div> <%= form.submit class: 'btn btn-primary' %> <% end %> 33 / 40
34 Color You can also change text/background colors with some predefined color utility classes Primary: The app's primary color (blue by default) Secondary: The app's secondary color (gray by default) Success: Green by default Danger: Red by default Warning: Yellow by default Info: Teal by default Light, Dark, Muted, White 34 / 40
35 Size Used in different ways: For example, to specify the width of a button For example, to specify the intended behavior on a specific device size Sizes: xs, sm, md, lg, xl 35 / 40
36 Grid System Bootstrap uses a 12 column grid system (Bootstrap 4 also comes with flexbox) Can add sizes to the columns to specify how it should be displayed on certain device sizes <div class="container"> <div class="row"> <div class="col-2">col 1</div> <div class="col-6">col 2</div> <div class="col-4">col 3</div> </div> </div> 36 / 40
37 Possibilities of Bootstrap Bootstrap is very extensive and there's no way that I could go through it all Take a look at some of the examples Read through the documentation 37 / 40
38 Deploying 38 / 40
39 Heroku Heroku allows us to deploy our application to the web fairly easily and for no cost This guide does a great job of explaining the steps required to deploy an application 39 / 40
40 Homework 6 Part-2 Start as early as possible Part-2 starts with you copying over the required pieces from Part-1 Then, you'll Afterwards, you'll add in some Bootstrap styling and then deploy to Heroku Grading: Normal 25 points 5 manually graded points for deploying to Heroku & including Bootstrap 40 / 40
Lecture 4. Ruby on Rails 1 / 49
Lecture 4 Ruby on Rails 1 / 49 Client-Server Model 2 / 49 What is it? A client (e.g. web browser, phone, computer, etc.) sends a request to a server Request is an HTTP request Stands for HyperText Transfer
More informationLecture 4. Ruby on Rails 1 / 52
Lecture 4 Ruby on Rails 1 / 52 Homeworks 2 & 3 Grades were released for homework 2 Homework 3 was due last night Everyone got a style freebie since my default setup ignores spec files and I didn't change
More informationLecture 9. Forms & APIs 1 / 38
Lecture 9 Forms & APIs 1 / 38 Final Project Proposal Due November 12th 11:59PM Should include: A summary of your idea A diagram with the db tables you plan to use& the relationships between them You can
More informationProgramming web design MICHAEL BERNSTEIN CS 247
Programming web design MICHAEL BERNSTEIN CS 247 Today: how do I make it?! All designers need a medium. Napkin sketches aren t enough.! This week: core concepts for implementing designs on the web! Grids!
More informationLecture 6. Active Record Associations 1 / 34
Lecture 6 Active Record Associations 1 / 34 Midterm Course Evaluations https://goo.gl/forms/0ddvh2gqox60fwm13 2 / 34 Learn HTML You're going to be writing your own views in the next HW Make sure to familiarise
More informationLecture 6. Active Record Associations 1 / 30
Lecture 6 Active Record Associations 1 / 30 Homeworks 4 & 5 Homework 4 was graded Homework 5 was due last night Any questions? 2 / 30 Learn HTML Time's almost up! You're going to be writing your own views
More informationThis project will use an API from to retrieve a list of movie posters to display on screen.
Getting Started 1. Go to http://quickdojo.com 2. Click this: Project Part 1 (of 2) - Movie Poster Lookup Time to put what you ve learned to action. This is a NEW piece of HTML, so start quickdojo with
More informationFront-End UI: Bootstrap
Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com
More informationEpisode 298. Getting Started With Spree
Episode 298 Getting Started With Spree Spree 1 is a fully-featured e-commerce solution that can be easily integrated into a Rails application. If you need to turn a Rails app into a store that sells products
More informationResponsive Web Design and Bootstrap MIS Konstantin Bauman. Department of MIS Fox School of Business Temple University
Responsive Web Design and Bootstrap MIS 2402 Konstantin Bauman Department of MIS Fox School of Business Temple University Exam 3 (FINAL) Date: 12/06/18 four weeks from now! JavaScript, jquery, Bootstrap,
More informationRails: Views and Controllers
Rails: Views and Controllers Computer Science and Engineering College of Engineering The Ohio State University Lecture 18 Recall: Rails Architecture Wiring Views and Controllers A controller is just an
More informationContents in Detail. Foreword by Xavier Noria
Contents in Detail Foreword by Xavier Noria Acknowledgments xv xvii Introduction xix Who This Book Is For................................................ xx Overview...xx Installation.... xxi Ruby, Rails,
More informationAdvanced Angular & Angular 6 Preview. Bibhas Bhattacharya
Advanced Angular & Angular 6 Preview Bibhas Bhattacharya Agenda Lazy loading modules Using Bootstrap with Angular Publish/subscribe with the RxJS Subject API What's new in Angular 6 Lazy Loading Modules
More informationNukaCode - Front End - Bootstrap Documentation
Nuka - Front End - Bootstrap Documentation Release 1.0.0 stygian July 04, 2015 Contents 1 Badges 3 1.1 Links................................................... 3 1.2 Installation................................................
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More informationLecture 8. Validations & Sessions 1 / 41
Lecture 8 Validations & Sessions 1 / 41 Advanced Active Record 2 / 41 More Complex Queries Arel provides us with a number of methods to query our database tables So far, we've only used find which limits
More informationMateen Eslamy 10/31/13
Mateen Eslamy 10/31/13 Tutorial In this tutorial, you ll learn how to create a webpage using Twitter Bootstrap 3. The goal of this tutorial is to create a responsive webpage, meaning that if the webpage
More informationSession 5. Web Page Generation. Reading & Reference
Session 5 Web Page Generation 1 Reading Reading & Reference https://en.wikipedia.org/wiki/responsive_web_design https://www.w3schools.com/css/css_rwd_viewport.asp https://en.wikipedia.org/wiki/web_template_system
More informationBuilding Web Applications
Building Web Applications Mendel Rosenblum CS142 Lecture Notes - Building Web Applications Good web applications: Design + Implementation Some Design Goals: Intuitive to use Don't need to take a course
More informationIntroduction and first application. Luigi De Russis. Rails 101
Introduction and first application Luigi De Russis 2 About Rails Ruby on Rails 3 Framework for making dynamic web applications created in 2003 Open Source (MIT License) for the Ruby programming language
More informationWorking Bootstrap Contact form with PHP and AJAX
Working Bootstrap Contact form with PHP and AJAX Tutorial by Ondrej Svestka Bootstrapious.com Today I would like to show you how to easily build a working contact form using Boostrap framework and AJAX
More informationRails 4 Quickly. Bala Paranj
Rails 4 Quickly Bala Paranj 1 About Author Bala Paranj has a Master s degree in Electrical Engineering from The Wichita State University. He has over 15 years of experience in the software industry. He
More informationRails Guide. MVC Architecture. Migrations. Hey, thanks a lot for picking up this guide!
Rails Guide Hey, thanks a lot for picking up this guide! I created this guide as a quick reference for when you are working on your projects, so you can quickly find what you need & keep going. Hope it
More informationStatic Site Generation
Static Site Generation Computer Science and Engineering College of Engineering The Ohio State University Lecture 17 What is Static Site Generation? Use a program to produce HTML pages Analogous to compiling
More informationResponsive Web Design (RWD)
Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed
More informationCss Manually Highlight Current Link Nav Link
Css Manually Highlight Current Link Nav Link way to automatically highlight the "current" link. And I can manually add the following CSS to each page to get them highlighted, but I want to avoid added.
More informationIntroduction to Computer Science Web Development
Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 14 Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout
More informationClient Side MVC with Backbone & Rails. Tom
Client Side MVC with Backbone & Rails Tom Zeng @tomzeng tom@intridea.com Client Side MV* with Backbone & Rails Benefits of Client Side MVC Backbone.js Introduction Client Side MV* Alternatives Backbone
More informationFRONT END DEVELOPER CAREER BLUEPRINT
FRONT END DEVELOPER CAREER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE!
More informationRails Engines. Use Case. The Implementation
Rails Engines Rails engines range from simple plugins to powerful micro-applications. The discussions we ve had so far about Railties are closely related to the function of a Rails engine. One interesting
More informationCOM401 Software Engineering Laboratory
Computer Engineering Department COM401 Software Engineering Laboratory November 04, 2014 LAB-3: Rails Introduction Time: 2 lab hours Objectives: Practice with Ruby Symbols Routes MVC pattern CRUD operations
More informationWeb Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1
Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan
More informationCUSTOMER PORTAL. Custom HTML splashpage Guide
CUSTOMER PORTAL Custom HTML splashpage Guide 1 CUSTOM HTML Custom HTML splash page templates are intended for users who have a good knowledge of HTML, CSS and JavaScript and want to create a splash page
More informationMPT Web Design. Week 1: Introduction to HTML and Web Design
MPT Web Design Week 1: Introduction to HTML and Web Design What will we do in this class? Learn the basics of HTML and how to create our own template Basic website structure Learn design concepts for a
More informationSimple AngularJS thanks to Best Practices
Simple AngularJS thanks to Best Practices Learn AngularJS the easy way Level 100-300 What s this session about? 1. AngularJS can be easy when you understand basic concepts and best practices 2. But it
More informationMastering the APEX Universal Theme
Mastering the APEX Universal Theme Roel Hartman Copyright 2015 APEX Consulting 2 Themes APEX GURU What are Themes? What was wrong with the old Themes? Table Based CSS tuning Templates The answer of the
More informationiflame INSTITUTE OF TECHNOLOGY
Web Development Ruby On Rails Duration: 3.5 Month Course Overview Ruby On Rails 4.0 Training From Iflame Allows You To Build Full Featured, High Quality, Object Oriented Web Apps. Ruby On Rails Is A Full
More informationWeb Programming BootStrap Unit Exercises
Web Programming BootStrap Unit Exercises Start with the Notes packet. That packet will tell you which problems to do when. 1. Which line(s) are green? 2. Which line(s) are in italics? 3. In the space below
More informationDay 8: 7/June/2012. Log-in Authentication
Day 8: 7/June/2012 Log-in Authentication p Learn authentication so that only specific users can use the Web information of the system. p We use Devise to p Add one line to the file project/gemfile gem
More informationCreate First Web Page With Bootstrap
Bootstrap : Responsive Design Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. 2. Bootstrap 3 is mobile-first
More informationTechniques for Optimizing Reusable Content in LibGuides
University of Louisville From the SelectedWorks of Terri Holtze April 21, 2017 Techniques for Optimizing Reusable Content in LibGuides Terri Holtze, University of Louisville Available at: https://works.bepress.com/terri-holtze/4/
More informationCOMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts
COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationWeb Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction
More informationClassroom Blogging. Training wiki:
Classroom Blogging Training wiki: http://technologyintegrationshthornt.pbworks.com/create-a-blog 1. Create a Google Account Navigate to http://www.google.com and sign up for a Google account. o Use your
More informationEXPLORE MODERN RESPONSIVE WEB DESIGN TECHNIQUES
20-21 September 2018, BULGARIA 1 Proceedings of the International Conference on Information Technologies (InfoTech-2018) 20-21 September 2018, Bulgaria EXPLORE MODERN RESPONSIVE WEB DESIGN TECHNIQUES Elena
More informationKaltura MediaSpace Styling Guide. Version: August 2016
Kaltura MediaSpace Styling Guide Version: 5.0 - August 2016 Kaltura Business Headquarters 250 Park Avenue South, 10th Floor, New York, NY 10003 Tel.: +1 800 871 5224 Copyright 2016 Kaltura Inc. All Rights
More informationStatic Site Generation
Static Site Generation Computer Science and Engineering College of Engineering The Ohio State University Lecture 17 What is Static Site Generation? Use a program to produce HTML pages Analogous to compiling
More informationMaking a live edit contact list with Coldbox REST & Vue.js
Tweet Making a live edit contact list with Coldbox REST & Vue.js Scott Steinbeck Mar 28, 2016 Today we will be making a contact database that you can quickly and easily manage using ColdBox and Vue.js.
More informationMigration Methods* Column Options. Active Record Supported Types. Add Column. Remove Column. Create Table. Don t Forget to Rake!
Migrations To Create a Blank Migration: rails g migration To Add Columns: rails g migration AddTo [columnname:type] To Remove Columns: rails g migration RemoveFrom
More informationCS193X: Web Programming Fundamentals
CS193X: Web Programming Fundamentals Spring 2017 Victoria Kirst (vrk@stanford.edu) CS193X schedule Today - Middleware and Routes - Single-page web app - More MongoDB examples - Authentication - Victoria
More informationChallenge: Working with the MIS2402 Template
Challenge: Working with the MIS2402 Template In this challenge we will see how the appearance of the MIS2402 template can be modified. Start by downloading mis2402template04.zip and setting up a corresponding
More informationAngularJS. CRUD Application example with AngularJS and Rails 4. Slides By: Jonathan McCarthy
AngularJS CRUD Application example with AngularJS and Rails 4 1 Slides By: Jonathan McCarthy Create a new Rails App For this example we will create an application to store student details. Create a new
More informationSass. The Future of Stylesheets.
Sass. The Future of Stylesheets. Chris Eppstein Follow me @chriseppstein Architect - Caring.com Creator - Compass Stylesheet Framework Core Contributor - Sass A website for caregivers of the sick and elderly.
More informationProject Part 2 (of 2) - Movie Poster And Actor! - Lookup
Getting Started 1. Go to http://quickdojo.com 2. Click this: Project Part 2 (of 2) - Movie Poster And Actor! - Lookup This is an extension of what you did the last time (the Movie Poster lookup from Week
More informationWeb Designing. Course Content. Basic HTML Tags. Getting started with CSS. Dealing with Images
Web Designing Course Content Basic HTML Tags Basic HTML template Heading Tags Paragraph and Break tags Bold and Italics HTML lists Getting started with CSS Introduction to CSS CSS rules Where to put your
More informationHello, world! 3.1. Ruby on Rails Web SimpleGreeter Hello, world! Rails SimpleGreeter Web Rails projects. ruby $ mkdir -p ~/projects
3 Hello, world! Ruby on Rails Web SimpleGreeter Hello, world! 3.1 Rails SimpleGreeter Web Rails projects OIAX BOOKS Ruby on Rails 5.0 $ mkdir -p ~/projects ruby 2.3.1 15 3 Hello, world! $ cd ~/projects
More informationAngularJS. CRUD Application example with AngularJS and Rails 4. Slides By: Jonathan McCarthy
AngularJS CRUD Application example with AngularJS and Rails 4 1 Slides By: Jonathan McCarthy Create a new Rails App For this example we will create an application to store student details. Create a new
More informationCss Manually Highlight Current Page Menu Using
Css Manually Highlight Current Page Menu Using I use a single page navigation menu for my Intranet site (offline) and want to And I can manually add the following CSS to each page to get them highlighted.
More informationLesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder.
Lesson 1 using Dreamweaver CS3 To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project. (Note:
More informationINTRODUCTION TO WEB DEVELOPMENT IN C++ WITH WT 4
INTRODUCTION TO WEB DEVELOPMENT IN C++ WITH WT 4 Roel Standaert FOSDEM 2018 https://www.webtoolkit.eu/wt CONTENTS What is Wt? A simple Hello world Creating a larger application, with: Templates Style sheets
More informationWEB DEVELOPER BLUEPRINT
WEB DEVELOPER BLUEPRINT HAVE A QUESTION? ASK! Read up on all the ways you can get help. CONFUSION IS GOOD :) Seriously, it s scientific fact. Read all about it! REMEMBER, YOU ARE NOT ALONE! Join your Skillcrush
More informationPurpose of this doc. Most minimal. Start building your own portfolio page!
Purpose of this doc There are abundant online web editing tools, such as wordpress, squarespace, etc. This document is not meant to be a web editing tutorial. This simply just shows some minimal knowledge
More informationAbout the Tutorial. Audience. Prerequisites. Copyright & Disclaimer. Laravel
About the Tutorial Laravel is a powerful MVC PHP framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications. Laravel was created by Taylor Otwell.
More informationWeb Software Model CS 4640 Programming Languages for Web Applications
Web Software Model CS 4640 Programming Languages for Web Applications [Robert W. Sebesta, Programming the World Wide Web Upsorn Praphamontripong, Web Mutation Testing ] 1 Web Applications User interactive
More informationCourslets, a golf improvement web service. Peter Battaglia
Courslets, a golf improvement web service Peter Battaglia Discussion Project Overview Design and Technologies Utilized Rails and REST URLs, URLs, URLs Rails and Web Services What s s exposed as a service?
More informationWEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310
WEB/DEVICE DEVELOPMENT CLIENT SIDE MIS/CIT 310 Project #4 Updating your class project to be more mobile friendly To gain a fuller appreciate for Responsive Design, please review Chapter 8. Another great
More informationClass #7 Guidebook Page Expansion. By Ryan Stevenson
Class #7 Guidebook Page Expansion By Ryan Stevenson Table of Contents 1. Class Purpose 2. Expansion Overview 3. Structure Changes 4. Traffic Funnel 5. Page Updates 6. Advertising Updates 7. Prepare for
More informationdjango-responsive2 Documentation
django-responsive2 Documentation Release 0.1.3 Mishbah Razzaque Sep 27, 2017 Contents 1 django-responsive2 3 1.1 Why would you use django-responsive2?................................ 3 1.2 Using django-responsive2
More informationRuby on Rails. SITC Workshop Series American University of Nigeria FALL 2017
Ruby on Rails SITC Workshop Series American University of Nigeria FALL 2017 1 Evolution of Web Web 1.x Web 1.0: user interaction == server roundtrip Other than filling out form fields Every user interaction
More informationReading How the Web Works
Reading 1.3 - How the Web Works By Jonathan Lane Introduction Every so often, you get offered a behind-the-scenes look at the cogs and fan belts behind the action. Today is your lucky day. In this article
More informationwelcome to BOILERCAMP HOW TO WEB DEV
welcome to BOILERCAMP HOW TO WEB DEV Introduction / Project Overview The Plan Personal Website/Blog Schedule Introduction / Project Overview HTML / CSS Client-side JavaScript Lunch Node.js / Express.js
More informationWebsite Management with the CMS
Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging
More informationIntroduction to AngularJS
CHAPTER 1 Introduction to AngularJS Google s AngularJS is an all-inclusive JavaScript model-view-controller (MVC) framework that makes it very easy to quickly build applications that run well on any desktop
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationEktron Content Marketing Platform Product Notes
Ektron Content Marketing Platform Product Notes Ektron Content Marketing Platform Product Notes Ektron, Inc. 542 Amherst St. Nashua, NH 03063 Tel: +1 603-594-0249 Fax: +1 603-594-0258 Email: sales@ektron.com
More informationEktron Content Marketing Platform Product Notes
Ektron Content Marketing Platform Product Notes Ektron Content Marketing Platform Product Notes Ektron, Inc. 542 Amherst St. Nashua, NH 03063 Tel: +1 603-594-0249 Fax: +1 603-594-0258 Email: sales@ektron.com
More informationTen good practices for ASP.NET MVC applications
Ten good practices for ASP.NET MVC applications Dino Esposito JetBrains dino.esposito@jetbrains.com @despos facebook.com/naa4e Options for Web development Fully serverside Fully clientside Hybrid SPA And
More informationAdvanced Dreamweaver CS6
Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this
More informationCSS gives great power. But requires great responsibility.
CSS gives great power. But requires great responsibility. You can do almost anything with CSS. You can do almost anything with CSS. Change colors You can do almost anything with CSS. Change colors, opacity
More informationHypertext Markup Language, or HTML, is a markup
Introduction to HTML Hypertext Markup Language, or HTML, is a markup language that enables you to structure and display content such as text, images, and links in Web pages. HTML is a very fast and efficient
More informationTHE PRAGMATIC INTRO TO REACT. Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX
THE PRAGMATIC INTRO TO REACT Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX REACT "A JavaScript library for building user interfaces" But first... HOW WE GOT HERE OR: A BRIEF
More informationFinancial. AngularJS. AngularJS.
Financial http://killexams.com/exam-detail/ Section 1: Sec One (1 to 50) Details:This section provides a huge collection of Angularjs Interview Questions with their answers hidden in a box to challenge
More informationHTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
More informationWINDEV 23 - WEBDEV 23 - WINDEV Mobile 23 Documentation version
WINDEV 23 - WEBDEV 23 - WINDEV Mobile 23 Documentation version 23-1 - 04-18 Summary Part 1 - Report editor 1. Introduction... 13 2. How to create a report... 23 3. Data sources of a report... 43 4. Describing
More informationManual Html Image Src Url Path Not Working
Manual Html Image Src Url Path Not Working _img src="file:///absolute/path/to/rails-app/public/image.png" alt="blah" /_. However i obviously want a relative path instead. Where is the relative path going.
More informationRails: MVC in action
Ruby on Rails Basic Facts 1. Rails is a web application framework built upon, and written in, the Ruby programming language. 2. Open source 3. Easy to learn; difficult to master. 4. Fun (and a time-saver)!
More informationEggplant Functional Mykel Allen Bethel Tessema Bladimir Dominguez CSM Field Session 2018
Eggplant Functional Mykel Allen Bethel Tessema Bladimir Dominguez CSM Field Session 2018 I. Introduction Eggplant functional is a software company that offers several products that are used to test code.
More informationAn Introduction to JavaScript & Bootstrap Basic concept used in responsive website development Form Validation Creating templates
PHP Course Contents An Introduction to HTML & CSS Basic Html concept used in website development Creating templates An Introduction to JavaScript & Bootstrap Basic concept used in responsive website development
More informationRuby on Rails 3. Robert Crida Stuart Corbishley. Clue Technologies
Ruby on Rails 3 Robert Crida Stuart Corbishley Clue Technologies Topic Overview What is Rails New in Rails 3 New Project Generators MVC Active Record UJS RVM Bundler Migrations Factory Girl RSpec haml
More informationBindTuning Installations Instructions, Setup Guide. Invent Setup Guide
BindTuning Installations Instructions, Setup Guide Invent Setup Guide This documentation was developed by, and is property of Bind Lda, Portugal. As with any software product that constantly evolves, our
More informationFinancial. AngularJS. AngularJS. Download Full Version :
Financial AngularJS AngularJS Download Full Version : https://killexams.com/pass4sure/exam-detail/angularjs Section 1: Sec One (1 to 50) Details:This section provides a huge collection of Angularjs Interview
More informationBuilding beautiful websites with Bootstrap: A case study. by Michael Kennedy michaelckennedy.net
Building beautiful websites with Bootstrap: A case study by Michael Kennedy DevelopMentor @mkennedy michaelckennedy.net Objectives Learn what Bootstrap has to offer web developers Install and use Bootstrap
More informationTable of Contents EVALUATION COPY
Table of Contents What is Ruby on Rails?... 1-2 Overview of Rails Components... 1-3 Installing Rails... 1-5 A Simple Rails Application... 1-6 Starting the Rails Server... 1-8 Static Pages Within a Rails
More information2017 Progress. All Rights Reserved. The Anatomy Of Responsive ASP.NET Apps WHITEPAPER
The Anatomy Of Responsive ASP.NET Apps WHITEPAPER Contents Overview / 3 The DNA of Responsive Web Design / 4 Selecting a Responsive Framework for Your Next.NET App /14 Perfecting Your App with Advanced
More informationCreating and Publishing Faculty Webpages
Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can
More informationPHP WITH ANGULAR CURRICULUM. What you will Be Able to Achieve During This Course
PHP WITH ANGULAR CURRICULUM What you will Be Able to Achieve During This Course This course will enable you to build real-world, dynamic web sites. If you've built websites using plain HTML, you realize
More informationContents. Managing Places...3. Contents 2
Managing Places Contents 2 Contents Managing Places...3 Creating a Site Structure...3 Managing Spaces...4 Designing Space Hierarchies... 5 Changing the Name of the Root Space...5 Space Creation Options...
More informationManual Html A Href Onclick Submit Button
Manual Html A Href Onclick Submit Button When you submit the form via clicking the radio button, it inserts properly into Doing a manual refresh (F5 or refresh button) will then display the new updated
More informationResponsive SharePoint WSP Edition
Responsive SharePoint WSP Edition Version 1.0 Bootstrap 3 and Foundation 4 for SP 2013 The Bootstrap 3 and Foundation 4 frameworks integrated with Microsoft SharePoint 2013, including several master pages
More information