HTML and CSS Web Development Masterclass - Create your First Website

HTML and CSS Web Development Masterclass  is a Introductory course to Web development where i explain to you the main concepts of HTML language and relation with CSS, that leads you to perfect websites ()

 HTML is a power language that will help you develop mobile application,  websites, and work with other languages like JavaScript or PHP that allow you to create dinamic pages.  

Why join this course?

This course will help to learn the basics of HTML, HTML5 and CSS, and is intended for users who have little or no knowledge of HTML and who wish to acquire the basic concepts of this language.

Having a good understanding of HTML is one of the main keys to develop websites content, and in this short course you will learn the basics of the language.

In the second part of this class you will learn how to use the properties of the flexbox model that will allow in a simpler way to create layouts that adapt to any type of device and with the help of css flexbox properties as well as using jquery, I will create some application projects in real cases

After completing this class you are able to create a static content page for in the future deepen your knowledge of HTML as well as learn main concepts of CSS and CSS flexbox properties.

At the end feel free to leave a comment!

Good Luck!! 

What you will learn in this class: 

• Choice of code editor
  
  
• HTML document structure
  
• HTML(5) elements and attributes
  
  
• Paragraph creation and text formatting
  
  
• Insert comments
  
  
• Creation of tables and lists to display data in differents formats
  
  
• Hyperlinks to connect to other pages  and "jump" to internal page contents
  
  
• Creation of Forms
  
  
• Use of images and multimedia a webpage (video and audio)
  
  
• Create a Youtube playlist
  
  
• Understand use of CSS to style pages
  
  
• Basic CSS syntax
  
  
• Use of CSS box model and some CSS properties to style your webpage
  
  
• Use of Classes and Id selectors
  
  
• Understand importance and how box model works
  
  
• Define Block and Inline Elements
  
  
• Position Elements in different points of the page to create a layout structure
  
  
• Width and Height properties
  
  
• Position property
  
  
• Float and Clear properties
  
  
• Relative and absolute Units
  
  
• Flexbox model properties
• Creation of responsive websites
• Use of media queries
• Use of jquery
  
  
• Creation of a web gallery using flexbox
  
  
• Creation of a responsive form with flexbox

• #Project - Web Gallery Creation
  
• #Project - Webpage Form

 

What is the target audience?

• This course is intended for beginners in the world of technology  and web development
  
  

If you want to learn more in the web development area, you can watch my other courses:

• Cool Responsive Web Forms with HTML & CSS3 Flexbox - Guide to Front-End Web Development
  
  
  
  
• Learn HTML & CSS3 Flexbox and Build Websites with Responsive Design in 2018
  
  
  

• HTML & CSS3 Flexbox Web Development Guide - Create Web Galleries with Responsive Web Design
  
  
  

• Create Interactive Websites With HTML, CSS Flexbox & Jquery
  
  
  
  
• Build a Dynamic Navigation Menu with HTML & CSS Flexbox
  
  
  

• Trailer
• Introduction
• Code Editor
• HTML Structure
• Main HTML Elements
• HTML Attributes
• Create Page Title and Heading
• Insert your First Paragraphs
• Text Formatting
• Insert Images
• HTML Lists
• Create Hyperlinks
• Tables
• Insert Comments
• HTML Styles
• HTML Forms I
• HTML Forms II
• Introduction to Multimedia Content
• Insert Videos in a Webpage
• Insert Audio - HTML5
• Object Tag
• Insert Interactive Content using Embed Tag - HTML5
• Insert Youtube Videos
• Create an youtube playlist
• Introduction to CSS
• CSS syntax
• Class and Id Selectors
• How to add CSS Styles
• Box model - Border, Margin and Padding properties
• CSS Font Properties
• Text Properties
• Block & Inline Elements (Div and Span elements)
• Width and Height Properties
• Position Property
• Float and Clear properties
• Relative and Absolute Units
• Project #1 - Create a Web Gallery with HTML & CSS
• Project #2 - Webpage Form
• Introduction to CSS Flexbox
• Flexbox layout model
• Flexbox properties
• Display property
• Flexbox behavior
• Flexbox direction
• Flex wrap
• Flex flow
• Justify content
• Align items
• Align content
• Order
• Flex grow
• Flex shrink
• Flex basis
• Flex
• Align self
• Holy Grail Layout
• Holy Grail Layout - first version
• Holy Grail Layout - second version
• Holy Grail Layout - Header
• Holy Grail Layout - Nav
• Holy Grail Layout - Article
• Holy Grail Layout - Aside
• Holy Grail Layout - Footer
• Advanced Layout - version 1
• Advanced Layout - version 2
• Media Queries
• Media Queries - version 1
• Media Queries - version 2
• Flexbox content for real world
• Web gallery - part 1
• Web gallery - part 2
• Web gallery - part 3
• Responsive form - part 1
• Responsive form - part 2
• Jquery introduction
• Jquery - create a faqs page
• Jquery - create page with tabs
• Congratulations