Welcome to the first day of Web Development Week! Today, we will be discussing HTML and CSS.

HTML, or HyperText Markup Language, is the basic language used to create web pages. It is a markup language, which means that it uses tags to identify different elements on a page. For example, the

tag is used to identify a heading, and the

tag is used to identify a paragraph.

CSS, or Cascading Style Sheets, is used to style HTML pages. CSS can be used to change the font, color, size, and alignment of text, as well as the layout and appearance of the page.

In this tutorial, we will be discussing the basics of HTML and CSS. We will be creating a simple web page, and styling it with CSS.

So, let’s get started!

The first thing we need to do is create a HTML document. We can do this using a text editor, such as Notepad or TextEdit.

In the document, we need to include the and tags. The tag defines the document as an HTML document, and the tag contains information about the document, such as the title.

Next, we need to add the tag. The tag contains the content of the page.

We can now add our content to the page. We can add text, images, and other HTML elements.

For our example, we will create a simple web page with a heading and a paragraph.

The code for our page looks like this:

Web Development Week – Day 1

In today’s lesson, we will be discussing HTML and CSS. We will be creating a simple web page, and styling it with CSS.

We can save this document as “index.html” and open it in a web browser to see the page.

Now that we have created a basic HTML document, let’s style it with CSS.

We can add CSS to our document by adding a

' ); $( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' ); $( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } else { jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-top', '' ); jQuery( '#mysticky_divi_style' ).remove(); jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' ); $( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' ); } }, trigger_sec ); } } } if ( $( window ).width() < 767 ) { if ( after_trigger == 'after_a_few_seconds' ) { if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) { var trigger_sec = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec') * 1000; var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position'); var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight(); setTimeout(function(){ jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' ); $( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' ); jQuery( '#mysticky_divi_style' ).remove(); jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' ); if ( welcombar_position == 'top' ) { jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-bottom', '' ); $( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' ); $( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } else { jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-top', '' ); $( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' ); } }, trigger_sec ); } } } mystickyelements_present(); } $( window ).resize( function(){ var mysticky_welcomebar_height = jQuery( '.mysticky-welcomebar-fixed' ).outerHeight(); if( welcombar_aftersubmission == 'dont_show_welcomebar' ){ var welcomebar_storage = localStorage.getItem("welcomebar_close"); } else if( welcombar_aftersubmission == 'show_welcomebar_next_visit' ) { var welcomebar_storage = sessionStorage.getItem("welcomebar_close"); } else { sessionStorage.removeItem('welcomebar_close'); localStorage.removeItem('welcomebar_close'); var welcomebar_storage = null; } if ( welcomebar_storage === null ){ var after_trigger = jQuery( '.mysticky-welcomebar-fixed' ).data('after-triger'); if ( ! $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-notapper' ) ) { jQuery( 'body' ).addClass( 'mysticky-welcomebar-apper' ); } else { jQuery( 'body' ).removeClass( 'mysticky-welcomebar-apper' ); } if ( after_trigger == 'after_a_few_seconds' ) { var trigger_sec = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec') * 1000; var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position'); var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight(); if ( $( window ).width() < 767 ) { if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) { setTimeout(function(){ jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' ); $( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' ); jQuery( '#mysticky_divi_style' ).remove(); jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' ); if ( welcombar_position == 'top' ) { jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-bottom', '' ); $( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' ); $( '.mysticky-welcomebar-apper #mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } else { jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-top', '' ); $( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' ); } }, trigger_sec ); } } else { if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-desktop' ) ) { setTimeout(function(){ jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' ); $( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' ); if ( welcombar_position == 'top' ) { jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-bottom', '' ); jQuery( '#mysticky_divi_style' ).remove(); jQuery( '.mysticky-welcomebar-apper.et_fixed_nav #top-header' ).css( 'top', welcombar_height + 'px' ); jQuery( 'head' ).append( '' ); $( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' ); $( '.mysticky-welcomebar-apper #mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } else { jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-top', '' ); jQuery( '#mysticky_divi_style' ).remove(); jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' ); $( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' ); } }, trigger_sec ); } } } mystickyelements_present(); } } ); jQuery(window).on( 'scroll', function(){ if( welcombar_aftersubmission == 'dont_show_welcomebar' ){ var welcomebar_storage = localStorage.getItem("welcomebar_close"); } else if( welcombar_aftersubmission == 'show_welcomebar_next_visit' ) { var welcomebar_storage = sessionStorage.getItem("welcomebar_close"); } else { sessionStorage.removeItem('welcomebar_close'); localStorage.removeItem('welcomebar_close'); var welcomebar_storage = null; } if ( welcomebar_storage === null ){ var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight(); var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position'); if ( welcombar_position == 'top' ) { $( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } if ( after_trigger === 'after_scroll' ) { var scroll = 100 * $(window).scrollTop() / ($(document).height() - $(window).height()); var after_scroll_val = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec'); var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position'); var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight(); if( scroll > after_scroll_val ) { if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-desktop' ) ) { if ( $( window ).width() > 767 ) { jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' ); $( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' ); if ( welcombar_position == 'top' ) { jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', (adminBarHeight+ 0 ) + 'px' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-bottom', '' ); $( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' ); $( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } else { jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-top', '' ); $( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' ); } } } if ( $( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) { if ( $( window ).width() < 767 ) { jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-animation' ); $( '.mysticky-welcomebar-fixed' ).addClass( 'entry-effect' ); if ( welcombar_position == 'top' ) { jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight +0 ) + 'px' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-bottom', '' ); $( 'html' ).attr( 'style', 'margin-top: ' + mysticky_welcomebar_height + 'px !important' ); $( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } else { jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '0' ); jQuery( '.mysticky-welcomebar-fixed' ).css( 'opacity', '1' ); $( 'html' ).css( 'margin-top', '' ); $( 'html' ).attr( 'style', 'margin-bottom: ' + mysticky_welcomebar_height + 'px !important' ); } } } } } mystickyelements_present(); } }); jQuery( '.mysticky-welcomebar-close, .mysticky-welcomebar-btn a' ).on( 'click', function(){ if( welcombar_aftersubmission != 'show_welcomebar_every_page' ){ if( welcombar_aftersubmission == 'dont_show_welcomebar' ){ sessionStorage.removeItem('welcomebar_close'); localStorage.setItem('welcomebar_close', 'close'); } else if( welcombar_aftersubmission == 'show_welcomebar_next_visit' ) { localStorage.removeItem('welcomebar_close'); sessionStorage.setItem('welcomebar_close', 'close'); } } var welcombar_position = $( '.mysticky-welcomebar-fixed' ).data('position'); var welcombar_height = $( '.mysticky-welcomebar-fixed' ).outerHeight(); jQuery( '.mysticky-welcomebar-fixed' ).addClass( 'mysticky-welcomebar-notapper' ); jQuery( 'body' ).removeClass( 'mysticky-welcomebar-apper' ); jQuery( '.mysticky-welcomebar-fixed' ).slideUp( 'slow' ); if ( welcombar_position == 'top' ) { jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', '-' + mysticky_welcomebar_height + 'px' ); } else { jQuery( '.mysticky-welcomebar-fixed' ).css( 'bottom', '-' + mysticky_welcomebar_height + 'px' ); } jQuery( '#mysticky_divi_style' ).remove(); jQuery( '.et_fixed_nav #top-header' ).css( 'top', '' ); jQuery( 'html' ).css( 'margin-top', '' ); jQuery( 'html' ).css( 'margin-bottom', '' ); $( '#mysticky-nav' ).css( 'top', '0px' ); /*if mystickyelements show*/ var mystickyelements_show = $( '.mystickyelements-fixed' ).length; if( mystickyelements_show && $( window ).width() <= 1024 && $( '.mystickyelements-fixed' ).hasClass( 'mystickyelements-position-mobile-top' ) && welcombar_position == 'top' ) { var mystickyelements_height = $( '.mystickyelements-fixed' ).height(); $( '.mystickyelements-fixed' ).css( 'top', '' ); $( 'html' ).attr( 'style', 'margin-top: ' + mystickyelements_height + 'px !important' ); } } ); }); function mystickyelements_present() { var after_trigger = jQuery( '.mysticky-welcomebar-fixed' ).data('after-triger'); var mystickyelements_show = jQuery( '.mystickyelements-fixed' ).length; var welcombar_position = jQuery( '.mysticky-welcomebar-fixed' ).data('position'); var adminBarHeight = 0; if ( jQuery("#wpadminbar").length != 0 ){ var adminBarHeight = jQuery('#wpadminbar').height(); } if ( jQuery( window ).width() <= 600 && jQuery(window).scrollTop() != 0 && welcombar_position == 'top') { jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', '0px' ); var welcombar_height = jQuery( '.mysticky-welcomebar-fixed' ).outerHeight(); jQuery( '#mysticky-nav' ).css( 'top', welcombar_height + 'px' ); } else if ( welcombar_position == 'top' ) { var mysticky_welcomebar_height = adminBarHeight + jQuery( '.mysticky-welcomebar-fixed' ).outerHeight(); jQuery( '.mysticky-welcomebar-fixed' ).css( 'top', ( adminBarHeight + 0) + 'px' ); jQuery( '#mysticky-nav' ).css( 'top', mysticky_welcomebar_height + 'px' ); } if( mystickyelements_show ) { var welcombar_height = jQuery( '.mysticky-welcomebar-fixed' ).outerHeight(); var mystickyelements_height = jQuery( '.mystickyelements-fixed' ).height(); var mystickyelements_total_height = welcombar_height + mystickyelements_height; if ( jQuery( window ).width() <= 1024 && jQuery( '.mystickyelements-fixed' ).hasClass( 'mystickyelements-position-mobile-top' ) ) { if ( after_trigger == 'after_a_few_seconds' ) { if ( jQuery( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) { var trigger_sec = jQuery( '.mysticky-welcomebar-fixed' ).data('triger-sec') * 1000; setTimeout(function(){ if ( welcombar_position == 'top' ) { jQuery( '.mystickyelements-fixed' ).css( 'top', welcombar_height ); jQuery( 'html' ).attr( 'style', 'margin-top: ' + mystickyelements_total_height + 'px !important' ); } else { jQuery( '.mystickyelements-fixed' ).css( 'top', '' ); jQuery( 'html' ).attr( 'style', 'margin-bottom: ' + welcombar_height + 'px !important' ); } }, trigger_sec ); } } else if ( after_trigger === 'after_scroll' ) { var scroll = 100 * $(window).scrollTop() / ($(document).height() - $(window).height()); var after_scroll_val = $( '.mysticky-welcomebar-fixed' ).data('triger-sec'); if( scroll > after_scroll_val ) { if ( jQuery( '.mysticky-welcomebar-fixed' ).hasClass( 'mysticky-welcomebar-display-mobile' ) ) { if ( welcombar_position == 'top' ) { jQuery( '.mystickyelements-fixed' ).css( 'top', welcombar_height ); jQuery( 'html' ).attr( 'style', 'margin-top: ' + mystickyelements_total_height + 'px !important' ); } else { jQuery( '.mystickyelements-fixed' ).css( 'top', '' ); jQuery( 'html' ).attr( 'style', 'margin-bottom: ' + welcombar_height + 'px !important' ); } } } } } } } jQuery(".mysticky-welcomebar-fixed").on( "animationend MSAnimationEnd webkitAnimationEnd oAnimationEnd", function() { jQuery(this).removeClass("animation-start"); } ); jQuery(document).ready(function() { var container = jQuery(".mysticky-welcomebar-fixed"); var refreshId = setInterval(function() { container.addClass("animation-start"); }, 3500); });