Min menu

Pages

Complete Beginners Introduction To Web Development

Complete Beginners Introduction To Web Development

Learn web development basics.

Added on August 29, 2020 Development Verified on August 29, 2020

What you’ll learn

Build a very basic one page website

Plan and design a basic website project

Install and use text editor

Create a basic HTML document structure

Use comments in your code

Learn basic HTML

Learn basic CSS

Learn basic JavaScript

Learn to use linting tools

Add image changer code to a website

Add personalised greeting message to website

Learn to use web browser console

Access google fonts from your website

Requirements

You should be comfortable using a PC

You should comfortable using the internet

Description

Hello and welcome to this course.

This course is an introductory course to web development for absolute beginners.The aim of the course is not take you from beginner to expert but to take youfrom beginner to a point where you can you can decide if you want to explore more.

The three technologies every web developer must know are :

HTML : Used to create contentCSS: Used to present the contentJavaScript : Used to create interaction

They are the building blocks of all websites and web based projects.

This course will teach you the basics of these three technologiesby creating a basic one page website project.

What You will learn

Introduction to basic HTML

Creating a very basic website

Planning a basic website

Assembling files and folders

What is HTML

HTML document structure

Anatomy of HTML element

Marking up text

Links

Using comments

HTML Attributes

Introduction to basic CSS

What is CSS

Ways to apply CSS

CSS Ruleset

CSS basic selectors

Styling multiple elements

CSS Box model

Using margin and padding properties

Changing background color

CSS Display property

CSS Font property

Using google fonts

Introduction to basic JavaScript

What is JavaScript

Where to place JavaScript

Variables

Data Types

Operators

Operator precedence

Using Conditionals

Functions

Events

Using Linting tools

Adding image changer

Adding personalized message

By the end of this course you will be able to create a basic one page website and in the process acquire some basic but usefulweb development skills.

Take The Course

reaction:

Latest articles from : Web Developer

Comments

window['__wavt'] = 'APlU3lwvhP7-i6TDxsfaCxgD_Liv:1774776693660';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1032350083633616024','//discudemi.blogspot.com/2020/08/complete-beginners-introduction-to-web.html','1032350083633616024'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1032350083633616024', 'title': 'DiscUdemi', 'url': 'https://discudemi.blogspot.com/2020/08/complete-beginners-introduction-to-web.html', 'canonicalUrl': 'https://discudemi.blogspot.com/2020/08/complete-beginners-introduction-to-web.html', 'homepageUrl': 'https://discudemi.blogspot.com/', 'searchUrl': 'https://discudemi.blogspot.com/search', 'canonicalHomepageUrl': 'https://discudemi.blogspot.com/', 'blogspotFaviconUrl': 'https://discudemi.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22DiscUdemi - Atom\x22 href\x3d\x22https://discudemi.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22DiscUdemi - RSS\x22 href\x3d\x22https://discudemi.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22DiscUdemi - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1032350083633616024/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22DiscUdemi - Atom\x22 href\x3d\x22https://discudemi.blogspot.com/feeds/295387810144103991/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/400d273b28510d36', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '295387810144103991', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzADeI-Lmhn52kiTymobPdkbTyz8Q0WcaczRbzcpSRSDhkztxYz4yI2dUy0VBksZO-pQNCOyyMl0ICSjguXBPRWZoImG6bGUvJy_d4YkdPsxVWNqEtiU_ysGAdI07HxaHHrmXRhcNINVHX/s72-w400-c-h400/complete-beginners-introduction-to-web-development-6wioao5yp6lazhqovcrvsbtrs95j8ol2r9jyldkp9tu.jpg', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzADeI-Lmhn52kiTymobPdkbTyz8Q0WcaczRbzcpSRSDhkztxYz4yI2dUy0VBksZO-pQNCOyyMl0ICSjguXBPRWZoImG6bGUvJy_d4YkdPsxVWNqEtiU_ysGAdI07HxaHHrmXRhcNINVHX/w400-h400/complete-beginners-introduction-to-web-development-6wioao5yp6lazhqovcrvsbtrs95j8ol2r9jyldkp9tu.jpg', 'pageName': 'Complete Beginners Introduction To Web Development', 'pageTitle': 'DiscUdemi: Complete Beginners Introduction To Web Development', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Complete Beginners Introduction To Web Development', 'description': 'Awebsite interrested in Udemi coupons, 100% free udemi course, \u0643\u0648\u0631\u0633\u0627\u062a \u0645\u062c\u0627\u0646\u064a\u0629 , \u0643\u0648\u0631\u0633\u0627\u062a \u0623\u0648\u0646\u0644\u0627\u064a\u0646', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzADeI-Lmhn52kiTymobPdkbTyz8Q0WcaczRbzcpSRSDhkztxYz4yI2dUy0VBksZO-pQNCOyyMl0ICSjguXBPRWZoImG6bGUvJy_d4YkdPsxVWNqEtiU_ysGAdI07HxaHHrmXRhcNINVHX/w400-h400/complete-beginners-introduction-to-web-development-6wioao5yp6lazhqovcrvsbtrs95j8ol2r9jyldkp9tu.jpg', 'url': 'https://discudemi.blogspot.com/2020/08/complete-beginners-introduction-to-web.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 295387810144103991}}, {'name': 'widgets', 'data': [{'title': '\u0627\u0644\u0635\u0641\u062d\u0627\u062a', 'type': 'PageList', 'sectionId': 'pages', 'id': 'PageList1'}, {'title': 'DiscUdemi (Header)', 'type': 'Header', 'sectionId': 'logo', 'id': 'Header1'}, {'title': '\u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629', 'type': 'LinkList', 'sectionId': 'menu', 'id': 'LinkList22'}, {'title': 'Recent Courses', 'type': 'Label', 'sectionId': 'shreeta5bar', 'id': 'Label200'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'Tempnec', 'id': 'Blog1', 'posts': [{'id': '295387810144103991', 'title': 'Complete Beginners Introduction To Web Development', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzADeI-Lmhn52kiTymobPdkbTyz8Q0WcaczRbzcpSRSDhkztxYz4yI2dUy0VBksZO-pQNCOyyMl0ICSjguXBPRWZoImG6bGUvJy_d4YkdPsxVWNqEtiU_ysGAdI07HxaHHrmXRhcNINVHX/w400-h400/complete-beginners-introduction-to-web-development-6wioao5yp6lazhqovcrvsbtrs95j8ol2r9jyldkp9tu.jpg', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'author', 'label': '\u0643\u062a\u0628:'}, {'name': 'timestamp', 'label': '\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b:'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comments'}, {'name': 'icons', 'label': ''}, {'name': 'backlinks', 'label': 'Related Posts'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': '\u0627\u0644\u0642\u0633\u0645:'}]}, {'regionName': 'footer3', 'items': [{'name': 'reactions', 'label': 'reaction:'}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'author', 'label': '\u0643\u062a\u0628:'}, {'name': 'timestamp', 'label': '\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b:'}, {'name': 'comments', 'label': 'Comments'}, {'name': 'icons', 'label': ''}, {'name': 'backlinks', 'label': 'Related Posts'}, {'name': 'labels', 'label': '\u0627\u0644\u0642\u0633\u0645:'}, {'name': 'reactions', 'label': 'reaction:'}]}, {'title': '\u0627\u0639\u0644\u0627\u0646 \u0628\u0639\u062f \u0627\u0648\u0644 \u0641\u0642\u0631\u0629', 'type': 'HTML', 'sectionId': 'PostAds', 'id': 'HTML205'}, {'title': '\u0627\u0639\u0644\u0627\u0646 \u0628\u0639\u062f \u062b\u0627\u0646\u064a \u0641\u0642\u0631\u0629', 'type': 'HTML', 'sectionId': 'PostAds', 'id': 'HTML206'}, {'title': '\u0627\u0639\u0644\u0627\u0646 \u0628\u0639\u062f \u062b\u0627\u0644\u062b \u0641\u0642\u0631\u0629', 'type': 'HTML', 'sectionId': 'PostAds', 'id': 'HTML207'}]}]); _WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'pages', document.getElementById('PageList1'), {'title': '\u0627\u0644\u0635\u0641\u062d\u0627\u062a', 'links': [{'isCurrentPage': false, 'href': 'https://discudemi.blogspot.com/', 'title': '\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'logo', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList22', 'menu', document.getElementById('LinkList22'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label200', 'shreeta5bar', document.getElementById('Label200'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'Tempnec', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2626028960-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML205', 'PostAds', document.getElementById('HTML205'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML206', 'PostAds', document.getElementById('HTML206'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML207', 'PostAds', document.getElementById('HTML207'), {}, 'displayModeFull'));