Scribd
Upload
428 views

HTML Css and Javascript: For Beginners

The document outlines a course that teaches the basics of HTML, CSS, JavaScript, jQuery, and related technologies for beginners to build web pages, with sections covering how to set up a development environment, the core languages and technologies, manipulating the DOM with JavaScript, working with JSON data and AJAX requests, and using jQuery to simplify common tasks and add interactivity. The course provides numerous examples and downloadable source code for students to try out themselves, and emphasizes using helpful tools, resources, and asking questions in the Q&A section if any assistance is needed.

Uploaded by

Tay Yu Jie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
428 views

HTML Css and Javascript: For Beginners

The document outlines a course that teaches the basics of HTML, CSS, JavaScript, jQuery, and related technologies for beginners to build web pages, with sections covering how to set up a development environment, the core languages and technologies, manipulating the DOM with JavaScript, working with JSON data and AJAX requests, and using jQuery to simplify common tasks and add interactivity. The course provides numerous examples and downloadable source code for students to try out themselves, and emphasizes using helpful tools, resources, and asking questions in the Q&A section if any assistance is needed.

Uploaded by

Tay Yu Jie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML CSS and JavaScript

for Beginners
Web Design Course
How the internet works
● Web pages are written using HTML, Hypertext Markup
Language. Set of instructions on what content should be
rendered out as well as basic structure of that content.
● The Web browsers render the page according to the HTML
code

● CSS allows for styling and customized look and feel with
your HTML code

● JavaScript lets us create dynamic interaction and able to


manipulate html elements using the Document object model
Resources and Setup
You need somewhere to write the code,
and be able to save files.

‘editor’

You need somewhere to view the code,


that renders out the file.

‘browser’
Editor
Lots of editors

Brackets.io

● Free open source editor


● Adobe product
● We use it in the course
● Have live view
● Code hints
Browsers
In the course we are using Chrome
because of Chrome DevTools
HTML Section
Course covers everything you need to know about HTML

● Basic syntax - all the common tags used to develop web content
● How and where you can write HTML - top resources and links
included
● Learn about HTML structure within web pages
● Explore HTML5 semantic elements
● Build your own HTML template
● Create HTML lists, hyperlinks, and add images
● Build tables for even more HTML structure
● Create Forms with in depth form examples and HTML tag
explanations
● Add iframes and more cool HTML elements
● Create your own mini HTML site using only HTML
CSS Section
Course covers everything you need to know about CSS

● Find the top resources and links to help you learn


● The basics of styling
● How to use Classes and ID to select elements
● Explore ALL the colors for fonts and backgrounds
● Move content display properties
● Learn how to apply styling to common HTML like Lists, Tables,
and more
● Everything you need to style your text and make it look fantastic
- including Google Fonts
● Floats to position elements and content
● The BOX MODEL - padding, margins, border, height, and width
for each element
● CSS positioning
● Working with Hyperlinks and making it look good
● CSS Pseudo Class
JavaScript Section
Course covers everything you need to know about JavaScript

● explore how to write JavaScript basics


● Data types the building blocks of coding
● Using Variables to hold data
● Functions invoking blocks of code
● JavaScript operators and assignment syntax
● JavaScript Objects and Arrays
● Conditions and Switches to apply logic
● Loops and iterating through data
● Arrays and array methods
● Document object to manipulate HTML element content
● all this and much more
JavaScript Document Object Model DOM Section
Course covers everything you need to know about JavaScript Document Object Model DOM

● Selecting elements within the DOM


● Manipulating element content and text output
● Adding styling and classes using JavaScript
● Event Listeners to add user interaction to your web content
● Building and creating elements with JavaScript
● Build an interactive list project from scratch
AJAX and JSON Section
Course covers everything you need to know about JSON and
AJAX

● What JSON is and how it works


● Links and top resources for JSON and JavaScript
● JavaScript Objects and JSON how they work and how you
can use JSON within JavaScript code
● Array objects and objects that contain arrays and more
● How to iterate through all the JSON data objects and output
them into your HTML page
● Challenges in lessons with step by step solutions
● JavaScript JSON methods
● Local Storage to store JSON data
● Using JavaScript Fetch to retrieve JSON data and responses
● All this and much more
jQuery Section
Course covers everything you need to know about jQuery

● explore how to write jQuery basics


● how to select elements to apply manipulations too
● learn about applying style and classes
● adding effects to elements like hide and show
● make you web page come to life with animations and effects slide,
fade and animation
● create interaction with your page using event listeners like mouse
events and keyboard events
● use AJAX to connect to JSON data to easily populate content into
your page
● all this and much more
Loaded with EXAMPLES and SOURCE CODE
How to download source code

Try the code out yourself


Tools and resources
Everything you need is included
Help is not far away
Don’t forget the Q&A section

I’m always happy to help you.

You might also like