Library

Course: Responsive Webpage: A Fast Pick-up with HTML-CSS-JavaScript

Responsive Webpage: A Fast Pick-up with HTML-CSS-JavaScript

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
  • Self-Paced
About this Course

This course is the way to go if you have no idea about responsive webpage design but have already known the sufficient knowledge on HTML, CSS and JavaScript - and you want to learn responsive design fast. I will show you what responsive webpage design is, and the fundamental concepts underlying the building of such pages.

Of course we shall see how people are doing this in the contemporary mainstream web design, and also the educated suggestions of a better diversion from the mainstream.

Basic knowledge

The prerequisites for this course are as follows:

  • Beginner's level knowledge on HTML, CSS and JavaScript
  • Skill to use a text editor (recommended to be Notepad++ in Windows)
What you will learn

In this course you will learn:

  • The minimal information to know how to start designing responsive webpage
  • Confidence to start seeking knowledge on your own
  • Understand how most people achieve responsive webpage
  • Know more alternatives to responsive design
Curriculum
Number of Lectures: 24
Total Duration: 03:12:38
Introduction
  • Introduction and Pre-requisites [Part 1]  

    You will be given some introductory definitions and and pre-requisites to excel in this course. In this video, the per-requisite is about the tools that you will be using.

  • Introduction and Pre-requisites [Part 2]  

    This lecture / tutorial talks about the first and foremost requirement to follow this course, i.e. some surface knowledge on HTML.

  • Introduction and Pre-requisites [Part 3]  

    This lecture / tutorial talks about the set of knowledge that should come together with HTML as pre-requisite, i.e. CSS and JavaScript. The students should also have some prior knowledge on jQuery.

Fast Resposive Webpage by Ready-made Free Template
  • Free Responsive Webpage Template 1 [Part 1]  

    This is the first video on editing the first chosen template. You are taught how to choose Google keywords, download it then unpack. You are also given some advice on the best practices with regards to template editing.


    The template used is the one obtained from HTML5UP. If you cannot find it from the portal shown in the video, or if it is not available anymore, you can download it from the downloadable materials section.

  • Free Responsive Webpage Template 1 [Part 2]  

    In this second part of the tutorial on editing template, the students are shown how to edit and/or replace the titles and logo images.

  • Free Responsive Webpage Template 1 [Part 3]  

    In this third part of the tutorial on editing template, the students are shown how to edit and/or replace content images and content text.

  • Free Responsive Webpage Template 1 [Part 4]  

    In the fourth part, the students are taught how to edit or most likely remove certain unwanted elements in the template. This includes some menus, search and login features, analytics, etc.

  • Free Responsive Webpage Template 1 [Part 5]  

    In the fifth video, the students are taught how to add more items of the existing ones in the template.


    This video also shows how to edit the second level page template by doing the similar editing that were done on the landing page.

  • Free Responsive Webpage Template 1 [Part 6]  

    In this sixth video, the tutorial shows how to un-comment and explore the advanced web elements that are already in the HTML5UP template but hidden.

  • Free Responsive Webpage Template 2 [Part 1]  

    This is the seventh and second last video of this section. In this video, the tutorial is on editing the second template downloaded from Zypop. The package was explored and editing was done on the carousel that it provides.


    If you cannot find the package used in this video, or if it is not available anymore, you can download it from downloadable materials section.

  • Free Responsive Webpage Template 2 [Part 2]  

    This last video on editing the template from Zypop, the tutorial goes on by showing the editing to add web elements of table, form elements and buttons.

Fast Resposive Webpage by Free CSS-JavaScript Framework
  • Free Responsive CSS-JavaScript Framework - Part 1  

    First video on tutorial on Bootstrap 3, we start by adding the compulsory viewport meta tag and we explore the effect with and without this tag on a real small smartphone device.

  • Free Responsive CSS-JavaScript Framework - Part 2  

    Second video on tutorial on Bootstrap 3, we now see how to insert Bootstrap 3 code using CDN into our webpage.

  • Free Responsive CSS-JavaScript Framework - Part 3  

    Third video is about the first thing that you need to know about Bootstrap, i.e. the concept of 12-columns grid system. Then we learn how to wrap the web content in a container and row div-s so that the grid system works as expected with the various display sizes supported.

  • Free Responsive CSS-JavaScript Framework - Part 4  

    This fourth video shows the real hands-on tutorial of the concepts learnt in the previous video. It also emphasizes on the concept of logical row in Bootstrap.

  • Free Responsive CSS-JavaScript Framework - Part 5  

    This fifth video continues the tutorial by showing how to use helper classes to offset the elements and also how to conditionally hide or show the elements.

  • Free Responsive CSS-JavaScript Framework - Part 6  

    In this sixth video we move on to adding navigational collapsible menu in our web page. It is quite a simple copy and paste, then followed by deletion of unwanted menu items and addition of items that are need more.

  • Free Responsive CSS-JavaScript Framework - Part 7  

    Next, in the seventh video, we learn how to add the most common form element, i.e. button. The tutorial shows how to make the buttons act responsively to various device sizes and how to modify the framework to add margins between the buttons.

  • Free Responsive CSS-JavaScript Framework - Part 8  

    The last, i.e. the eighth video, we go no and add another common form element, namely the inputs.

Fast Resposive Webpage by Coding
  • Responsive Webpage Coding - Part 1  

    This lecture is the first of five part of this course on coding responsive webpage by your own code. It teaches how to program your own Bootstrap-like grid system. You can decide your own boundary to switch from a device size to a different one. You can modify layout blocks of <div> according to this boundary you defined.


    The key knowledge you need to have and obtained in this lecture is the CSS statement of media query.

  • Responsive Webpage Coding - Part 2  

    This is the second of five videos on coding responsive webpage from scratch. It is an extensive explanation about collapsible table and the starting point to start to code it by being able to read the rows of the source table using jQuery.


    You can download the HTML snippet that is used in this tutorial from the resources uploaded here.

  • Responsive Webpage Coding - Part 3  

    In this third of five videos on coding responsive webpage from scratch, the tutorial shows how to read the first column of the source table and list it as the first level items in the target list.

  • Responsive Webpage Coding - Part 4  

    In this fourth of five videos on coding responsive website from scratch, the tutorial shows,


    1. how to read the first row of the source table, then list the items in it in every first level item of target list, then
    2. attach the data from each corresponding column and row.


    At the end, the tutorial also shows how to test that we are populating the list with correct data from the table.

  • Responsive Webpage Coding - Part 5  

    In this last of five videos on coding responsive webpage from scratch, the tutorial shows how to manipulate the display property in CSS according to device size (using media query) so that only either the table or the list is rendered, not both.


    And since this the last lecture, it also concludes the first release of this course.


    There will be more updates of new topics and materials.

Reviews (0)