{"product_id":"introduction-to-html-and-css-coding-part-1","title":"Introduction to HTML and CSS Coding Part 1","description":"\u003cdiv class=\"ebsi-team-licence-note\"\u003e\u003cp\u003e\u003cstrong\u003eBuying for a team?\u003c\/strong\u003e\u003cbr\u003eChoose 5 or 10 licences to purchase access for multiple learners at a reduced per-person rate. After purchase, eBSI will contact you to confirm the learner details and arrange course access for each participant.\u003c\/p\u003e\u003c\/div\u003e\n\u003c!-- ebsi-sales-wrapper --\u003e\u003cdiv class=\"ebsi-sales-wrapper\"\u003e\n\u003cp\u003e\u003cstrong\u003eDevelop practical knowledge and confidence in Introduction to HTML and CSS Coding Part 1.\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003eA well-designed website provides customers with information about a company, details on how to find or contact them, and the ability to make purchases and place orders. Businesses of all sizes can use websites to help drive traffic, and to reach more customers than ever before.\u003c\/p\u003e\n\u003ch3\u003eWhy this course matters\u003c\/h3\u003e\n\u003cp\u003eThis course turns the subject into practical, structured learning you can apply in real business and workplace situations. It is designed to help you move beyond definitions and understand how the ideas, tools and decisions covered in the course fit together.\u003c\/p\u003e\n\u003ch3\u003eWhat you will gain\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003eBuild a practical understanding of the key concepts covered in Introduction to HTML and CSS Coding Part 1.\u003c\/li\u003e\n\u003cli\u003eRecognise where the topic applies in real workplace or business situations.\u003c\/li\u003e\n\u003cli\u003eApply the methods and good-practice approaches covered in the course with greater confidence.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eWho is this course for?\u003c\/h3\u003e\n\u003cp\u003eThis course is suitable for digital marketers, SME owners, entrepreneurs, sales and marketing professionals and anyone responsible for online business growth.\u003c\/p\u003e\n\u003ch3\u003eCourse at a glance\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eStudy time:\u003c\/strong\u003e approximately 2 hours.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFormat:\u003c\/strong\u003e self-paced online learning.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eProfessional development:\u003c\/strong\u003e CPD course.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cp class=\"ng-scope\"\u003eA well-designed website provides customers with information about a company, details on how to find or contact them, and the ability to make purchases and place orders. Businesses of all sizes can use websites to help drive traffic, and to reach more customers than ever before.\u003c\/p\u003e\n\u003cp class=\"ng-scope\"\u003eThe basis of many webpages – a collection of webpages form a website — are the HTML and CSS computer programming languages. Learning how to use these languages, which are used to build and style the content of a webpage, is an important step to creating your own well-designed webpages.\u003c\/p\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cp\u003e\u003cu\u003e\u003cstrong\u003eCourse Topics:\u003c\/strong\u003e\u003c\/u\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eLesson 1: Getting Started with HTML\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC A: HTML Basics\u003c\/em\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eHTML – Background Information\u003c\/li\u003e\n\u003cli\u003eAnatomy of an HTML Tag\u003c\/li\u003e\n\u003cli\u003eGetting Started\u003c\/li\u003e\n\u003cli\u003eActivity 1-1: Inspecting a Webpage\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC B: Basic Webpage Elements\u003c\/em\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe Heading Tag\u003c\/li\u003e\n\u003cli\u003eParagraph and Break Tags\u003c\/li\u003e\n\u003cli\u003eBasic Text Formatting Tags\u003c\/li\u003e\n\u003cli\u003eActivity 1-2: Using HTML to Add Basic Elements\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC C: Creating Lists\u003c\/em\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eOrdered Lists\u003c\/li\u003e\n\u003cli\u003eUnordered Lists\u003c\/li\u003e\n\u003cli\u003eList Items\u003c\/li\u003e\n\u003cli\u003eActivity 1-3: Creating an HTML List\u003c\/li\u003e\n\u003cli\u003eSummary\u003c\/li\u003e\n\u003cli\u003eReview Questions\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003eLesson 2: Doing More with HTML\u003c\/strong\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC A: Images in HTML\u003c\/em\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe Image Tag\u003c\/li\u003e\n\u003cli\u003eDefining an Image Source\u003c\/li\u003e\n\u003cli\u003eDefining Alternative Text for the Image\u003c\/li\u003e\n\u003cli\u003eImage Sizing\u003c\/li\u003e\n\u003cli\u003eActivity 2-1: Adding an Image in HTML\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC B: Links in HTML\u003c\/em\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eLinking to Another Webpage\u003c\/li\u003e\n\u003cli\u003eInternal Links\u003c\/li\u003e\n\u003cli\u003eActivity 2-2: Adding a link\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC C: Tables in HTML\u003c\/em\u003e\u003c\/strong\u003e\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eBreakdown of a Table in HTML\u003c\/li\u003e\n\u003cli\u003eTable Header Row\u003c\/li\u003e\n\u003cli\u003eTable Data Rows\u003c\/li\u003e\n\u003cli\u003eActivity 2-3: Creating an HTML Table\u003c\/li\u003e\n\u003cli\u003eSummary\u003c\/li\u003e\n\u003cli\u003eReview Questions\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003eLesson 3: Getting Started with CSS\u003c\/strong\u003e \u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC A: Basics of CSS\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eCSS: Cascading Style Sheets \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eThe \u0026lt;style\u0026gt; Tag \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eCSS Typography and Hierarchy \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 3-1: Creating a Styling Area Using the \u0026lt;style\u0026gt; Tag \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC B: CSS Color\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eChanging the Color of a Webpage Element \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eColor Names in CSS \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eRGB Color System \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eHexadecimal Color System \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eBackground Color \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 3-2: Adding CSS Colors in a Variety of Ways \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC C: Using Additional CSS Identifiers\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eUsing ID Names in CSS \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eUsing Class Names in CSS \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 3-3: Using an ID Name for Styling \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eSummary \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eReview Questions \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003eLesson 4: Styling Text with CSS\u003c\/strong\u003e \u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC A: Font Families\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eWhat is a Font? \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eUsing the Font-Family Property \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eSerif vs Sans-serif \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eFont Names \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eAdditional Font Types \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eFont Backups \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 4-1: Changing the Font Family in CSS \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC B: Font Size\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe Font-Size Property \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003ePixels \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eEMs \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 4-2: Changing the Font Size of Text \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC C: More CSS Text Properties\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe Font-Style Property \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eThe Font-Weight Property \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eThe Line-Height Property \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eThe Text-Align Property \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 4-3: Customizing Text Using Additional Properties \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC D: Font Shorthand\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eCSS Shorthand \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eCSS Shorthand for Fonts \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 4-3: Using the CSS Font Shorthand in Practice \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eSummary \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eReview Questions \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003eLesson 5: Extended Styling Techniques using HTML and CSS\u003c\/strong\u003e \u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC A: Grouping Elements\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eWhat is a Grouping Element? \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eInline vs Block Formatting \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 5-1: Using the \u0026lt;span\u0026gt; and \u0026lt;div\u0026gt; Tags to Group Webpage Elements \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC B: Div Dimensions\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eAdjusting the Width of a Div \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eAdjusting the Height of a Div \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eOverflow \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 5-2: Adjusting the Style of a Div Block \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eTOPIC C: The CSS Box Model\u003c\/em\u003e\u003c\/strong\u003e \u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe CSS Box Model \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eCSS Margins \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eCSS Borders \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eCSS Padding \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eActivity 5-3: Adjusting the Style of a Div Block \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eSummary \u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\n\u003cli\u003eReview Questions\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003cul class=\"ng-scope\"\u003e\u003c\/ul\u003e\n\u003c!-- ebsi-cross-sell --\u003e\u003cdiv class=\"ebsi-cross-sell\"\u003e\n\u003ch3\u003eContinue your learning\u003c\/h3\u003e\n\u003cp\u003e\u003cstrong\u003ePart of this learning pathway:\u003c\/strong\u003e \u003ca href=\"\/collections\/internet-marketing\"\u003eInternet Marketing\u003c\/a\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cstrong\u003eLearners also take:\u003c\/strong\u003e \u003ca href=\"\/products\/introduction-to-html-and-css-coding-part-2\"\u003eIntroduction to HTML and CSS Coding Part 2\u003c\/a\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c!-- ebsi-academy-breadcrumb --\u003e\n\u003chr\u003e\u003cdiv class=\"ebsi-course-pathway\"\u003e\n\u003cp\u003e\u003cstrong\u003eCourse pathway:\u003c\/strong\u003e \u003ca href=\"\/pages\/welcome-to-ebsi-digital-marketing-academy\"\u003eeBSI Digital Marketing Academy\u003c\/a\u003e \u0026gt; \u003ca href=\"\/collections\/internet-marketing\"\u003eInternet Marketing\u003c\/a\u003e \u0026gt; Introduction to HTML and CSS Coding Part 1\u003c\/p\u003e\n\u003cp\u003eExplore more \u003ca href=\"\/collections\/internet-marketing\"\u003eInternet Marketing\u003c\/a\u003e training or return to the \u003ca href=\"\/pages\/welcome-to-ebsi-digital-marketing-academy\"\u003eeBSI Digital Marketing Academy\u003c\/a\u003e.\u003c\/p\u003e\n\u003c\/div\u003e","brand":"eBSI Export Academy","offers":[{"title":"Individual Licence (EUR 40)","offer_id":41822179819698,"sku":"VS-054","price":44.0,"currency_code":"USD","in_stock":true},{"title":"5 Licences (EUR 35 each)","offer_id":59260649439580,"sku":null,"price":193.0,"currency_code":"USD","in_stock":true},{"title":"10 Licences (EUR 30 each)","offer_id":59260649472348,"sku":null,"price":330.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0077\/7604\/3071\/products\/IntroductiontoHTMLandCSSCodingPart1.png?v=1649036420","url":"https:\/\/www.ebsiamericas.com\/products\/introduction-to-html-and-css-coding-part-1","provider":"eBSI Export Academy","version":"1.0","type":"link"}