Beginners Guide to Web Development
3.2 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12 students enrolled

Beginners Guide to Web Development

Learn HTML, CSS, and JavaScript to design and develop web applications. Discover how to scrape any application easily
3.2 (2 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12 students enrolled
Created by Packt Publishing
Last updated 3/2019
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build a foundation in HTML and the semantics of good coding style
  • Unravel the worth of the cascading nature of CSS: IDs, classes, tags, and pseudo-classes
  • Develop responsive websites and web applications for any device
  • Get familiar with cross-browser support to ensure your site will look great on different browsers and devices
  • Make dynamic websites and web applications with JavaScript
  • Dynamically load content to a page using Ajax, greatly reducing page load times
  • Create interactive elements quickly with Bootstrap and jQuery to reduce your development time
  • Integrate with thousands of open-source and paid jQuery plugins, allowing you to rapidly create amazing things
  • Learn how to build a simple and powerful JavaScript scraping script
  • Understand how to create a web scraping tool using JavaScript and Node js
Course content
Expand all 79 lectures 10:57:47
+ Practical HTML and CSS
29 lectures 04:25:03

This video will give you an overview about the course.

Preview 03:55

You need good tools to make authoring HTML and CSS easy. In this video, you get an overview of how an IDE provides that functionality.

  • Learn what editors you can use.

  • Learn about list features of an IDE

  • Learn about different IDEs for different operating systems

Integrated Development Environments (IDEs)
03:12

In this video, you will learn how different hosting options can help you identify your website needs.

  • Learn about website engines

  • Learn about shared hosting

  • Learn about cloud providers

Building Your First Website
07:12

In this video, you will understand the parts of an HTML document.

  • Learn about the Head

  • Learn about encoding and how tags are read

  • Learn how content and body are organized

HTML Document Structure
09:26

In this video, you will understand HTML tags and the value of semantic markup.

  • Learn about tags

  • See how tags display by default

HTML – HTML Tags
19:29

Your document will not stand alone – it will need to be linked to other sites. In this video learn how to perform linking and including

  • Create a link

  • Include a CSS file

HTML – Linking and Including
00:49

In this video, we will lay the foundation for learning HTML and see how items are laid out on a page.

  • Review common HTML tags

  • Learn about the box model

  • Explore the default styling features

Tags, Defaults, and the Box Model
13:42

In this video, you will introduce yourself to the Bootstrap framework to speed up high-quality content creation.

  • Learn about Bootstrap

  • Explore the documentation

  • Go through the pre-made Bootstrap examples

Intro to Bootstrap
13:47

In this video, you will make your content easily discoverable by utilizing meta tags for SEO and social media

  • Learn about meta tags and what values to use

  • Explore the useful tools for debugging

  • Learn about open graph

Meta Tags and SEO
13:10

In this video, you will learn how to include images, what formats to use, and when.

  • Explore the supported formats with features

  • Learn about compression and quality

  • Learn about animation

Working with Images
11:41

In this video, we will give you an overview of HTML5.

  • Review the documentation

  • Learn how to implement tags

  • Understand the value of HTML5

Introduction to HTML5
10:49

In this video, we will give you an overview of CSS and Selectors.

  • Learn about basic Selectors

  • Join Selectors

  • Learn about complex Selectors

CSS and Selectors
10:36

Learn how to set colors and bring life to your page.

  • Learn about RGB

  • Introduce yourself to Alpha

  • Introduce yourself to hex notation

Colors
08:41

This video will give you an overview of Fonts.

  • Control font size, style, and weight

  • Include new and external fonts

  • Understand the utility of different fonts

Fonts
13:45

All elements are positioned using the box model. In this video, learn how its use is critical in styling a website.

  • Learn about Padding

  • Learn about Border

  • Learn about Margin

Controlling the Box Model
18:09

This video will give you an overview of Additional Directives.

  • Review documentation

  • Understand the common parameters

  • Review other parameters

Additional Directives
14:04

This video will give you an overview of Pseudo Classes, Pseudo Elements, and Cascading.

  • Explore the Cascading nature of CSS

  • Understand Pseudo Classes

  • Understand Pseudo Elements

Pseudo Classes, Pseudo Elements, and Cascading
17:18

An overview of CSS Frameworks.

  • Describe the value of using a framework

  • Explore the different frameworks and see where to learn more

  • Understand how to read documentation for frameworks

CSS Frameworks
04:58

In this video, you will learn how to make your site look different for different devices by applying different styles based on form factor.

  • Understand form factor size

  • Use min and max to target devices

  • Learn to target certain devices

Media Queries
14:48

This video will walk you through user experience for different devices.

  • Understand the mobile experience

  • Understand the tablet experience

  • Understand the desktop experience

User Experience, Different Devices
04:16

This video will give you an overview of responsive design with Bootstrap.

  • Learn about the bootstrap grid

  • Learn about display

  • Understand Bootstrap documentation

Responsive Design with Bootstrap
08:47

In this video, learn about the different browser engines.

  • Learn about the most widely used browsers and their differences

Browser Differences
03:09

Learn about the few operating system differences for mobile & desktop computing.

  • Explore the default fonts available

  • Explore the browser availability on each platform

  • Learn the differences between various OS dependents

Operating System Differences
03:08

This video will help you understand how to inspect and Debug.

  • Learn about Inspect

  • Inspect across browsers

  • Lean to live-edit CSS

Inspect and Debugging
12:58

In this video, learn how to ensure that your website is functional for users by performing cross-browser testing.

  • Review premade testing tools

  • Make use of different browsers on the same computer

  • Perform cross-Browser Testing keeping mobile and desktop in mind

Cross Browser Testing
06:15

Learn how to integrate the most popular social media platforms and features.

  • Use widget customizers

  • Embed tweets

  • Copy and paste email capture forms

Social Embeds
08:07

In this video, learn how you can know what you can do with code on the internet.

  • Understand open source licenses

  • Learn about paid licensing

Licensing and Rights
01:53

In this video, learn how you can be sure that code you are using is safe.

  • Discuss the benefits of iframes

  • Understand the restrictions of iframes

  • Understand the risks involved in using external code

Security Concerns – IFrames Versus Code Snippets
03:00

This video will give you an overview of customization.

  • Learn to edit code

  • See how other code achieves targets

  • Make your code

Customization
03:59
Test your knowledge
4 questions
+ Real-World JavaScript: Pro-Level Techniques for Entry-Level Developers
33 lectures 05:33:16

This video provides an overview of the entire course.

Preview 05:42

Having an understanding of what JavaScript is will help contextualize your adventure in learning.

   •  Explore where is JavaScript used

   •  Learn the value of JavaScript

   •  Study the history of JavaScript

What Is JavaScript and How Is It Used?
08:23

To effectively create JavaScript, you’ll need the right tools. This video explores those tools.

   •  Discuss IDE options

   •  Explain feature sets

   •  Determine the right IDE for you

Using an IDE and Coding Intro
10:46

Variables are one of the most important, foundational concepts for any programming language. In this video, we will discuss how they work and how to work with them.

   •  Learn what variables are

   •  Differentiate the types of variables

   •  Know how to work with and manipulate variables

Variables and Objects
10:48

Knowing variables isn’t enough. You need to know how to work with variables and use different operators.

   •  Add and concatenate numbers and strings

   •  Understand basic math syntax

   •  Differentiate between the comparators and their usage

Operators
10:59

Functions are how you bring code to life. Learning to create and use them is key.

   •  Create functions

   •  Utilize parameters

   •  Differentiate between local and global variables

Functions and Scope
09:55

JavaScript’s great power comes from its ability to interact with HTML and CSS. The DOM is how that happens.

   •  Learn about the DOM and what it is

   •  Interact with the DOM through events

   •  Modify CSS properties and styles through JavaScript

The DOM, Events, and Triggering Functions – Part 1
09:39

Expanding on the first video, understand the DOM and the interaction between JavaScript and HTML/CSS.

   •  Reinforce the use of functions

   •  Explain the interaction between events and functions

   •  Review common event types

The DOM, Events, and Triggering Functions – Part 2
09:16

Objects are a critical data structure and variable type in JavaScript and other programming languages.

   •  Explain the basics of an Object

   •  Learn the value of an Object as opposed to an Array

   •  Learn about JSON – JavaScript Object Notation

Objects and Object-Oriented Programming
11:49

JavaScript and HTML cannot store data from page to page. The solution is cookies.

   •  Learn how to create a cookie

   •  Delete cookies

   •  Know how cookies work

Cookies as a Means of Storage
07:07

JSON is widely used, and once you learn more about it, it’s clear that its simplicity makes it very useful.

  • Analyze what JSON looks like

  • Learn to convert a JSON string to a JavaScript Object

  • Learn to serialize a JavaScript Object to JSON

Understanding the JSON Format
11:35

JavaScript and its many frameworks are full of Objects. In this video, learn how they work and how to make them.

  • Learn how to create Objects

  • Work with Objects

  • Explore why OOP is so valuable

Objects and Object-Oriented Concepts
15:10

Theory is great, but sometimes practical tutorials work best. Let’s build a quiz!

  • Store questions in JSON

  • Create a navigation for the quiz

Building a Quiz with JSON – Part 1
11:42

This video is a continuation of the previous video for building a quiz.

  • Learn how to navigate in JSON

  • Grade and respond to the results.

Building a Quiz with JSON – Part 2
17:32

jQuery and Bootstrap are two of the most used frameworks, and it’s important to know why.

  • Demonstrate the value of a framework

  • Know why jQuery is preferred over other frameworks

  • Understand how Bootstrap fits in

Why jQuery/Bootstrap?
08:00

jQuery isn’t the only JavaScript framework. Learning about different frameworks and how to pick the right one for you is critical to good development.

  • Explore the features of a framework

  • Walkthrough of different frameworks

  • Discuss interoperability of frameworks

Other Frameworks – Pros and Cons
07:14

We’ve learned the basics of JavaScript, so let’s review how to use them in jQuery.

  • Learn how jQuery is loaded

  • Understand jQuery element selectors

  • Differentiate between jQuery events and core JavaScript

jQuery: Structure, Selectors, and Event Handling – Part 1
11:51

This video is a continuation of the last video’s topics.

  • Explore “show and hide” visuals of jQuery

  • Explore “fade in and fade out” visuals of jQuery

jQuery: Structure, Selectors, and Event Handling – Part 2
10:52

Bootstrap is an extremely useful HTML and CSS framework that sits on top of jQuery. It can greatly speed up quality web development.

  • Discover where to find Bootstrap example code

  • Review built-in and custom form validations

  • Create modals and pop-ups

Bootstrap – Interactive Form Handling and Modals
14:24

Before you can use plugins, you have to know where to find them.

  • Explore jQuery’s plugin repository

  • Go through other popular repositories

  • Learn how to safely use search engines to find plugins

jQuery Plugins – What and Where?
04:14

Using random code off the internet exposes you to security risks. You must understand how to protect yourself.

  • Identify what to look for

  • Discuss the types of attacks that exist

  • Learn tips for keeping your code safe

Security and Safety Concerns
06:34

Plugins and frameworks provide detailed API documentation, but you must know how to read it to extract value from it.

  • Review the structure of API documentation

  • Learn how to read a function declaration

  • Identify the different parameter types

How to Read API Documentation
08:12

Bootstrap is an amazing UI framework that sits on top of jQuery. It is powerful but you must learn how to unleash that power.

  • Review the API documentation and format

  • Walk through examples of common functionality in action

  • Explain the difference between using data parameters and JavaScript execution

Bootstrap and jQuery
08:36

Google API allows access to nearly all of its services, from search to books to machine learning and maps. Learning how to get an API key and interact with the APIs unlocks tons of functionality.

  • Acquire API keys

  • Integrate with the Maps library-based API

  • Learn about backend RESTful API integrations

Integration with Google APIs
11:50

Facebook is a powerful force in social media, and its API allows you to both get and set tons of data as well as allows users to easily share your website.

  • Acquire API keys

  • Integrate with the Facebook library-based API

  • Understand OAuth and limitations of the frontend API

Integration with Facebook
09:22

If your business wants to accept payments, PayPal is an extremely effective payment system. While it has a plethora of documentation, it can be daunting to get started.

  • Acquire API keys

  • Learn what is possible through the API

  • Walk through samples and examples

Integration with PayPal
08:57

Twitter is a powerful social media platform with a large quantity of data. Learning how to leverage that and make your sites sharable is key to success.

  • Acquire API Keys

  • Discuss the API options

  • Understand the difference between JavaScript and HTML APIs

Integration with Twitter
13:25

Diving into coding a new project is a great way to get lost in the deep end. You need to learn how to plan before you code.

  • Identify the functionality you want

  • Sketch how you want things to look

  • Research the available API and library options

Development Approach – Design and Spec
09:11

By having a high-level overview of the code for this example, we can focus later on specific bits while having context.

  • Review the frontend and interactions

  • Walk through the HTML

  • Discuss the JavaScript

Code Review
13:02

Cookies are great for storing things on a user’s computer for a short time. But we need to know why they’re good and when they are not.

  • Implement JS Cookie

  • Set cookie values

  • Retrieve cookie values

Review of Cookies
07:41

Events drive the web. Understanding what events trigger when and how they will be used in the example will gives deeper knowledge.

  • Walk through Google Maps events

  • Review the button and page events

  • Discuss the other possible events that would fit the example

Events
05:34

Code will break. How you handle and research errors will make or break you as a coder. Learning how to track your code and errors will make bugs less frustrating.

  • Use the console to look for errors

  • Use the console to output information that can help track down issues

  • Review recent code changes

Debugging
08:45

The example covers lots of topics, libraries, and code. This video will cover any code or topics that not covered in the previous sections.

  • Review what you have learnt

Everything Else
15:09
Test your knowledge
4 questions
+ Learning Web Scraping with JavaScript
17 lectures 59:28

This video provides an overview of the entire course.

Preview 03:03

Explain what web scraping is and emphasize on the legal restrictions.

  • What is web scraping?

  • Why web scraping?

  • Legal restrictions

Introduction to Web Scraping
01:57

The aim of this video is to understand scraping with a simple example using only the browser’s dev tools and to explain the technical pros and cons of the example.

  • Set up a plan

  • Set up the program

  • Discuss the pros and cons, and what was achieved

Scraping an Amazon Webpage Using Simple JS Code
10:16

This video will give you an overview of how to install CasperJS, and how to set up a script with CasperJS.

  • Install CasperJS

  • Simple CasperJS script

Installing and Setting Up a Basic Script Using CasperJS
06:44

The goal of this video is to set up a script to scrape google.com.

  • Scrape the data

  • Save the data into a JSON file

Setting Up a Project to Scrape Google Using CasperJS
05:00

Know some tips to improve the script created earlier, and check the main CasperJS methods.

  • Tips about the script

  • Main CasperJS methods

Best Practices
02:01

The aim of this video is to explain the benefits of using CasperJS and to attract the attention of the user to the legal limitations of web scraping.

  • CasperJS benefits

  • Legal limitations of web scraping

Summary with Benefits and Legal Limitations
00:55

This video will show how to scrape Airbnb.com and then save the result in an HTML and a JSON file.

  • Locate the data

  • Scrape the website

  • Save the result in an HTML and a JSON file

Using CasperJS to Scrape Airbnb
07:48

The goal of this video is to run the script and show how to debug it.

  • Run the script

  • Debug the script

Running and Testing the Script
02:04

Set up an ES6 script and then run it.

  • Set up an ES6 script

  • Run the script

Best Practices Using CasperJS
01:53

This video will show the plan of the section with a brief introduction to Cheerio and Request.

  • Show the plan

  • Cheerio introduction

  • Request introduction

Scraping Amazon.com Using Cheerio
01:42

The goal of this video is to set up the project.

  • Install the npm packages

  • Locate the data to scrape on the Amazon.com

  • Understand the script

Setting Up the Project
05:46

Run and analyze the result.

  • Run the script using the terminal

  • Analyze the data

Running the Script
01:04

The main goal of the video is to analyze and compare CasperJS with Request.

  • Summarize how scraping works

  • Summarize how CasperJS and Cheerio work

Summary
01:33

This video will show how to build a web application to scrape a website and then save the result online using a node server and Amazon storage service.

  • Talk about Amazon

  • Explain the global architecture

Web Application to Scrape a Website
02:42

The goal of this video is to explain the script.

  • Understand the script

Web Application Script
03:07

The aim of this video is to run the web application and check the result.

  • Run the script using the terminal

  • Analyze the data

Run the Web Application
01:53
Test your knowledge
5 questions
Requirements
  • No prior knowledge of HTML, CSS, or JavaScript is required.
Description

Web technologies are growing rapidly, and by building a solid foundation in HTML, CSS, and JavaScript, you are beginning your journey and riding the wave of innovation.

This practical course is your one-stop guide to learning web development. You will begin with learning HTML and CSS to design and build professional, beautiful, and truly responsive websites. You will then learn basics as well as advanced techniques in JavaScript to build dynamic websites and web applications. Along the way, you will also be introduced to JavaScript frameworks, plugins, and libraries with practical examples. Next, you will learn performing scraping on websites data wherein you will firstly learn to perform scraping on static web pages and then writing more sophisticated scripts for dynamic websites. Finally, you will learn some JavaScript scraping libraries and packages to automate scraping tasks.

Contents and Overview

This training program includes 3 complete courses, carefully chosen to give you the most comprehensive training possible.

The first course, Practical HTML and CSS, covers the fundamentals of HTML and CSS to build professional, beautiful, and truly responsive websites that will maximize the value you can create. This course will give you the confidence to take on any web design by knowing what is possible, how to find the answers to the unknown, and how to make your website stand out from the crowd.

In the second course, Real-World JavaScript: Pro-Level Techniques for Entry-Level Developers, you will not only begin learning the basics of JavaScript, but also enable a high level of interactivity that lets you accept payments, validate inputs, and create a winning User Experience. Along the way, you will learn how to dynamically load content on a page using AJAX and add interactive elements to your site with Bootstrap and jQuery, which will greatly help in reducing page load times and your development time. Integrate your website with both open-source and paid jQuery plugins that will allow you to rapidly enhance your site's interactivity and responsiveness.

The third course, Learning Web Scraping with JavaScript, is the ultimate guide to using the latest features of JavaScript and Node.js to scrape data from websites. Firstly, you'll see how to extract data from static web pages. After learning the basics, you'll get hands-on practice of building more sophisticated scripts. You'll determine when and how to scrape data from a JavaScript-dependent website using JavaScript scraping libraries. You'll also learn to automate these actions with JavaScript packages such as Cheerio and CasperJS.

By the end of this course, you will learn the core technologies of web development (HTML, CSS, and JavaScript ) to build your own websites and web applications. You will also learn to perform web scraping on them.

Meet Your Expert(s):

We have the best work of the following esteemed author(s) to ensure that your learning journey is smooth:

  • Nick Ruffilo has been a software and web developer for 20+ years. He has used JavaScript to develop web sites, web services, video games, native apps, and interactive ebooks. Nick has taught people of all ages, and focuses on providing the most impactful learning while teaching the skills necessary to continue your education. Nick Ruffilo is an entrepreneur, technology manager, software developer, and teacher. He understands the balance between a need to understand what's going on and the need to actually get things done.

  • Mustapha Mekhatria is the founder of SmartRTOS com and he is a JavaScript enthusiast. He enjoys setting up projects with Node.js, MongoDB, and VueJS. He publishes articles and videos about programming also has his own Youtube Channel. He likes sharing knowledge and strongly believes that everything is easy to understand if taught well.

Who this course is for:
  • This is an ideal course for Novice developers looking to get started with web development.