Web Design with HTML5 and CSS3

Uplatz provides this comprehensive course on HTML5 and CSS3. It is a self-paced course consisting of video lectures. You will be awarded Course Completion Certificate at the end of the course.

HTML is a markup language that forms a base for any website on the Internet.

HTML5 is the latest version of HTML, finalized in 2014.

HTML 1 was created by a CERN scientist Tim Berners-Lee. His initial goal was an Internet-based hypertext system that allows sharing and using documents in different computers. Introduced in 1991, HTML 1 only had 18 tags, most of them based on the Standard Generalized Markup Language (SGML). HTML 2 was presented in 1995 and had a few more features.

The draft of HTML 3 was abandoned due to slow implementation of the newly created tags. Therefore, the World Wide Web Consortium set out to standardize HTML. In 1997, HTML 3.2 was released which became a standard at the time.

HTML 4 was a large step, as it separated styling from coding, leaving the former to CSS. A revised version called HTML 4.01 came out in 1999, correcting minor mistakes found in HTML 4.0 and introducing a few handy features.

HTML 5 is the HTML as we know it today.

To create polished and well-functioning websites, you will need CSS and JavaScript. However, to make them work as intended, you need to first understand what is HTML. Just like a house has a foundation, a web page has its base in HTML.

HTML5 Benefits

• Addressing The Flash Problem

• Richer Websites

• Better Semantic Markup

• HTML5 is highly flexible and supported on all browsers

• User friendly and an open technology.

• Better performance

Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. It allows you to create great-looking web pages.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

In simple words, CSS is the technology that allows us to create beautiful, maintainable and flexible designs. It controls formatting, presentation and the overall layout of websites. A main reason we use CSS isn't only to create flexible, maintainable website designs, but also to keep content separate from presentation, which is a best practice. It's also much easier for human eyes to read what's happening in the HTML if there aren't styles thrown in too.

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2. 1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

Benefits of CSS

• CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.

• Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.

• Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

• Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.

• Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.

• Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.

Certificate of completion

Digital certificate - Included

Reed courses certificate of completion

Digital certificate - Included

• HTML5 and CSS3 - all lectures 11:04:11

  • 1: Overview of HTML and HTML5 Preview 49:14
  • 2: Key concepts of HTML5 46:20
  • 3: Working with HTML and CSS 39:50
  • 4: Elements and Forms in HTML5 46:44
  • 5: Navigation Bars and Types of Elements in HTML5 45:05
  • 6: Iframes, Content Languages, SVG, Canvas, Marking-up Quotes & Code & Meta Info 38:32
  • 7: Tabindex, Global & Event Attributes, Cache Memory, Character Entities, ARIA 35:22
  • 8: HTML Symbols - WebWorkers and WebStorage - ARIA - Web Design and Media Query 38:40
  • 9: Structure and Formatting of CSS Rule and How to Change CSS with JavaScript 49:31
  • 10: Changing Background in HTML5 34:47
  • 11: Box Modeling in CSS 37:15
  • 12: How to work with Margin - Padding - Border and Outlines in HTML and CSS 28:16
  • 13: Designing in CSS3 30:14
  • 14: Cascading and Positioning in CSS3 38:14
  • 15: Transition - Transform - Animation in HTML5 and CSS3 36:05
  • 16: Drawing and Styling in CSS3 36:13
  • 17: Interview Questions on HTML5 and CSS3 33:49

HTML5

Introduction

• History of HTML

• What you need to do to get going and make your first HTML page

• What are HTML Tags and Attributes?

• HTML Tag vs. Element

• HTML Attributes

• How to differentiate HTML Document Versions

HTML - Basic Formatting Tag

• HTML Basic Tags

• HTML Formatting Tags

• HTML Color Coding

HTML - Grouping Using Div Span

• Div and Span Tags for Grouping

HTML - Lists

• Unordered Lists

• Ordered Lists

• Definition list

HTML - Images

• Creating an image

• Choosing alt text

• Responsive image using the srcset attribute

• Responsive image using picture element

HTML - Hyperlink & Anchors

• Link to another site

• Link to an anchor link to a page on the same site Link that dials a number

• Open link in new tab/window

• Link that runs JavaScript Link that runs email client

HTML - Tables

• Simple Table

• Spanning columns or rows

• Column Groups

• Table with thead, tbody, tfoot

• Heading scope

HTML - iframe

• Attributes Using

• iframe as the Target

HTML - Forms

• Submitting

• Target attribute in form tag

• Uploading Files

• Grouping a few input ?elds

HTML - Headers

• Title

• Base

• Link

• Styles

• Script

HTML - Miscellaneous

• Tags, xhtml and deprecated tags

• HTML Meta Tag

• XHTML

• HTML Deprecated Tags & Attributes

CSS3

CSS Introduction

• CSS Syntax

• CSS Id & Class

• CSS Styling

• Styling Backgrounds

• Styling Text

• Styling Fonts

• Styling Links

• Styling Lists

• Styling Tables

• CSS Box Model

• CSS Border

• CSS Outline

• CSS Margin

• CSS Padding

• CSS Advanced

• CSS Grouping/Nesting

• CSS Dimension

• CSS Display

• CSS Positioning

• CSS Floating

• CSS Align

• CSS Navigation Bar

• CSS Image Gallery

• CSS Image Opacity

• CSS Image Sprites

• CSS Media Types

Selectors and Pseudo Classes

• Attribute Selectors

• The Target Pseudo-Class

• UI Element States Pseudo-Classes

• Negation Pseudo-Class

• Structural Pseudo-Classes

Practical Demo and FAQ

Interview Questions and Answers

Everyone

Passion to learn and succeed!

• Front End Developer - JavaScript /HTML/CSS/Node/React
• Full Stack Web Developer
• Web Developer - HTML5, CSS3
• Technical Architect - HTML
• Web Designer
• Mobile App Designer
• HTML & CSS Developer
• SEO Specialist
• Web UI Developer - JavaScript, HTML5, CSS3, Angular
• Web Analytics Developer
• Application Developer
• Software Developer
• Test Analyst - HTML, CSS
• Software Support
• Web Administrator / Webmaster

Currently there are no Q&As for this course. Be the first to ask a question.