Course Brief

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

Course Description

The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.

Course Outlines:

HTML:

• Web Development, Website Vs Web Application, Difference b/w Static n Dynamic
• Web Browsers Installation, HTML Introduction, HTML vs HTML 5
• Meta Tags, HTML Structure, Basics Tags of HTML [p, br, hr, headings, u, i, strong, ins, em, mark, sup, sub, q and del etc.]
• Images, How to add n give Link [anchor tags with its attributes]
• Tables
• Listing [ul, ol n dl], Iframe
• Div, Span tag and its uses
• Form
• Audio n Video [by 4 different methods], How to embed video from YouTube
• Block quote and website copyright issues solutions
• HTML 5 (new) Semantic Elements introduction [header, nav, section, aside, section, article, main, details, summery, time and footer etc.]

CSS:

• CSS Introduction, History, CSS Types
• Describes the css types and how we uses?, Which is best n when which should be uses? How to uses these types?
• What is meant by Tag selector and how we use?
• How to set an image into CSS? When and where we use Background-Repeat property?
• Mentioned the most common Text Properties? Mentioned the few Font Properties? How to comments in HTML and in CSS? Font Properties
• If we repeat same css properties than what will be happened n which one be used? Why we uses List Style and mention types
• Overflow: hidden etc, Div.: Margin, Padding, Border, Height n Width
• CSS Positions introduction: Static, Sticky, Fixed, absolute n Relative
• Top, Bottom, Left n Right and z-index Inline and Block Level Elements
• Display Properties, ID n Class
• Color Methods, Visibility: hidden; Overflow: scroll; Opacity
• Combinatory selectors: space, direct child and Pseudo Image gallery with text
• Float: left; Hover effects List-style and text-decoration
• CSS Positions in details with examples Static Relative Absolute Fixed Sticky
• Box-shadow Text-shadow Box-sizing Css Gradients
• CSS Animation Transition (Cubic Bezier) Transform: rotate, skew, scale, translate etc. Web kit Transform n Origin Key Frames
• %, px, em, rem etc Border vs Outline (None) Create a button through anchor tag Learned to add google font Learned to add font-awesome Letter, Word spacing Parallax Effect
• Nth Child 2D n 3D Effects Before After
• Hover Effects Animated Buttons
• Text Movement Design Patterns
• Loaders Custom Scroll
• Nav >> Dropdown Hover >> Icon Base
• Model n Notification
• Images Effects Sticky Note Gallery
• Book Flip Gallery Polaroid Image Gallery
• Sprite Image Swing Image
• Animated Tabs