Giter Club home page Giter Club logo

responsive-website-development-and-design's Introduction

1. Responsive Website Basics: Code with HTML, CSS, and JavaScript

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity.

At the end of the course, you will be able to:

  1. Define the purpose of HTML, CSS and JavaScript
  2. Make a simple web page using HTML
  3. Use CSS to control text styles and layout
  4. Use CSS libraries such as Bootstrap to create responsive layouts
  5. Use JavaScript variables and functions
  6. Manipulate web page content using JavaScript
  7. Respond to user input using JavaScript

2. Responsive Web Design

In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn how to make your web page designs adapt to different screen sizes using responsive grid layouts. You will learn how to add navigation and other design elements, and you will learn how to separate data and display using JavaScript objects and templates.

At the end of the course, you will be able to:

  1. Explain why users need to know where they are, where they can go and what is on a web page
  2. Create wireframe mockups of web pages
  3. Identify the key functional elements of web pages
  4. Use Bootstrap components to realise page designs
  5. Use JavaScript data structures such as arrays and objects to define the data used in a web page
  6. Use the Handlebars template library to convert data to HTML
  7. Add interactivity to templates using JavaScript event listeners

3. Introduction to Meteor.js Development

In this course, you will learn how to create a complete, multi-user web site using the Meteor.js framework and MongoDB. You will implement user authentication, security features, reactive templates and routing using iron router. You will carry out key database operations such as inserting, removing and updating data as well as sorting and filtering. You will see how a complete application can be built, line by line.

At the end of the course, you will be able to:

  1. Install the Meteor.js system then create and deploy web applications
  2. Work with the Meteor.js packaging system
  3. Write Meteor.js templates that can reactively display data
  4. Use insert, remove and update operations on MongoDB
  5. Write MongoDB data filters to search for and sort data 6 .Add user authentication functionality to a website
  6. Control what is displayed on the page using iron:router
  7. Implement basic security features

4. Web Application Development with JavaScript and MongoDB

In this course, you will develop more advanced web application programming skills. You will learn how to control data read and write access using methods, publish and subscribe. You will learn how to access your database and server shells using command line tools. You will use the SimpleSchema system to validate data and generate input forms automatically. You will see a complete collaborative code editing environment, TextCircle, being built from scratch.

At the end of this course, you will be able to:

  • use Meteor methods to control data write access
  • use publish and subscribe to control data read access
  • install and use advanced Meteor packages
  • add user accounts to your applications
  • implement complex MongoDB filters
  • use the MongoDB and meteor server shells
  • define data validations schemas using SimpleSchema
  • generate data input forms automatically using SimpleSchema

5 Responsive Website Tutorial and Examples

In this course, we will show you exciting examples of collaborative, interactive web applications that use various types of media including sound, images and big data.

We will show you how to build sites that provide precisely this functionality, using Meteor. We will also provide fully working example application code that you can use for your own commercial web projects.

The course also provides a range of advice and suggestions about how to develop bespoke web applications which match the requirements of clients, where clients are people who commission the product or people who use the product.

We will take you through the development of the following applications:

  1. A portfolio website with collaborative blogging functionality.
  2. An interactive, realtime, multi user music remixing system.
  3. An interactive, online graffiti wall where users can collaborate to create graphics.
  4. An interactive data visualisation platform for exploring and plotting big data in exciting ways.

At the end of this course, you will be able to:

  • Implement animated data visualisations and graphics using advanced user interface libraries such as vis.js
  • Work with external data sources
  • Create multi user, realtime, collaborative environments
  • Use media APIs such as the Web Audio API

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.