Become the Perfect Front End Developer with HTML5/CSS3/JS

Learn how to build responsive websites in HTML and CSS and Wordpress themes using HTML5, CSS3, JS and Boostrap
3.5 (14 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,055 students enrolled
Instructed by Daniele Protti IT & Software / Other
$19
$100
81% off
Take This Course
  • Lectures 215
  • Length 16.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

The aim of this course is to give you all the fundamental knowledge to become a front end developer.
With front end development I mean the development of web pages. This is done with programs e.g. HTML, CSS and Javascript.
You will get familiar with the definitions and properties define in HTML and in particular those relative to the latest HTML5 version.
You will know how to embed audios, videos, SVG, Flash and PDF files into your HTML pages.
I will show the main CSS properties and functions, focusing also on the latest CSS3 version.
You will be then able to set shadows and backgrounds with gradients and even do animations in CSS.
You will get acquainted with Javascript and create HTML forms with Javascript validation scripts.
I will show you how to create responsive web design so that your web pages will look good also on devices e.g. tables, iPads and smartphones.
We will do exercises using the Bootstrap framework to create responsive web pages fast.
At the end you will be able to create also Wordpress customized themes.
During the course we will go through the W3C recommendations and create valid XHTML pages.
I am sure that at the end you will be able to develop your own web sites.

What are the requirements?

  • basic knowledge of Microsoft Windows or iOS for MAC

What am I going to get from this course?

  • develop HTML documents
  • implement HTML5 feature in front end development
  • include media in HTML pages
  • Use CSS to set the style of HTML elements in HTML files
  • Use CSS3 to format the background of HTML elements
  • Use CSS3 to do animations in CSS
  • Develop responsive web pages
  • Develop web pages with Javascript code
  • Generate optin forms in web pages
  • Use the Bootstrap framework to create responsive web pages fast
  • Develop Wordpress themes
  • Debug web pages (including HTML, CSS and Javascript)
  • Upload scripts and their folder structure to a server
  • Customize HTML pages with CSS
  • Develop a full web site in HTML5, CSS3 and Javascript
  • Include special fonts and icons in web pages
  • Perform @media queries in CSS stylesheets

What is the target audience?

  • who has basic knowledge of the Inernet
  • who knows how to use a text editor
  • who has basic knowledge of Microsoft Windows or iOS for MAC

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
About the author
Preview
01:44
Introduction
04:07
01:45

In this lecture I will explain you how each lecture is structured and basically:

  • how to go back to the course dashboard
  • how to go to the next and previous lectures
  • how to access the resources
  • which kind of resources (external links and downloadable files)
  • how to start a discussion
  • how to take and keep stored your notes
01:19

In each lecture I attach one or more resources.

They may be external links, which contain useful information related to the lecture.

They can also be files that I used in the presentation.

Usually those are html, css and js files.

Once you download them you can see exactly how they are working.

You need to bear in mind that you need to rebuild the folder structure and put the files in the correct folder in order to have them work. For example the css files must be saved into the folder css that you need to create inside the folder where you save the html file.

Images and media files are not included. You should use yours as in most case I have do not have the right to pass them over to you.

Please read also the description of each lecture because it contains useful information or even you get the summary of the lecture. It is a good way not to forget what you have learnt so far.

04:50

In this lecture we will see why it is important HTML and why you need to know it.

HTML is the Web’s core language for creating documents and applications for everyone to use, anywhere

With HTML you can create your own Web site


  • HTML (HyperText Markup Language) is the standard markup language used to create web pages
  • HTML combined with CSS, and JavaScript, is used to create web pages for web sites, web applications and mobile applications
  • Web browsers read HTML files and render them into web pages
  • HTML is more a description of the structure of a web page and not a programming language
  • An HTML content is composed of elements (the building blocks of a web page) which are expressed by tags
  • With HTML you can show images and embedded e.g. PDF document, other web pages, audio and video
  • You can also user forms for the collection of information to submit a request to a web server
  • It can be used to show structure documentation composed of headlines, paragraphs, lists, links, quotes etc.
05:57

The World Wide Web Consortium, or W3C, is the organization which publishes documents to be as the basis of Web development and for the Web technologies. These documents will be also part of the process which defines the recommendations. The recommendations are standards that the developers should follow when doing web development.

04:05

When you do web development you have to use software tools to edit your files.

You may start using Notepad but to get more support while creating your development structures it is recommended that you use more sofisticated tools.

Some of them are free, e.g. Notepad++, Geany and Sublime Text for Mac.

Section 2: HTML Basics
Introduction
01:49
04:41

With Web development we intend the software development of applications which are retrieving and sendind information through the world wide web

The Web development is characterized of 2 main areas:

  • The back end: the functions and data structure which will reside on the server side and will be then used by the user through a web browser to retrieve and show information on the monitor of a device e.g. Laptop, tablet and smartphone
  • The front end: the functions and data structure to be used to display the requested information on the users‘ monitor

In this course we will concentrate on the front end development

Front end development is done with HTML, CSS and Javascript

We will start understanding what HTML is

We will go through the main functions and characteristics of HTML5

We will have an understanding of CSS (focusing on the latest version CSS3)

We will have an overview of Javascript so that you will be able to add some basic functions to make the users interact with the browser


08:45

In This video you will understand the structure of a basic HTML file and its components.

We will see the structure of an HTML 4.1 file and the structure of an HTML 5 file.

You will see the concepts of tabs, body, head and title.

You will understand how to input content into an HTML structure.

You will see the difference between the 2 versions: 4.1 and 5

03:25

Today if you want to follow the right rules while programming in HTML you need to know what XHTML is and consider your HTML file more as an XHTML file.

Extensible Hypertext Markup Language (XHTML) is part of the family of XML markup languages. It mirrors or extends versions of the widely used Hypertext Markup Language (HTML), the language in which Web pages are formulated.

While HTML, prior to HTML5, was defined as an application of Standard Generalized Markup Language (SGML), a flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. XHTML documents are well-formed and may therefore be parsed using standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser.

05:37

In this lesson we will understand the concept of HTML tags and elements.

We will compare the structure of an HTML document to that of an XML document.

We will see how to nest elements within other elements and how to define attributes of elements

04:07

The HEAD is the section of an HTML file where you define the inputs for your document, e.g. scripts, styles, parameters and the links to the external files to implement the styles and the scripts to your document elements,

In this lecture we will see how to set a "relative" reference to an external javascript file contained in a separate folder in our structure

06:03

We will see how to refer to an external stylesheet saved in a separate folder and how to format HTML elements using this external file.

We will see how to define an external stylesheet

We will see the concept of external style class and how to reference to it to format HTML elements.

04:27

We will see what META tags are and how to define them.

We will use META tags to define the content of the web page, the author, the keywors and much more.

00:44

You may include a brand of you on your web page which will be displayed in the tab of the browser next to the page title.

We will see how to do this in the HEAD section.

02:35

We will see other META elements import for SEO e.g.:

  • Http-equiv
  • robots
  • google-site-verification
06:23

This is an overview of the BODY part of an HTML file.

The body is the part which contains the content of an HTML document and therefore contains the HTML elements.

We will have a summary of the main HTML elements, how to place them in the body and where to find documentation about them and their characteristics and where to find all the defined HTML elements as they are defined by the W3 Consortium.

03:38

The HEADER element is a container used to present an introduction of the BODY content, including also navigation links.

A HEADER element typically contains:

  • one or more heading elements (<h1> - <h6>)
  • the logo of the page or business
  • information about the author

The HEADER element is not unique, i.e. you can have several HEADER elements in one document.

A <header> tag cannot be placed within a <footer>, <address> or another <header> element.

05:15

We will see how to create Article structure including headers.

We will see also how to include images into headers as part of headlines and of articles.

02:48

The Footer is a new element of the HTML5 version.

We will see how to define the footer of a web page.

5 questions

You will test your knowledge you acquired so far in this section

Article

Please do the following:

  • create an HTML document will all the elements for an HTML skeleton (HEAD, BODY and elements and information within the HEAD area
  • add an article in the HTML document
  • add a title in the article "my article" and a paragraph "this is my article content"

The result is available in result_01.html (see in the attached resources)

Section 3: HTML elements
Introduction
00:38
04:34

In this lecture we will setup our HTML document to be ready for the next examples/explanations.

We will setup a header with a logo and a headline.

We will define the block for the content between header and footer.

We will align the content area and the footer.

05:55

We well see what an HTML table is and how to define it.

We will see the following:

  • THEAD: the table header and we will define the columns of the table header
  • TBODY: the table content and we will define table rows and table columns

We will start to understand also comments in HTML

02:01

We will see how to define the border of a table.

External table border and internal grids must be formatted separately in modern browser.

We will see how to do this.

02:18

We will format the text in the cells of an HTML table.

We will then center the table in a DIV block.

05:07

We will see how to set a text in bold or italic or in bold and italic.

We will see how to nest elements within other elements

04:06

In an HTML table you can merge cells horizontally and vertically using the attributes colspan and rowspan

03:03

BR is the element which allows you to add a line break.

01:09

A good way to divide areas with a line is using the HR element.

Like the BR element the HR is an HTML element as well without content.

As an element can also be formatted, e.g. we can change the line style and the size.

04:28

iFrame is the HTML element used to include external content to your web pages.

We will display an external website in our wb page using iFrame and then we will embed a Youtube video

04:23

We weill see how to express symbols e.g.

  • currencies
  • math formuals
  • special chars
  • copyright, trade marks and properties
  • icons

etc.

This have their own HTML code and also decimal (DEC) and hexadecimal (HEX) expression.

05:50

Text elements in HTMl are headlines, paragraphs and normal texts.

In this lecture we will see the characteristics of each of these types of text elements

11:27

The DIV element is one of the standard elements in HTML.

With DIV you can express any other element, e,g, buttons, texts and tables.

We will see how to define DIV elements, how to position them, how to size and resize them and how to include content.

We will see what are the default settings of the size and position of a DIV and how to modify them.

We will see how the size of a DIV element is affected or affects that of its children or elements contained inside the DIV.

03:04

The span element is a container which has the characteristics to be displayed inline.

You will see the difference between a span block and a div block and decide which you want to use according to your needs: display block or display inline.

You will see the difference between displaying inline and displaying as block.

02:23

Sections are similar to DIVs and may be used to organize your work and recognize every piece as a separate section.

It is good for content rich web pages, e.g. to organize articles and other text according to categories.

03:15

The Navigation element is used to define the main navigation area, e.g. the one containing the links to the main pages to a web site (login, help, about,...).

It is used to contains links but it is basically very similar to a div element.

Like for the sections it is more an organizational element.

05:08

Menu and MenuItems are elements available in Firefox to be used on the dialog manu appearing on mouse right-click.

You can add other menu items to the menu other than the default ones, e.g. to open new links, send emails or share to social media.

06:07

The IMG element is used in HTML to display images on web pages.

It is basically an element without content but with the information about the path of the image to display in one of its attribute.

We will see how to refer relatively to images or with the absolute URL.

Imgaes can also be easily formatted and scaled. We will see how.

06:08

Text in an HTML document can contains lists.

List can be ordered (numbered) and unordered (with bullets) and with indented elements (e.g. using the dd, dt elements).

We will see how to define the list we want ion our text and how to format it.

05:16

Links are the gateway to other web sites and other web pages.

With links you can redirect to another web site or to another of your web pages.

We will see how to build absolute and relative URI for our links and how to display links on a web page.

02:46

With HTML links you can redirect to another page in the same container or in a new tab or even above the page like when you send an email.

We will see which attribute to use to do this and we will see some examples.

02:04

In HTML you can also assign links to images.

I.e. you can not only use text as content of your link element but also images, e.g. logos.

04:21

In HTML links can be used not only to redirect to other web pages or web sites but also to other parts of content in the same page.

This is very useful if you have a lot of long content in the same page (e.g. articles) and you want to create internal reference between the parts (jumping, e.g. going to top, going to article,...).

We will see how to define the links for this and how to anchor the texts to reference to links.

7 questions

You will test your knowledge you acquired so far in this section

Section 4: HTML Forms
Introduction
01:03
12:52

In this lecture we will have an overview of what an HTML Form is and how it is structured.

We will see the attributes of a Form:

- name: to identify is an element (e.g. for javascript use)

- action: to implement the needed routines/actions

- method: which is the HTTP method to query the server to get information - GET - or to update information - POST)

- role: to distinguish forms on a document according to their purposes

We will see some examples on populare web sites.

06:13

We will start building our first form based on the instructions we learned so far.

We will use the FIELDSET elements as a container of all the elements/inputs of our form.

We will use the LEGEND element to give a caption to our form.

We will start understanding how to style a form and even to set in in the center or to another position.

02:11

In this lecture we will have an overview of the Input of the type Text.

This Input Box is used to input and submit text (e.g. user information - name, first name, last name, etc.) composed of a string in one line.

07:29

If you have more text input boxes first of all you need to identify with a label.

We will see the Label object which may be assigned to every input box in a form.

We will also learn how to distribute text input boxes, how to align them and how to style them.

02:45

Sometimes you may input a default value in a text box when the page is displayed, e.g. to reduce the time of the user to input data or to prevent errors. For example you may have a form with a text where to specify the name of a city. If you know that quite often the name is e.g. New York then there is a way to do this.

You will see this in this lecture.

You will also see how to include Placeholders e.g. help text to be used as guidelines but will not affect the final input and output, e.g. when you need to specify that in a text box the user should input the email address.

05:04

Dropdowns or combobox menus are created using the Select objet in HTML.

Just speciying the object as Select, automatically the browser will render it in form of dropdown.

To specify the elements or items of a dropdown box you need to use the option objects.

These objects exist only within the select object. The content or displayed text of an option element is the internal text included between the 2 tags <option> and </option> but the value is stored in the attribute "value".

In this lecture you will have an overview of the select and option objects.

02:14

The best why to verify the values selected in a select object is using javascript.

We will use Javascript to display the select values in a select element.

04:13

There are options that can be defined as dummy of informational (e.g. the title of a category or a specification on how to use the select - "please select a product") and their value must not be consider as valid. At this scope you need to use Javascript to avoid that their "dummy" value is considered as valid to be submitted.

You can also specify one as the default item in a select element and this will be displayed by default as selected every time the web page with that form is loaded.

We will see how to do this with the attribubute "selected".

05:00

Radio buttons are HTML elements used in a form for the user to choose among a limited number of options where only one has to be selected. You can do this with a select element but if the number of options is limited and you want to make them very clear then you should use the radio buttons.

To make radio buttons depend one another you need to give them the same name but different values. the value of the selected one will be chosen when submitting the form.

05:23

In this lesson we will talk about checkboxes which are used as an option with 2 values.

If the element is checked one value is selected, otherwise the other one is selected.

The default one is defined by the status of the checkbox when the page is loaded that cen be checked or not checked.

YOu can by default set a checkbox as checked on page load. The same is valid for radio buttons. You can by default set one of them to the status of "checked" when the page is load and its value is the default value.

Checkboxes can also be displayed as disabled. That means the user cannot check them (cannot change the value). This is used to show for example an option whose value is fixed but you want the user to be aware of it.

YOu can also disable other input elements (e.g. text elements). For example when the value of a text box is needed but cannot be changed.

05:25

Text Areas are special elements in HTML forms.

They are a bit different than the other input elements and contain text which is recognized as rich text.

So they are like text editors where carriage returns are recognized as line breaks.

You can also format them and disable them.

05:16

Buttons are elements in HTML used to trigger events. They are used to submit forms (although the SUBMIT object is defined to do this) or to trigger other actions with Javascript.

We will see an example of actions triggered when a button is clicked.

As any other input object a button can be formatted or customized as any other Form input element.

04:16

Submit buttons are special buttons in HTML forms.

They are used to submit forms and you do not need to specify any action or event. The submit event is already consider per default.

As any other input element a submit button can be formatted and customized.

5 questions

You will test your knowledge you acquired so far in this section

Section 5: Media elements
Introduction
00:55
05:03

Multimedia elements are native elements in HTML5 and with a few instructions you can embed audio, video, images and animations to your web pages.

In this lecture we will have an overview of the AUDIO element.

An audio element is characterized by properties e.g. controls, to display the console to control the playback of an audio file, and autoplay, to let the audio playback on page load.

You just need to specify the URL of your audio file to have it embeded on your web pages.

05:41

In this lecture we will have an overview of the VIDEO element.

Like for the audio a video element is characterized by properties e.g. controls, to display the console to control the playback of an video file, and autoplay, to let the video playback on page load.

You just need to specify the URL of your video file to have it embeded on your web pages.

You may have also different video formats, e.g. mp4, ogg, etc. and you should refer to any of them to be sure that if your browser does not support one of your format, it may support another one.

In video objects you can also specify the url of a an image to be used as a splash image, i.e. the image which is displayed on the video canvas on page load as video presentation.

05:29

OBJECT is an element known also as HTML plugin or HTML helper.

Object is used to embed any kind of media and also other web pages.

We will see how to embed a video, a flash file and another HTML page.

02:36

The Embed element is similar to the Object element.

It is not available on Firefox.

You just can embed any kind of media and HTML file to your web page using the Embed object and specifying the media URL in the src attribute.

03:17

In this lecture I will show you some tips and tricks to use when you want to embed a flash file in your web page.

To prevent issue due to the different settings of the different browser you should combine the 2 solutions with the Object element and the Embed element.

You will see how to do this so that if a user ignores one configuration, can render the other one.

09:45

You may already know that you can embed a Youtube video into your web pages.

Youtube helps you in doing this, but you may not be aware that you can set some parameters to configure your video.

For example you can:

  1. disable the display of suggested videos at the end of the playback
  2. hide video information
  3. enable autoplay
  4. enable full screen view

etc.

In this lecture I will show you how.

04:04

With the object element you can also embed files e.g. Pdf and SVG.

When you embed a pdf file the browser will render also the standard pdf viewer with zoom and paging functions.

SVG are files which reproduce an image where the geographical information is provided in XML formal.

Just parsing the file the browser will render the graphics.

05:34

Canvas are new elements in HTML5.

They are like a board where you can draw geometric objects e.g. lines, rectangles, circles and even text.

By the way you need to use Javascript to actually draw objects on a canvas and I will show you how.

05:39

If you do not want to use Javascript to draw objects into Canvas elements you may use the SVG element to embed geometrical shapes.

With SVG, setting the values of some parameters you can statically draw geometrical shapes.

Section 6: CSS and CSS3
Introduction
00:42
05:00

CSS is the styling language or set of instructions to define styles of HTML elements.

With CSS you can format the border and background of the elements, set their colors and size.

You can even modify the styles of texts, fonts and paragraphs.

CSS instructions can be specified in an external stylesheet which you need to refer to in your HTML file providing the link in the HEAD part.

But CSS can also be defined inline for each element assigning the settings in form of string as the value of the style attribute.

You may also include the definition of styles (i.e. classes) in the HEAD part of your HTML file.

Classes are the fundamental structures of information when you want to style HTML elements.

08:39

CSS styles can be defined in an external stylesheet file, as well as in the HEAD part of an HTML file.

You need to pay attention if you use both settings, i.e. part of your styles are in an external stylesheet and part is in your HTML file.

In fact if you have classes having the same name in the 2 situations the browser will not generate any error. Instead it will consider as valid the one which the browser parses as the last.

You may use this behavior to override classes (extend styles).

08:26

In CSS you can define the same class many times in the same stylesheet or also in the HTML head.

If you define different settings for every definition of the same class, all will be considered by the browser as they were defined in the same place.

If the same property is defined in many places in different ways (e.g. border-style: solid and then border-style:dashed) the last one will be consider by the browser (in our example: style: dashed).

This phenomenon is known as Class Override.

You can also deefine the settings for more classes together.


05:34

In HTML you can assign style to an HTML element with the attribute style or the attribute class.

The attribute style is used to do inline styling.

With the attribute class you refer to a style defined somewhere else (in the head part of the HTML file or in an external stylesheet).

The settings specified in the attribute style have the higher priority. So if you define the same style in the class and in the inline style, that defined in the inline style will be considered by the browser and the class definition will be ignored.

06:03

The co-existence of inline style and class in an HTML element sometimes is an advantage.

In fact, you may have defined a style class which you will assign to several HTML elements but then for some of these elements you may need to modify partially the style setting, e.g. you want a different border or background.

In this case you just assign the same class to these elements and apply the small changes using the inline style definition.

You can so avoid to define many similar classes.

In fact the advantage of definining a class is to concentrate the style settings for similar elements in the same place, so that if you need to do some changes you will do them in only one place.

If you define many several classes you will need to check all of them if you need to do the changes.

Using one class means you will change only once. The definition in the inline styles for these "special" elements will not be affected. If needed you just modify the settings in the style attribute of those elements.

08:43

With CSS you can also modify the default style of the "native" HTML elements e.g. body, html, h1, table, p, etc,

That means that you can change the default font family of the HTML file modifying the definition of the settings of the body elements.

Bear in mind that these settings will be overriden if you assign a class to an element whose default settings have been modified.

The priority strenght is so: style > class > native.

You can change the style of an HTML element of a type (e.g. body, p, h1,...) in an external stylesheet file or in the head part of the HTML file

02:34

You can define the style common to all the elements in an HTML file using the * symbol and defining the style for this "*" universal element.

This can be done in an external stylesheet or in the head part of the HTML file

04:15

You can also define the style of an element identified by an id.

This is useful if you have an element which is unique in your HTML document and has to be referred to in a Javascript file.

If you need to set the style to this element to be valid only for it then this is a good way to go.

By the way you can assign also a class or an inline style to it and all will be considered by the browser.

06:24

You can assign more than one class to an HTML element.

You just specify as the value of the class a string containing the name of all the classes separated by a space char each.

If a property is specified in more than one class in the list the value defined in the last one in the list will be considered by the browser.

If you want that a property defined in a class will be always taken as valid by the browser you need to make the value in the class follow by the expression !important.

06:33

If you decide to use another font family for your web pages and this is not available as default at the browsers you may search it on the Internet e.g. at fonts.com or even at Google Fonts.

Once you purchase and download your font package, you have to be sure to have all the following files:

  • eot
  • woff
  • woff2
  • ttf
  • svg

If not, go to fontsquirrel.com and upload your purchased/downloaded package and download the new generated package which includes the file in the extensions listed above.

Use then the @face-font function to specify the name of the family and the src to the font files.

Then, if you named your new font-family 'my_new_family', set this value e.g. to the definition of the style of the body element:

body {font-family: 'my_new_family'}

or in any class or definition of style you want in your stylesheet.

07:55

The Box Model is the most important concept in CSS.

If you understand this you are a step ahead in becoming an expert in CSS.

Basically, every HTML object ist a rectangular box with the following characteristics:

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent


7 questions

You will test your knowledge you acquired so far in this section

Section 7: CSS Properties
Introduction
00:29
05:58

The border property is used in CSS to define the style of the border of every HTML element.

You can define the width, style and color of a border.

You can also define the border not only for the entire box or element but also for the single parts: left, right, top and bottom.

02:45

You can set the border corner as rounded with the border radius property.

You can do this for every corner/angle of an element. So some corners can be rounded and other rectangular.

If the value of the property is 0 then the corner will be rectangular.

02:49

In CSS you can define the shadow for every HTML element.

As we already said, every HTML document is basically a rectangle.

You can define the bi-dimensional shadow of a box setting the effects vertically and horizontally, i.e. you can shift the shadow on the right and on the bottom.

You can define also the blur effect and the color of the shadow. The color can also contain some opacity.

04:06

In CSS you can also set an image as a border of an HTML element.

You can define which portion of the image to display and if to repeat it.

02:48

Border collapse and border spacing are very useful when using HTML tables.

In the previous version of HTML you were familiar with the attributes cellspacing and cellpadding of the HTML Table element.

The W3C reccommends to use CSS to style elements, even the tables.

Border collapse will decide if to remove the space between the border of the table and the border of its cells.

With border spacing you define the distance between the internal cells of a table.

01:27

You can set the style of the border of any HTML element using the border-style property.

The most popular and used styles are:

  • solid
  • double
  • dashed
  • dotted


10:26

Using the background-color property you can define the background color of any HTML element.

The color can be define in different formats.

The most popular are:

- Hexadecimal (e.g. #000000 for black)

- RGB (Red Green Blue: e.g. black = RGB(0, 0, 0) - you set different levels of Red, Green and Blue to define different colors)

- RGBA: similar to RGB but you define also as 4th parameter the opacity

- The name of the color, e.g. "green", blue",...


Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Daniele Protti, Project Manager and Software Architect

I have 20+ years experience in IT project management, software development and software architecture.

I have led several teams of software developers as project manager, quality manager and as team leader in different companies and different countries in sectors e.g. telecommunication, research & development, travel business, Internet marketing and Internet business, consultancy and services.

I have been responsible to collect the requirements of projects, applications and processes, design the databases and specify the final objects.

During my career I have accumulated a lot of experiences dealing with processes of any kind and the need to define the tools to manage them and collect the information.

Most of my tools have been written in VB, VBA, C++, C#, Java, PHP, Javascript using databases e.g. Informix, Postgres, Oracle and MySql.

I have organized all my experiences in courses which are not only a list of functions and methods but contain also my practical experiences and considerations about how to cope with the different situations and which solutions to suggest.

Ready to start learning?
Take This Course