Website Designing Training

HTML

INTRODUCTION

• Introduction to HTML, CSS, JS and Web Design
• Web editors and IDEs
• Web Design and websites structure
• Client side vs Server side
• Separation of concerns: content vs presentation vs behaviour

HTML (HYPER TEXT MARKUP LANGUAGE)

• HTML5 intro
• HTML page structure
• HTML tags
• HTML attributes and values
• View HTML source code
• Emmet plugin to automate HTML coding

HTML META AND IN-SITE SEO

• What are HTML Meta tags
• Role of HTML in search engine optimisation
• HTML keywords and importance in SEO
• Description meta tag
• Author meta tag
• Keywords meta tag
• Robots meta tag
• Title tag

HTML TEXT

• How to use text on HTML web pages
• HTML comments
• Headings
• Paragraphs
• Div tags
• Span tags
• deprecated presentational tags

WORKING WITH IMAGE TAG

• Img tag
• Adding images
• Alternative text, titles and descriptions for images
• Create image links
• Images formats for web: PNG, JPEG/JPG, SVG etc

HTML HYPERLINKS

• Anchor tag
• Internal links vs External links
• Creating Links to
• Creating a link around an image

HTML LISTS

• What is a list?
• Ordered lists
• Unordered lists
• List items
• Creating navigations with lists of anchors

HTML TABLES

• We do not use tables for websites anymore
• Tables in Email Design
• Table tag
• Table attributes
• Adding rows and columns to tables
• TR, TH, TD tags
• Defining padding and spacing
• Merging rows or columns with colspan and rowspan

HTML MULTIMEDIA INTRO

• Adding youtube videos to web pages
• Adding Google maps to web pages

HTML FORM

• Form tag intro
• Creating forms
• Form get and post method
• Form action
• Creating fieldsets and legends
• Creating HTML Form text boxes
• Creating password boxes
• Using form Labels
• Creating text areas
• Creating radio buttons
• Creating checkboxes
• Creating List menus
• How to create a file upload
• Use of hidden fields
• Creating form submit button
• Form reset button

CSS

CSS (CASCADING STYLE SHEET)

• What is CSS?
• Separating content from presentation
• Role of CSS in web design
• CSS comments
• CSS best practices
• Inline vs Internal vs External CSS
• Link tag
• A
• CSS stylesheets: rulesets, selectors, rules, properties

STYLING TEXT AND INLINE ELEMENTS USING CSS

• Styling inline elements, text, links, images
• Defining text colour
• Text decoration and other text-related properties
• Font size and other font-related properties
• Word-spacing, Letter-spacing, line height and other typographic properties

STYLING BLOCK LEVEL ELEMENTS USING CSS

• Block elements sizing and size units
• Background colours and background images properties
• Margin and Padding properties
• Traditional Box Model vs modern Box Model
• Keeping track of links
• Create website navigation using CSS

LAYOUT TECHNIQUES IN MODERN CSS

• How to use Div
• Fixed vs fluid vs elastic layouts
• Intro to Responsive layouts
• Aligning items horizontally and vertically
• Creating columns
• Flexbox intro
• CSS Grid intro
• CSS position: static, relative, absolute, sticky, fixed
• Using z-index to simulate the third dimension

PUBLISHING/UPLOADING WEBSITES

• Domain Names for websites
• CPanel intro
• Web Servers Introduction
• Uploading and Downloading to and from your website
• Protocols FTP, HTTP

HTML WEB PAGE TROUBLESHOOTING

• Testing your web pages
• Viewing source code from browsers
• Inspecting web page elements
• Markup and CSS Validation tools
• CSS linters

JAVASCRIPT

INTRODUCTION TO JAVASCRIPT

• Intro to JavaScript
• Inspectors, console panel and JavaScript
• Events and Handlers