Beginners Guide to Web Development

Name: Beginners Guide to Web Development
Rating: 4.3 (8 reviews)

Learn HTML, CSS, and JavaScript to design and develop web applications. Discover how to scrape any application easily

Created byPackt Publishing

Last updated 3/2019

English

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

3 sections • 79 lectures • 10h 57m total length

The Course Overview3:55
This video will give you an overview about the course.
Integrated Development Environments (IDEs)3:12
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
Building Your First Website7: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
HTML Document Structure9:26
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 – HTML Tags19:29
In this video, you will understand HTML tags and the value of semantic markup.
Learn about tags
See how tags display by default
HTML – Linking and Including0:49
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
Tags, Defaults, and the Box Model13:42
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
Intro to Bootstrap13:47
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
Meta Tags and SEO13:10
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
Working with Images11:41
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
Introduction to HTML510:49
In this video, we will give you an overview of HTML5.
Review the documentation
Learn how to implement tags
Understand the value of HTML5
CSS and Selectors10:36
In this video, we will give you an overview of CSS and Selectors.
Learn about basic Selectors
Join Selectors
Learn about complex Selectors
Colors8:41
Learn how to set colors and bring life to your page.
Learn about RGB
Introduce yourself to Alpha
Introduce yourself to hex notation
Fonts13:45
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
Controlling the Box Model18:09
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
Additional Directives14:04
This video will give you an overview of Additional Directives.
Review documentation
Understand the common parameters
Review other parameters
Pseudo Classes, Pseudo Elements, and Cascading17:18
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
CSS Frameworks4:58
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
Media Queries14:48
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
User Experience, Different Devices4:16
This video will walk you through user experience for different devices.
Understand the mobile experience
Understand the tablet experience
Understand the desktop experience
Responsive Design with Bootstrap8:47
This video will give you an overview of responsive design with Bootstrap.
Learn about the bootstrap grid
Learn about display
Understand Bootstrap documentation
Browser Differences3:09
In this video, learn about the different browser engines.
Learn about the most widely used browsers and their differences
Operating System Differences3:08
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
Inspect and Debugging12:58
This video will help you understand how to inspect and Debug.
Learn about Inspect
Inspect across browsers
Lean to live-edit CSS
Cross Browser Testing6:15
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
Social Embeds8:07
Learn how to integrate the most popular social media platforms and features.
Use widget customizers
Embed tweets
Copy and paste email capture forms
Licensing and Rights1:53
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
Security Concerns – IFrames Versus Code Snippets3:00
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
Customization3:59
This video will give you an overview of customization.
Learn to edit code
See how other code achieves targets
Make your code
Test your knowledge

The Course Overview5:42
This video provides an overview of the entire course.
What Is JavaScript and How Is It Used?8:23
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
Using an IDE and Coding Intro10:46
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
Variables and Objects10:48
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
Operators10:59
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
Functions and Scope9:55
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
The DOM, Events, and Triggering Functions – Part 19:39
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 29:16
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
Objects and Object-Oriented Programming11:49
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
Cookies as a Means of Storage7:07
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
Understanding the JSON Format11:35
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
Objects and Object-Oriented Concepts15:10
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
Building a Quiz with JSON – Part 111:42
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 217:32
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.
Why jQuery/Bootstrap?8:00
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
Other Frameworks – Pros and Cons7:14
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
jQuery: Structure, Selectors, and Event Handling – Part 111:51
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 210:52
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
Bootstrap – Interactive Form Handling and Modals14:24
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
jQuery Plugins – What and Where?4:14
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
Security and Safety Concerns6:34
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
How to Read API Documentation8:12
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
Bootstrap and jQuery8:36
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
Integration with Google APIs11:50
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 Facebook9:22
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 PayPal8:57
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 Twitter13:25
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
Development Approach – Design and Spec9:11
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
Code Review13:02
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
Review of Cookies7:41
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
Events5:34
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
Debugging8:45
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
Everything Else15:09
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
Test your knowledge

The Course Overview3:03
This video provides an overview of the entire course.
Introduction to Web Scraping1:57
Explain what web scraping is and emphasize on the legal restrictions.
What is web scraping?
Why web scraping?
Legal restrictions
Scraping an Amazon Webpage Using Simple JS Code10:16
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
Installing and Setting Up a Basic Script Using CasperJS6:44
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
Setting Up a Project to Scrape Google Using CasperJS5:00
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
Best Practices2:01
Know some tips to improve the script created earlier, and check the main CasperJS methods.
Tips about the script
Main CasperJS methods
Summary with Benefits and Legal Limitations0:55
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
Using CasperJS to Scrape Airbnb7:48
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
Running and Testing the Script2:04
The goal of this video is to run the script and show how to debug it.
Run the script
Debug the script
Best Practices Using CasperJS1:53
Set up an ES6 script and then run it.
Set up an ES6 script
Run the script
Scraping Amazon.com Using Cheerio1:42
This video will show the plan of the section with a brief introduction to Cheerio and Request.
Show the plan
Cheerio introduction
Request introduction
Setting Up the Project5:46
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
Running the Script1:04
Run and analyze the result.
Run the script using the terminal
Analyze the data
Summary1:33
The main goal of the video is to analyze and compare CasperJS with Request.
Summarize how scraping works
Summarize how CasperJS and Cheerio work
Web Application to Scrape a Website2:42
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 Script3:07
The goal of this video is to explain the script.
Understand the script
Run the Web Application1:53
The aim of this video is to run the web application and check the result.
Run the script using the terminal
Analyze the data
Test your knowledge

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.

Beginners Guide to Web Development

What you'll learn

Explore related topics

Course content

Practical HTML and CSS29 lectures • 4hr 25min

Real-World JavaScript: Pro-Level Techniques for Entry-Level Developers33 lectures • 5hr 33min

Learning Web Scraping with JavaScript17 lectures • 59min

Requirements

Description

Who this course is for: