CS202 : Fundamentals of Front End Development

Course Overview

Course Synopsis

This course starts with describing front end development on web. Build foundations on Html, CSS and JavaScript, and cover advance topics based on current trends, of Html5, CSS3, Responsive Design and some of its frameworks like Bootstrap. Focus is to learn while solving different problems and doing many real life case studies.

Course Learning Outcomes

Learning Outcomes:

  • Enable Course attendant to gain Web Front End Development knowledge and experience with real life case studies.
  • Understanding Web Development process
  • Able to develop Web site front end using HTML/5, CSS/3 and JavaScript.
  • Understanding of Advance topics, and current trends in Web Front end development.


Course Calendar

TopicLectureResourcePage
Topic-001 Introduction to HTML1Handouts
Topic-002 URL-Uniform Resource Locator1Handouts
Topic-003 HTTP Basics1Handouts
Topic-004 Webserver, Services and Agents1Handouts
Topic-005 Domain Hosting, FTP2Handouts
Topic-006 HTML Display2Handouts
Topic-007 HTML Basics2Handouts
Topic-008 HTML Elements and Attributes2Handouts
Topic-009 HTML Elements and Attributes_23Handouts
Topic-010 Heading and Paragraph3Handouts
Topic-011 HTML Styling3Handouts
Topic-012 HTML Quotations3Handouts
Topic-013 HTML Computer Code4Handouts
Topic-014 HTML Comments4Handouts
Topic-015 HTML Links-The Target Attribute4Handouts
Topic-016 HTML Images4Handouts
Topic-017 HTML Table with Border Attributes5Handouts
Topic-018 HTML Table with Caption5Handouts
Topic-019 HTML List5Handouts
Topic-020 HTML (Div) Element5Handouts
Topic-021 HTML Layout6Handouts
Topic-022 HTML Iframe6Handouts
Topic-023 HTML Form6Handouts
Topic-024 HTML Colors6Handouts
Topic-025 HTML Style Elements7Handouts
Topic-026 HTML Entities and Symbol7Handouts
Topic-027 HTML Encoding (Character Sets)7Handouts
Topic-028 HTML URL Encoding7Handouts
Topic-029 HTML and XHTML7Handouts
Topic-030 Introduction to CSS8Handouts
Topic-031 CSS Syntax8Handouts
Topic-032 CSS Selectors8Handouts
Topic-033 CSS Insertion8Handouts
Assignment No. 1
Topic-034 CSS Background9Handouts
Topic-035 CSS Text and Fonts9Handouts
Topic 036 CSS - Text and Fonts9Handouts
Topic-037 CSS Links9Handouts
Topic-038 CSS - Links10Handouts
Topic-039 CSS-Tables10Handouts
Topic-040 CSS Display10Handouts
Topic-041 CSS Border and Outline10Handouts
Topic-042 CSS Margin and Padding10Handouts
Topic-043 CSS - Dimension11Handouts
Topic-044 CSS - Display11Handouts
Topic-045 CSS Positioning & Floats11Handouts
Topic-046 CSS - Positioning & Floats11Handouts
Topic-047 CSS Align12Handouts
Topic-048 CSS Combinators12Handouts
Topic-049 CSS Pseudo-Class12Handouts
Topic-050 CSS - Text Transformation12Handouts
Topic-051 CSS - Text Indentation12Handouts
Topic-052 CSS - Letter spacing13Handouts
Topic-053 CSS - Word-spacing13Handouts
Topic-054 CSS - White Space13Handouts
Topic-055 CSS - Font Families13Handouts
Topic-056 CSS - Font Family13Handouts
Topic-057 CSS - Font Style14Handouts
Topic-058 CSS - Font Size14Handouts
Topic-059 CSS - Set Font Size with pixels14Handouts
Topic-060 CSS - Set Font Size with Em14Handouts
Topic-061 CSS - Pseudo Classes15Handouts
Topic-062 CSS - Styling Links15Handouts
Topic-063 CSS - Link Styles15Handouts
Topic-064 CSS - Lists15Handouts
Topic-065 CSS - List-Style-Type16Handouts
Topic-066 CSS - Image as list item marker16Handouts
Topic-067 CSS - List Style position16Handouts
Topic-068 CSS - List Shorthand16Handouts
Assignment No. 2
Topic-069 Fundamentals of JavaScript17Handouts
Topic-070 Introduction to JavaScript17Handouts
Topic-071 Use of JavaScript17Handouts
Topic-072 JavaScript Output and Tag Placement17Handouts
Topic-073 JavaScript Syntax17Handouts
Topic-074 JavaScript Statements18Handouts
Topic-075 JavaScript Comments18Handouts
Topic-076 JavaScript Variables18Handouts
Topic-077 JavaScript Operators and Keywords18Handouts
Topic-078 JavaScript Data Types18Handouts
Topic-079 JavaScript Functions19Handouts
Topic-080 CSS box model19Handouts
Topic-081 CSS Borders19Handouts
Topic-082 CSS Margins19Handouts
Topic-083 CSS Padding19Handouts
Topic-084 CSS Dimension20Handouts
Topic-085 CSS Display and Visibility20Handouts
Topic-086 CSS Positioning20Handouts
Topic-087 CSS Float20Handouts
Topic-088 CSS Navigation Bar20Handouts
Topic-089 CSS Tables21Handouts
Topic-090 CS202_JavaScript Fundamentals21Handouts
Topic-091 CS202_JavaScript Common Mistakes21Handouts
Topic-092 CS202_JavaScript Common Mistakes21Handouts
Topic-093 CS202_JavaScript Performance21Handouts
Topic-094 CS202_JavaScript Reserve Words22Handouts
Topic-095 CS202_JavaScript Global Functions and Properties22Handouts
Topic-096 CS202_JavaScript Window Object22Handouts
Topic-097 CS202_JavaScript and Forms22Handouts
Topic-098 CS202_JavaScript Case Study22Handouts
Mid Term Exam(Grand Quiz)
Topic-099 CS202_AJAX Introduction23Handouts
Topic-100 CS202_AJAX Sending Request-a23Handouts
Topic-101 CS202_AJAX Sending Request-b23Handouts
Topic-102 CS202_AJAX Receiving Response-a23Handouts
Topic-103 CS202_AJAX Receiving Response-b24Handouts
Topic-104 CS202_AJAX Case Study24Handouts
Topic-105 CS202_JQuery Introduction24Handouts
Topic-106 CS202_JQuery Syntax24Handouts
Topic-107 CS202_JQuery Selectors25Handouts
Topic-108 CS202_JQuery Traversing DOM25Handouts
Topic-109 CS202_JQuery Events-a25Handouts
Topic-110 CS202_JQuery Events-b25Handouts
Topic-111 CS202_JQuery Effects-a26Handouts
Topic-112 CS202_JQuery Effects-b26Handouts
Topic-113 CS202_JQuery Effects-c26Handouts
Topic-114 CS202_JQuery Effects-d26Handouts
Topic-115 CS202_JQuery Animation27Handouts
Topic-116 CS202_XML Element27Handouts
Topic-117 CS202_JQuery Chaining27Handouts
Topic-118 CS202_JQuery HTML27Handouts
Topic-119 CS202_JQuery HTML28Handouts
Topic-120 CS202_JQuery CSS28Handouts
Topic-121 CS202_JQuery CSS28Handouts
Topic-122 CS202_JQuery Dimensions28Handouts
Graded Discussion Board (GDB)
Topic-123 CS202_JQuery Traversing DOM29Handouts
Topic-124 CS202_JQuery Traversing DOM29Handouts
Topic-125 CS202_JQuery Traversing DOM29Handouts
Topic-126 CS202_JQuery AJAX29Handouts
Topic-127 CS202_JQuery AJAX30Handouts
Topic-128 CS202_JQuery noConflict30Handouts
Topic-129 CS202_JQuery CaseStudy30Handouts
Topic-130 CS202_XML Introduction30Handouts
Topic-131 CS202_XML Usage31Handouts
Topic-132 CS202_XML Tree31Handouts
Topic-133 CS202_XML Syntax31Handouts
Topic-134 CS202_HTML5 Canvas Gradients31Handouts
Assignment No. 3
Topic-135 CS202_XML Attributes32Handouts
Topic-136 CS202_XML NameSpaces32Handouts
Topic-137 CS202_XML DTD32Handouts
Topic-138 CS202_XML Schema32Handouts
Topic-139 CS202_XSLT (eXtensible Style sheet Language Transformation)33Handouts
Topic-140 CS202_HTML5 Audio33Handouts
Topic-141 CS202_XPath33Handouts
Topic-142 CS202_XLink33Handouts
Topic-143 CS202_JSON Introduction34Handouts
Topic-144 CS202_JSON Syntax34Handouts
Topic-145 CS202_JSON Case Study34Handouts
Topic-146 CS202_HTML5 Introduction34Handouts
Topic-147 CS202_HTML5 Elements35Handouts
Topic-148 CS202_HTML5 Semantics35Handouts
Topic-149 CS202_HTML5 Semantics35Handouts
Topic-150 CS202_HTML4 to HTML5 Migration35Handouts
Topic-151 CS202_HTML5 Coding Conventions36Handouts
Topic-152 CS202_HTML5 Coding Conventions36Handouts
Topic-153 CS202_HTML5 Canvas36Handouts
Topic-154 CS202_HTML5 Canvas Coordinates36Handouts
Topic-155 CS202_HTML5 Canvas Text37Handouts
Topic-156 CS202_HTML5 Canvas Images37Handouts
Topic-157 CS202_HTML5 SVG37Handouts
Topic-158 CS202_HTML5 Multimedia37Handouts
Quiz No. 1
Topic-159 CS202_HTML5 Video38Handouts
Topic-160 CS202_CSS3 Multi-Column Layout38Handouts
Topic-161 CS202_HTML5 Plug-ins38Handouts
Topic-162 CS202_HTML5 Geo Location38Handouts
Topic-163 CS202_HTML5 Drag/Drop39Handouts
Topic-164 CS202_HTML5 Local Storage39Handouts
Topic-165 CS202_HTML5 App Cache39Handouts
Topic-166 CS202_HTML5 Web Workers39Handouts
Topic-167 CS202_HTML5 SSE40Handouts
Topic-168 CS202_HTML5 Case Study40Handouts
Topic-169 CS202_CSS3 Introduction40Handouts
Topic-170 CS202_CSS3 Round Corners40Handouts
Topic-171 CS202_CSS3 Broader Image41Handouts
Topic-172 CS202_CSS3 Backgrounds41Handouts
Topic-173 CS202_CSS3 Backgrounds41Handouts
Topic-174 CS202_CSS3 Colors41Handouts
Quiz No. 2
Topic-175 CS202_CSS3 Gradients42Handouts
Topic-176 CS202_CSS3 Gradients42Handouts
Topic-177 CS202_CSS3 Shadow Effects42Handouts
Topic-178 CS202_CSS3 Text Effects and Fonts42Handouts
Topic-179 CS202_CSS3 Transforms43Handouts
Topic-180 CS202_CSS3 Transitions43Handouts
Topic-181 CS202_CSS3 Animations43Handouts
Topic-182 CS202_CSS3-Responsive Design Testing43Handouts
Topic-183 CS202_CSS3-Parallax Background Implementation44Handouts
Topic-184 CS202_Responsive Web Design (RWD) Introduction44Handouts
Topic-185 CS202_Responsive Web Design (RWD) Review Report44Handouts
Topic-186 CS202_Responsive Web Design (RWD) Grid-View44Handouts
Topic-187 CS202_Responsive Web Design (RWD) Media Queries45Handouts
Topic-188 CS202_Responsive Web Design (RWD) Images45Handouts
Topic-189 CS202_Responsive Web Design (RWD) Videos45Handouts
Final Term Exam
 
 
Back to Top