Web Designing training in Vizag

About this Specialization :

In this track, you’ll learn how to design and build beautiful websites by learning the basic principles of design like branding, color theory, and typography which are all instrumental in the design process of a website. You’ll also learn HTML and CSS, which are the common code languages that all modern websites are built on. These are useful skills to acquire as they are needed by nearly every single business in the world to communicate to customers. By the end of this track, you’ll have all the skills required to design and build your own websites or even start a career with one of the thousands of companies that have a website.

An entry-level salary for the technologies covered in this track is about $42,000 / yr on average.

Some companies that use these technologies regularly include: Google, Facebook, Yahoo, eBay, Amazon, and JNNC Technologies.

Introduction to HTML and CSS

About this Course

Get started creating web pages with HTML and CSS, the basic building blocks of web development. HTML, or Hyper Text Markup Language, is a standard set of tags you will use to tell the web browser how the content of your web pages and applications are structured. Use CSS, or Cascading Style Sheets, to select HTML tags and tell the browser what your content should look like. Whether you are coding for fun or planning to start a career in web development, learning HTML and CSS is a great place to start.

What you’ll learn

  • Define HTML and CSS
  • Add and change HTML tags
  • Modify CSS attributes
  • Learn the structural foundation of web pages and applications

Getting Familiar with HTML and CSS

Learn the basic structure of a web page, how HTML and CSS are used to change the structure and appearance of web pages, and how HTML and CSS fit into the larger world of web development.

  • Welcome to HTML and CSS

  • Building Web Pages with HTML and CSS

  • HTML, CSS, and Web Development

  • Review: Getting Familiar with HTML and CSS

  • Test: Changing the Look of a Web Page

HTML Basics

About this Course

Learn HTML (Hyper Text Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you’ll need to know HTML.

What you’ll learn

  • Semantic markup
  • Formatting page content
  • Understanding file paths
  • Displaying images
  • Inline vs. block level elements

Getting Started with HTML

HTML is a markup language the browser uses to present content to users, like text, links, images and more. It’s the basic component from which all websites and applications on the web are built.

  • What is HTML?

  • Global Structure of an HTML Document

  • Intro to HTML Review

  • Headings and Paragraphs

  • Headings and Paragraphs Challenge

  • Creating Lists

  • Creating Links

  • Lists and Links Challenge

    Web Design Process

About this Course

Going from a blank screen to a finished website can be daunting. In this course, you’ll learn about the major steps involved in designing websites. We’ll learn how to gather information, explore potential concepts, and iterate on a design. By the end, you’ll have the foundation you need to continue your design journey.

What you’ll learn

  • Design discovery
  • Design exploration

Discovery

The early phases of design have many names, but sometimes people call this first chunk the “Discovery” phase because we’re trying to find as much information as we can before we start designing something that doesn’t actually fit the right needs.

 4 steps

  • Setting Goals

  • Understanding the Audience

  • Gathering Content

  • Extra Credit

Working on your own web project? Try interviewing other people in your organization, or people that may potentially visit your website. Ask them questions about their needs and create a summary of your findings. It might seem a bit strange the first time you do it, but you’ll be glad later on when you have notes to help guide your design decisions.

CSS Basics

About this Course

CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of web pages. Whereas HTML is what forms the structure of a web page, CSS is what we use to style the HTML with colors, backgrounds, font sizes, layout, and more. As you’ll soon learn, CSS is one of the core technologies for designing and building websites.

What you’ll learn

  • Basic Selectors
  • Common Values and Units
  • CSS Layout
  • New CSS Features

Getting Started with CSS

Get started with one of the core technologies for designing and building websites and applications. In this stage, you’ll learn about the evolution of CSS, helpful resources, and how to add CSS to a page.

 8 steps

  • CSS Basics Overview

  • Introduction to CSS

  • CSS Resources

  • Intro to CSS Review

  • Inline and Internal Styles

  • External Style Sheets

  • Importing Style Sheets with @import

  • Adding CSS Review

     

Basic Selectors

Selectors are one of the most important and powerful parts of CSS. In this stage, you’ll learn the different ways we can target HTML elements with basic selectors.

CSS Selectors

About this Course

In this short course, we’re going to go beyond the basic selector concepts covered in CSS Basics. Besides the common ways to select elements with type, ID and class selectors, we’re able to target elements based on their attributes, position in the HTML document, even their relation to other elements.

By the end of this course, you’ll have gained a better understanding of the power and flexibility behind CSS selectors. You’ll have a new set of valuable tools in your CSS toolkit to use on your next project.

What you’ll learn

  • Attribute selectors
  • Advanced pseudo-classes
  • Pseudo-elements

Selectors – Beyond the Basics

In this stage, we’ll expand on basic concepts by learning all about attribute selectors, DRY CSS, and combinators.

 8 steps

  • Course Overview

  • Attribute Selectors

  • Styling Form Buttons and Links with Attribute Selectors

  • Attribute Selectors Challenge

  • DRY CSS

  • Child, Adjacent, and General Sibling Combinators

  • Combinators Challenge

    2 objectives

  • Attribute Selectors and Combinators Review

    5 questions

Going Further with Attribute Selectors and Pseudo-Classes

Learn how to select elements without having to write extra classes or IDs in the markup. Target elements based on specific pieces of HTML attributes, user interaction states, or their position on the page.

 8 steps

Advanced Selectors

In this stage, we’ll uncover the power behind many of the more advanced CSS selectors. Learn how to write selectors with simple expressions to target a combination of elements. We’ll also use special selectors called pseudo-elements to insert virtual elements and content into our page.

HTML Forms

About this Course

The web is a two-way communication medium. There’s lots of HTML elements for displaying data and producing output, and conversely, there’s also lots of HTML elements for accepting input. Accepting input from the user means creating web forms. In this course, we’ll learn about all the most important form elements that web professionals use on a daily basis.

What you’ll learn

  • Forms
  • Input elements
  • Select menus
  • Radio buttons
  • Checkboxes

Form Basics

To learn about forms, we’re going to create a simple sign up form for an imaginary web app. Our form won’t actually submit anywhere, since that requires additional server-side code. However, we will learn about all the most important HTML form elements.

 9 steps

  • Overview of Forms

     

  • The Form Element

     

  • Create a Form Element

    3 objectives

  • The Input Element

     

  • Create a Text Input

    4 objectives

  • The Textarea Element

  • Create a Textarea

    5 objectives

  • The Button Element

     

  • Create a Submit Button

    5 objectives

  • Extra Credit

    Did you know that the input element has over 30 attributes? The type attribute alone has over 20 values. Try reading the documentation for the <input> element and test some of the other input types.

Organizing Forms

A form can be created with just a form element and some controls, but it’s helpful to the user if the form is organized with labels and fieldset elements.

 4 steps

Choosing Options

Sometimes when creating a form, it’s better for the user to choose from predefined options rather than typing in text. This can be accomplished with select menus, radio buttons, and checkboxes.

 8 steps

About this Course

The web is filled with text and images, but it’s also filled with information like sports scores throughout the years, list of employee names and email addresses, or nutrition facts for your favorite foods. HTML tables enable the display information in what is commonly known as tabular data, which is information that’s stored in a table-like structure of columns and rows. In general, anything that you might put into a spreadsheet could go in a table. There are many use cases for a table, so it’s important to add them to your skills because it’s a very common method for displaying information.

What you’ll learn

  • Table elements
  • Organizing tables

Table Basics

Tables are a little bit more involved than other HTML elements like paragraphs and images, because in order to construct a table, you need to use elements to represent the individual table cells, the rows that contain those cells, as well as the table itself.

 5 steps

  • Overview of Tables

     

  • Create a Basic Table

     

  • Create a Table

    4 objectives

  • The Table Header Cell Element

     

  • Add Table Cell Headers

     

  • Extra Credit

    Try creating a table on your own. You can create a table of financial data, nutrition facts, sports scores, or anything else you can imagine.

Structuring Tables

Extra structure can be helpful for automated pieces of software like search engines or screen readers, but it’s also helpful for designers because it adds some additional elements that can be targeted with CSS.

 8 steps

About this Course

As web features barrel ahead, web typography advances with it. We now have more control over type than ever before. But, as the often-quoted line from Spider man goes, “With great power, comes great responsibility.” Well-built websites can be plagued by bad typography, creating an unpleasant experience to the user. In this course, we’ll cover all you need to know to begin building websites with good typography, giving users a great experience.

What you’ll learn

  • What is Typography
  • Choosing and Using Web fonts
  • Laying out Type for the Web
  • Responsive Typography

Introduction to Typography

Before diving into utilizing or laying out type, we’ll need some basic knowledge about typography. This stage will give us the foundation to build upon as we learn what is typography, the terms used to describe it, and more.

 

  • What is Typography?

  • Review: What is Typography?

  • Terminology

  • Review: Terminology

  • Different Types of Type

  • Review: Different Types of Type

  • Print vs. The Web

  • Review: Print vs. The Web

How to Choose and Use Web fonts

Now that we have some general knowledge about typography, let’s look at what to consider when choosing a typeface and the different ways you can implement your web font choice.

Basic Web Typography

Now that we have some background on typography and how to call custom typefaces to our site, we’ll familiarize ourselves with some of the basics of web typography.

Laying Out Type for the Web

With the basics of web typography in our tool belt, we can now explore more advanced techniques like creating typographic hierarchy and responsive typography.

 9 steps

Final Project: Create a Typographic Site

To conclude our course on Web Typography, we’ll put what we learned to the test as we build out a website implementing the ideas learned throughout the stages. We’ll use the HTML provided from CSS Zen Garden and build out our own typographic design.

 

About this Course

Learn to work with common layout and positioning methods used in web design. In this course, you’ll get hands-on practice with basic CSS layout techniques like display modes and floats.

You’ll use your new CSS layout skills to build the layout for a simple web page. Then learn to enhance the layout using relative, absolute and fixed positioning.

Getting Started with CSS Layout

This stage covers layout tips and techniques used by web designers. You’ll learn about CSS resets, layout wrappers, creating a sticky footer, and more.

 

  • What to Expect

     

  • CSS Reset with Normalize

     

  • Creating a Layout Wrapper

  • Why Vertical Margins Collapse

  • Centering Page Content and Creating a Full-width Header

  • Layout Wrapper Challenge

  • Using a Mobile First Approach

  • Creating a Sticky Footer

  • Getting Started with CSS Layout Review

     

Controlling Layout with CSS Display Modes

Learn to control elements in your layout using common CSS display modes like block, inline, and inline-block. Understanding the differences between these display settings will help take your CSS layouts to the next level.

Page Layout with the Float Property

Learn how to use the float property for positioning and layout. You’ll also learn about the default browser quirks you’ll face when using floats and how to prevent them.

 

CSS Layout Project

Now it’s time to challenge your new layout skills and put them to use by completing a CSS layout project.

 

Positioning Page Content

Now that you know the basics of CSS layout, it’s time to learn another important CSS layout technique. In this stage, you’ll learn to position elements anywhere on the page with relative, absolute, and fixed positioning.