Sufal Kumar

Sufal Kumar Mondal Logo

Web Design and WordPress Development

WHAT YOU’LL LEARN IN THIS COURSE

This course explains how to create web pages from scratch using different techniques, such as HTML5, CSS3, basic JavaScript using professional tools and workflow, as well as following high coding standards. After completing our web design course you would be able to create HTML websites yourself.

This PHP course explains how to use PHP and MySQL to create dynamic websites. After completing this training course you would be able to use PHP and MySQL on your website projects. This course covers a range of topics such as building an ecommerce shop, creating a content management system (CMS), developing contact us forms, developing web forms and handling form data using PHP and SQL and lots more.

This course concentrates on how to build your website using WordPress without any programming or design experience. On completion of this WordPress course you will be able to: Download and install WordPress Configure templates and install new templates Build a website, blog or online shop Use plug-ins and widgets Manage users and groups Administer WordPress
The complete course is hands-on based. A practical web design project at the end of the course will ensure that you go through website creation process by planning, creating structure, coding, using different web design software, buying you website a domain name, hosting and uploading website to a live server. This short HTML and CSS course is hands-on, instructor-led and classroom based. This training can be taken as a part-time evening course or even on the weekends.

Few practical PHP and MySQL based projects at the end of the course will ensure that you can apply PHP on your web projects. This short PHP course is hands-on, instructor-led and classroom based. This training can be taken as a part-time evening course or even on the weekends. A list of all upcoming public PHP training.

 

Web Design Course Contents

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

Projects in Web Design Course

Project1: Simple Brochure website

Using techniques studied during HTML and CSS intro, we will create a simple brochure website with multiple pages. The project will showcase step by step the creation of webpages from scratch, following good practices and Web Standards as well as demonstrating styling and layout techniques. Among other topics, we will focus on creating sticky navigations, creating columns with Flexbox/CSS Grids related properties and how to plan and create a simple gallery.

Project2: CSS driven gallery

Stretching the boundaries of CSS, we will create an image gallery with CSS only:  disjointed rollover, css positioning, background techniques.

Project3: Personal project

Students will be given time to plan and work on their class project, while the trainer will guide and mentor them to make sure they follow best practices highlighted during the course. At the end of day 4, students will learn how to publish their projects via FTP software like FileZilla.

 

WordPress Course Outline

WordPress course overview

This course concentrates on how to build your website using WordPress without any programming or design experience.

On completion of this WordPress course you will be able to:

  • Download and install WordPress
  • Configure templates and install new templates
  • Build a website, blog, or online shop
  • Use plug-ins and widgets
  • Manage users and groups
  • Administer WordPress

 

Who is WordPress training for?

This training is for you if you are interested in creating your own website using WordPress or planning to get a skill to create a WordPress website for others. This course also helps business owners to get more control and insight into their WordPress websites. This course is designed for complete beginners.

 

Prerequisites for WordPress course

  • You should be able to use a computer and the internet.
  • It is not necessary to have knowledge of any programming language before you start this WordPress course but If you have some knowledge of HTML then it will make learning this course even easier. Training Dragon provides HTML course,

 

What will I get?

  • Training from professional WordPress web designers:

Training Dragon consultants have been implementing professional WordPress solutions across a range of websites for many years. Those consultants write and teach our WordPress training courses, so their experience directly informs course content.

  • Goal-oriented approach:

This WordPress course is designed to give you a kick start in building a WordPress website. If you have a project or an idea that you wanted to turn into the website, then present that idea during the course and our trainers will help you to work on your own website.

  • Course Material:

WordPress electronic notes are included in this course.

  • Course Completion Certificate:

After completing this training your will receive a WordPress course completion certificate.

  • Support and Careers Advice:

After the course, if you have any problems or questions regarding WordPress do not hesitate to contact us. Training Dragon’s trainers are expert in their fields and if you need any help with you career choice, please speak to one of our trainers.

 

WordPress Course Contents

Introduction

  • What is WordPress
  • Role of HTML

WordPress Installation

  • Downloading WordPress
  • How to upload your site to a hosting server?
  • Finding a web host for your site
  • Reserve a domain name (website name)
  • Installing WordPress on your Web Space

WordPress Themes

  • Managing WordPress themes
  • Free vs premium WordPress themes
  • Editing themes CSS and creating Child Themes

Configuring WordPress Setup Options

  • General Settings
  • Privacy settings
  • Reading settings
  • Writing Settings
  • Discussion Settings
  • Permalink settings
  • WordPress for a website or a Blog

WordPress Plugins

  • What is WordPress Plug-in?
  • Where to find WordPress Plug-ins
  • Downloading and installing plug-ins
  • Activating Plug-ins

Adding Content in WordPress

  • Creating Content: Posts vs. Pages
  • Writing and managing Posts
  • Writing and managing Pages
  • Managing Links
  • Using Categories
  • Using Tags
  • Managing User Comments

Managing Media in WordPress

  • Uploading Images
  • Image Formatting
  • Managing the Media Library
  • Adding Video to your website
  • Adding Audio

Using WordPress for CMS

  • Setting the homepage
  • Hiding pages from the navigation
  • Making WordPress search engine friendly
  • Hiding the login for clients
  • Changing the WordPress logos
  • Installing horizontal navigation
  • Using Dropdown navigation

WordPress Administration

  • Managing WordPress users
  • Creating multiple users
  • WordPress User Roles
  • Managing files

SEO for your WordPress website

  • What is Search Engine Optimization (SEO)
  • On-page SEO
  • Off-page SEO
  • Tools for SEO
  • H1 and other headings
  • Titles and Meta tags
  • SEO friendly URL
  • Images optimization
  • XML Sitemap
  • Sitemap submission
  • Role of Blogs in SEO
  • Search engine webmaster tools
  • Integrating Google Analytics on your WordPress site

Social Media for WordPress

  • Role of Social Media on WordPress website
  • Adding Facebook and Twitter

Creating E-commerce websites on WordPress

  • Installing and managing Woo Commerce plugin
  • Installing and managing Woo Commerce themes
  • Using a theme builder to modify your Woo Commerce Theme

Taking care of security for WordPress

  • Security and common basic attacks
  • Protecting your WordPress website
  • Security-related plugins, best practices, and online services
  • Checking your WordPress website performance

 

Projects in WordPress Course

Project 1: Create a personal or business website using WordPress

Using the skills obtained from our WordPress course, we will build a complete personal or business/e-commerce website. This project involves many stages from planning, teamwork, installation, plugins management, testing, and launching your WordPress website.

 

Project 2: Create a Professional Ecommerce business website using WordPress

Using the skills obtained from our WordPress Woo-commerce products we will build a complete professional or business/e-commerce website. This project involves many stages from planning, teamwork, installation, plugins management, testing, and launching your WordPress website.

Leave a Comment

Your email address will not be published. Required fields are marked *