â—Ž Complete HTML5 training â—Ž
➲ Section 1 : Introduction HTML5
⁂ HTML5 - 1 Introduction➔ First introductory video where I will show you the usefulness of HTML5, free tools to to be able to design code by carrying out tests in order to become familiar with the tools presented.
➲ Section 2 : Get familiar with HTML5
⁂ HTML5 - 2.1 First steps with HTML➔ In this realization video, we will see together the handling of our text editor and we will start coding by inserting various tags like "title", "input" and even inserting comment.
⁂ HTML5 - 2.2 How to validate your code?➔ In this video, we will know how our code can be in error and the solutions in order to validate our full code.
⁂ HTML5 - 2.3 Rendering text with block elements➔ For block elements, which will allow us to insert text, a paragraph or even titles which can be customized according to its importance.
⁂ HTML5 - 2.4 Specify the semantics of words and phrases➔ We are going to see together that we can highlight our paragraph, like when we edit a text file, we we can insert tags that will have the power to put part of the text in bold, in italics, in smaller, in quotes and many others.
⁂ HTML5 - 2.5 Associate your data from the lists➔ We continue in our editing and in this video we will see how to insert lists, how they are organized but also the different types.
⁂ HTML5 - 2.6 Group items into containers➔ It is possible to group elements of your page, in contents in order to well organize the architecture of your coded. For example, with the "section" or even "aside" tag, you will be able to store the elements of your pages. You also have your page header and your footer. You can also group elements with the "div" tag which will serve as your containers.
➲ Section 3 : Inserting objects and media
⁂ HTML5 - 3.1 Preparing images for the web➔ If you want to insert images, it is important to choose the right format for the correct operation when displaying. It is also possible to verify the deletion of metadata that is not useful using a website that I will indicate to you in this video, so let's go!
⁂ HTML5 - 3.2 Photo and image rendering➔ Now that we have all the right information to display images, we can test the display on our own page. To do so, you can follow the instructions that I offers in this video.
⁂ HTML5 - 3.3 Create an audio and video player➔ Following the insertion of our images, we then see together how to create an audio and video player. To do this you will need to save a file in mp3 format and also mp4, which once inserted, will be formatted in order to obtain the best possible display as well as its proper functioning.
⁂ HTML5 - 3.4 Table and display➔ We will see in this video how to insert a table. In order to ensure its display, it is essential indicate the number of columns and cells in this table. So in this video, I invite you to follow the realization where we will test by filling our cells with data that we want to write inside.
➲ Section 4 : Master the style and positions of objects
⁂ HTML5 - 4.1 How to apply basic styles ?➔ To insert styling, it is strongly recommended to use a CSS type file that will take care of it. However, it is still possible to apply styling directly to our HTML file. To do so, he just insert the "style" tag which will apply the style you want. So we are going to test some styles applicable in this video.
⁂ HTML5 - 4.2 Target HTML tags with selectors➔ To target our HTML tags, we will need to group them. It is with the use of IDs that we can target the tags we want personalized.
⁂ HTML5 - 4.3 How to add margins and borders ?➔ In order to properly structure our layout, we will need to format the content. To do so, we will play with the border spacing, of our margin in which we can set the air spacing.
⁂ HTML5 - 4.4 Text style and colors➔ We will also incorporate styling into our CSS file, regarding the style and colors of the text. In this video I show you the code that defines the style, but you can customize according to your desires.
⁂ HTML5 - 4.5 Layout images and tables➔ The layout of our objects needs to be well oriented. For example, our logo, we want be located in a specific location. To do this, we are going to use "float" to indicate a position. We will also move the images of each article so that they share space with the text.
⁂ HTML5 - 4.6 Layout lists with flexbox➔ In this video we are going to use "flexbox" which was designed as a one-dimensional layout template and as a method for distributing space between objects in an interface as well as aligning them. We let's see together how it can be adapted.
⁂ HTML5 - 4.7 How do I add images or backgrounds ?➔ In this video, we will see how we can insert a background image in our page, or even, insert a background. However, it is important to maintain readability on our page. We will therefore pay attention to our style so as not to have any failures on this subject.
➲ Section 5 : Insertion of audiovisual content
⁂ HTML5 - 5.1 The links➔ In this video, we will see how to add a link. The links are intended to redirect us to another location. This can be a file or even a website for example. We will therefore indicate a path to indicate IDE in order to redirect to the desired page.
⁂ HTML5 - 5.2 What are URLs explained ?➔ URLs, Unique Resources Location, will allow you to find a resource within a network. You have several types of URLs, internal, relative, absolute. I suggest you watch this video to understand how they work.
⁂ HTML5 - 5.3 Advanced link options➔ We have advanced link options, ie additional options with various attributes. We will see in the examples that I propose to you, the list of all these options. Let's go !
⁂ HTML5 - 5.4 How to embed videos and content ?➔ Now we can embed videos and content. To do this, we will first edit time our HTML file, and we will go to "Youtube", where we will share a video. I will show you the steps so to incorporate it on our page.
⁂ HTML5 - 5.5 Personal activity project➔ It's time to come up with a project to do that will be a personal activity. We will therefore create a new project folder in which we will fill in our personal activities and we will apply the style that we saw together during our first steps. So here we go!
⁂ HTML5 - 5.6 Create your personal activity➔Following our first video, we will further modify and customize our project, trying insert more playful and professional content. We will perform a poster as in an application where we're going to play with the locations.
⁂ HTML5 - 5.7 Open messaging and phone calls➔ In the rest of our project, we will see how to open our messaging applications, our phone calls, and our social media apps. Let's go !
➲ Section 6 : Publish a project
⁂ HTML5 - 6.1 Select a provider and a public URL➔ In this video, we will see how to select a provider and a public URL. To do so, we will need a domain or a subdomain. We will also need a host, we will see there are paid ones but also free ones. So here we go !
⁂ HTML5 - 6.2 Publish for free on Firebase➔ Now that we have the principles of publications, we will see how to publish our content for free with Firebase. I therefore suggest that you follow my actions in order to publish instantly.
⁂ HTML5 - 6.3 Distribute QR codes➔ In this video, we will see how to edit QR codes, useful for maps, URLs, and even text. Printable or scannable via a smartphone, the QR code has become more accessible, allowing quick access for redirection to a desired page. We will see together the process.
➲ Section 7 : Content management
⁂ HTML5 - 7.1 How to make your content shareable ?➔ In this video, we'll see how to make our content shareable via Snippets. You can for example, share content from a website. This is called a Snippet, so we will see what methods are used to insert it in our page.
⁂ HTML5 - 7.2 Integrate a site with your Facebook➔ In this video, we are going to integrate Facebook, so content that will be integrable. Using plugin, which we can consult in the specific documentation of Facebook, we will be able to carry out this integration.
⁂ HTML5 - 7.3 Integrate with Twitter➔ This time, we will integrate Twitter into our project. To do this, we will also follow the documentation on this subject, while following the protocol that I propose to you in this video, so here we go!
👍 Good to know
💻 HTML5 was created to meet a need for unification of what can today be used to create websites, namely HTML, style sheets (CSS) for the graphic part, and JavaScript for the interactivity. It must also respond to a need to simplify what may exist today, by minimizing both the use of external plugins (like Flash) and the writing of scripts dedicated to interactivity (replacing them with tags that already do this job). The language also responds to a need to be cross-platform, which makes it easier to bring the world of the Web to mobile platforms, for example.