This course covers all basic knowledge needed for front-end web development. The course designed based on the assumption that students want to work in the software industry as a web front-end developer.

Course Calendar & Materials

All available resources for this course will be added to the following table.

1February 21, 2019Story of the Web and Internet Size, Application Architectures, URL Anatomy, Request & Response Structure, HTTP Status Codes, Web Apps and Why use them, HTML and CSS and JavaScript responsibilities, Server Side responsibilities, HTML fundamentals, Hypertext and Markup Definition, HTML Elements, WYSIWYG Editors, Opening and Closing Tags in HTML, Anatomy of an HTML element, Setup the development environment with WebStorm, Some Basic HTML Tags (!DOCTYPE html head body title h1 h2 h3 h4 h5 h6 p)
2February 28, 2019Image Formats, Lossy vs. Lossless, Indexed vs. Direct, Transparency, Index Transparency, Alpha Transparency, BMP vs. GIF vs. JPEG vs. PNG-8 vs. PNG-24, Why we hate IE, Web Forms, Forms Elements, Meaningless HTML Elements, Inline and Block Elements, New HTML5 Tags, Common Attributes in HTML (id class dir lang style title), Comments in HTML, Some useful characters (  LRM RLM), meta tag names (keywords, description, revised, author), using meta tag http-equiv attribute for redirects, Other HTML tags and their corresponding attributes (br hr pre em strong blockquote q code address img table tr td caption ul li ol a div span form input textarea select option), Meaningless and deprecated HTML Tags (center, b, i, u)
3March 7, 2019What is CSS, Applying CSS to HTML Files (inline internal external), CSS Syntax, Lengths in CSS (cm in mm pt % em px), Colors, Fonts, CSS Selectors, CSS Box Model, Selectors Specificity, CSS Comments, CSS properties (background font color direction letter-spacing word-spacing text-indent text-align text-decoration text-transform text-shadow border border-collapse border padding margin), Pseudo-classes (link visited hover active), CSS Dimentions (height width max-height line-height max-height min-height max-width min-width), CSS Scrollbars (visible hidden scroll), CSS Animations & Easing Functions
4March 14, 2019CSS Visibility, CSS Rounded Corners (border-radius), CSS Positioning (relative absolute fixed), CSS Layers (z-index), CSS Pseudo Elements (first-line first-letter before after), CSS @ Rules (@import @charset @font-face !important), Layouts (HTML tables, CSS float property, CSS flexbox, CSS framework, CSS grid) & Methods in Responsive Web Design Principles, CSS Flexible Grid and Media queries, Live Coding to build an HTML5 and CSS3 website with a responsive layout
5April 25, 2019Font-Awesome, Content Delivery Network (CDN), More Practices and Live Coding with HTML5 and CSS3
6May 2, 2019What is JavaScript, JavaScript Syntax, JS Values, JS Types, JS Operators, Infinity & NaN, Automatic Type Conversion in JS, JS Equality, JS Short-circuiting, JS Local & Global Variables, JS Program Structure, Comments in JS, Functions in JS, Scopes & Nested Scopes in JS, JS Closure, JS Arrays, Object-Oriented Programming with JS, The Class & Objects, Naming Conventions in JS, JS WATs
7May 9, 2019JavaScript & The Browser, Document Object Model, Finding Elements with JS, Getting Information with JS, Updating Elements with JS, Creating Elements with JS, Navigating DOM Tree with JS, Changing Style with JS, JS Events, Adding & Remove JS Events, Event Objects, Event Propagation in JS, Default Actions in JS, Setting Timers with JS, Script Execution Timeline in JS, Browser Object Model, jQuery Library, AJAX, How Single-Page Applications Works, More Simple Practices and Live Coding with JS
8May 16, 2019A brief overview of UI Design Patterns, A brief overview of Semantic-UI & jQuery UI & Bootstrap & Zurb Foundation & Materialize CSS & Material UI & Pure CSS & Skeleton, Responsive Web Layouts with Semantic-UI Grid System, GIT Version Control System, Firefox DevTools, Preprocessors (SASS)