Complete Web Development Bootcamp
Uploaded by
AsadRehmanComplete Web Development Bootcamp
Uploaded by
AsadRehman- Web Development Fundamentals
- HTML 5
- CSS 3
- jQuery
- Document Object Model (DOM)
- Bootstrap 4
- JavaScript ES6
- Git & GitHub
- Express.js
- Node.js
- The Unix Command Line
- APIs
- Databases
- React.js
- Deployment
- Authentication and Security
- RESTful APIs
- Additional JavaScript Topics
Web
Development
Bootcamp.
TAUGHT BY COURSE LENGTH COURSE FEE
Dr. Angela Yu 12 Weeks $18,000
SYLLABUS WEB DEVELOPMENT
FUNDAMENTALS
THE COMPLETE WEB Understand how websites work and how HTML, CSS and
DEVELOPMENT JavaScript contribute.
BOOTCAMP Understand how the internet works.
Start coding with HTML, CSS, and JavaScript.
Learn and understand git, GitHub and version control.
Use the Unix command line to become a power user and
write bash commands.
Learn key troubleshooting and debugging skills to apply to
your projects.
HTML 5
Learn the anatomy of HTML syntax to structure your
websites.
Understand the HTML boilerplate and HTML doctypes.
How to structure text in HTML.
How to structure HTML lists to create unordered and ordered
lists.
How to insert images using HTML
How to create hyperlinks using anchor tags.
Understand how to use HTML tables for content.
How to use tables for layout.
Learn HTML best practices.
Understand about HTML forms and create a simple contact
me form.
HTML Divs and how to separate content for CSS styling.
CSS 3
Understand what are cascading style sheets and how you can
use it to style your website.
How to use CSS selectors and properties.
Learn about how to use inline, internal and external CSS.
Understand CSS coding best practices.
Learn about CSS sizing methods.
Learn the anatomy of CSS syntax and structure.
CSS specificity and implementing style hierarchy.
Class vs. Ids and how to target each.
CSS display and how to implement layout.
How to use CSS static, relative and absolute positioning
systems.
Font styling using CSS and web safe fonts.
Centering elements using CSS.
Website design fundamentals and typography.
APP BREWERY How to use CSS float and clear.
How combine CSS selectors and understand selector priority.
[Link]
SYLLABUS BOOTSTRAP 4
THE COMPLETE WEB Learn the fundamentals of implementing responsive web
DEVELOPMENT design.
How to use Balsamiq to mockup and wireframe websites.
BOOTCAMP The fundamentals of UI design for websites.
How to install the Bootstrap framework.
Understanding the Bootstrap grid layout system.
How to use bootstrap containers to layout your website
easily.
Learn to use other Bootstrap components such as buttons.
Adding symbols using Font Awesome.
Learn to use Bootstrap carousels.
Add Bootstrap cards to your website.
Using Bootstrap navigation bars.
JAVASCRIPT ES6
The Fundamentals of Code
Starting code with alerts and prompts.
Understand Variables and Data Types in JavaScript
Variable naming in JS
Working with strings and numbers
Randomisation and logical operators
Loops, collections and Conditionals.
Functions and invocation patterns
Discussion of ECMAScripts
Intermediate JavaScript
Learn to use JS Expressions, Operators, Statements and
Declarations
Object-Oriented Programming
JS Objects and Prototypes
`This`, Scope and Closures
Objects and Prototypes
Refactoring and Debugging
DOCUMENT OBJECT MODEL (DOM)
Learn the tree structure of HTML based websites.
Traverse through the document using object notation.
Separation of concerns and coding best practices.
Manipulate and change the HTML elements using your
understanding of the DOM.
JQUERY
APP BREWERY Installing and using the jQuery framework.
Learning about jQuery functionality
[Link]
SYLLABUS
Introduction to functions in jQuery
Manipulating text, styles and attributes with jQuery
Create animations and customisations with jQuery
THE COMPLETE WEB Use your jQuery knowledge to make your website interactive
DEVELOPMENT Responding to user initiated events with jQuery
BOOTCAMP
THE UNIX COMMAND LINE
How to use basic bash commands in a Unix/Linux Terminal.
How to manipulate files and folders without needing a
graphical user interface.
How to download and install to your computer using
command line.
GIT GITHUB AND VERSION CONTROL
Using git for version control and collaboration
Git forking, branching and cloning
Using GitHub as a remote repository
Checkout and rolling back changes with git
Using git and GitHub with Xcode
[Link]
Explore the components of back-end development, working
with an MVC framework
Apply concepts like data types, objects, methods, object-
oriented programming, and classes in the context of back-
end development.
Server-Side JavaScript
Using Node on the command line
NPM
JavaScript Build Processes
Event Loop and Emitters
File System Interaction
Modules
Native Node drivers
[Link]
Understand how to install and use express in Node
applications
Creating Node and Express based servers
RESTful Routing with Express
Understand and use middleware for Node applications
APP BREWERY
[Link]
SYLLABUS APPLICATION PROGRAM
INTERFACES (APIS)
THE COMPLETE WEB Understand what APIs are and how they work.
DEVELOPMENT HTTP in Depth
BOOTCAMP Calling APIs
Reading API documentation
Basic API Authentication
Server to server communication
JSON vs. XML, sending data over the wire.
EJS
Understand what EJS does and how to use it with Node and
Express.
Templating with EJS
Running code in EJS templates
Passing data from server to template and vice versa
Creating layouts/partials with EJS
DATABASE FUNDAMENTALS
Data Relationships
Databases Designing a Data Model
Relational Databases
Alternative Databases
Entity Relationship Modelling (ERM) and Object Relational
Mapping (ORM)
SQL DATABASES
Working with Database Schemas
Create-Read-Update-Destroy (CRUD)
Database Joins
Querying SQL databases
NOSQL DATABASES WITH MONGODB
AND MONGOOSE
Serialization
How to model NoSQL data
Document Databases (MongoDB)
Create-Read-Update-Destroy (CRUD)
NoSQL Best Practices
Mongo Shell and command line use
Installing MongoDB
Mapping relationships with MongoDB
Using an object-data modelling library (Mongoose) to work
easily with your data.
APP BREWERY
[Link]
SYLLABUS DEPLOYMENT
Understand hosting and deployment.
THE COMPLETE WEB Hosting static websites with GitHub Pages.
DEVELOPMENT Deploying server based applications with Heroku.
Deploying Databases with Mongo Atlas.
BOOTCAMP
BUILDING RESTful APIs
Understand REST and guiding principles behind API design.
Learn to work with a MongoDB GUI Robo 3T
Implementing GET, POST, PUT, PATCH and DELETE by creating a
public API from scratch.
Understand and use chained route handlers from Express.
AUTHENTICATION and SECURITY
Understand the need for authentication and keeping user
details secure.
Learn about Encryption and use encryption to keep your
database secure.
Learn and implement Hashing and Salting with bcrypt
Using Sessions and Cookies to persist user log in sessions.
Setting up local authentication from scratch.
Implementing Passport to authenticate users quickly and
effectively.
Understand and use environment variables to keep secret keys
secure.
Understand and use OAuth 2.0 to log in users using Google and
Facebook.
[Link]
Learn front-end development with React.
Understand when and how to use React Components.
Learn to pass Props and work with them.
Learn to write JSX and understand JSX syntax.
Learn about the React DOM.
Learn State Management in React.
Learn about React Hooks.
Learn about conditional rendering in React.
Understand the difference between class and functional
components.
JAVASCRIPT ES6
Arrow Functions
Map/Filter/Reduce
Find/FindOne/FindIndex
APP BREWERY Import/Export and Modules
Object and Array Destructuring
[Link]
Spread Operator
FAQ What's the difference between
your online and in-person
THE COMPLETE WEB bootcamp?
DEVELOPMENT The online bootcamp on Udemy has the same curriculum as our
in-person bootcamp. Our in-person bootcamp only runs once
BOOTCAMP
per year and is wait-list based. The Udemy online course can be
taken at anytime, on your schedule.
What's the difference between
your online courses on Udemy
[Link]?
Since 2019, we have moved all our courses on to Udemy other
than some courses with prior contracts (e.g. the agreement with
have with Google for the Flutter course). You should get our
courses from Udemy.
How long does the bootcamp take
to complete?
We teach the course in person over 12 weeks. But we have seen
students online complete the course as quickly as 3 weeks. It
depends if you are going to work full-time or part-time. It can also
be helpful to read around the topics and do more self-directed
research and experimentation.
I don't have any prior experience
or a technical background, can I
join?
The course is designed for students of all levels. The youngest
person we've had on the course is 11, the oldest 86. The most
inexperienced student didn't know what a website is, the most
experienced works for Twitter as a developer. The most important
thing is perseverance and willingness to learn. If you have that
then you'll do great!
APP BREWERY
[Link]
Common questions
Powered by AINode.js and Express.js streamline server-side web development by combining a powerful runtime environment with a minimal and flexible server framework. Node.js allows JavaScript to be used on the server, which promotes using the same language across the entire application stack, enhancing developer efficiency and consistency. Its non-blocking I/O model optimizes handling numerous concurrent requests, making it ideal for real-time applications. Express.js simplifies server setup and routing through middleware, offering a lightweight framework to build APIs quickly and efficiently. Together, they enable scalable, high-performance applications with the ability to meet varied web client demands .
Cascading style sheets (CSS) contribute to the functioning and visual presentation of a website by allowing developers to separate content from design, which enhances website aesthetics through styling. CSS provides tools like selectors and properties to modify the presentation, including layout, colors, and fonts. CSS enables responsiveness, ensuring the website's appearance adjusts to different screen sizes, using features such as media queries and flexible layouts. Additionally, it defines the styling hierarchy through specificity, allowing precise targeting with classes and IDs .
The Document Object Model (DOM) can be manipulated through methods provided by JavaScript or libraries like jQuery to change the content, structure, and style of web pages in response to user input or other events. DOM manipulation enhances web interactivity by allowing developers to dynamically alter HTML elements, such as updating text, applying styles, or modifying element attributes. This interactivity is achieved through functions like `querySelector` for element selection and `addEventListener` for handling user events. By enabling real-time content changes and animations without page reloads, DOM manipulation contributes to an engaging user experience .
ECMAScript advancements have significantly influenced modern JavaScript by introducing features that improve syntax, performance, and developer productivity. Changes like `let` and `const` for variable declaration, arrow functions for cleaner syntax in function writing, and destructuring assignments streamline data handling. ECMAScript also introduced modules for better code organization and interoperability, asynchronous programming enhancements like Promises, and built-in support for classes to facilitate object-oriented programming structures. These features make JavaScript more robust and maintainable, aligning it closer with other programming languages and improving web development practices .
Both RESTful APIs and traditional web services, like SOAP, facilitate data exchange between servers and clients, but they differ substantially in terms of their structure and design paradigms. RESTful APIs are stateless and rely on standard HTTP methods (GET, POST, PUT, DELETE) for communication, using URL paths for resource identification. They favor flexibility and simplicity, often using JSON for data payloads. In contrast, traditional web services like SOAP use a strict protocol with XML envelopes, requiring more bandwidth and processing overhead. REST APIs design focuses on resources and HTTP connectivity, while traditional services emphasize operations and protocol standards .
Authentication and encryption mechanisms provide data security in web applications by ensuring that only authorized users can access sensitive information and that this information is protected during transmission. Authentication processes verify user identity, typically through credentials like passwords, which can be hashed and salted to prevent unauthorized access. Encryption transforms data into a secure format that can only be decrypted by authorized parties, safeguarding it against interception during transmission. Technologies like OAuth 2.0 and protocol implementations like HTTPS combine these mechanisms to maintain confidentiality, integrity, and user trust in web applications .
Version control systems like git are crucial in collaborative web development environments because they enable multiple developers to work simultaneously on a project's codebase without conflicting changes. Git facilitates tracking changes, managing project history, and branching techniques for concurrent development of features, bug fixes, or experimental aspects. In collaborative settings, it enhances code quality through pull requests and peer reviews, integrates with platforms like GitHub for remote collaboration, and offers rollback capabilities to restore previous code states if necessary. This efficiency and control reduce development time and improve reliability and team coordination .
Closures in JavaScript allow functions to retain access to their lexical scope, which means they can access variables declared outside their immediate context even after their parent functions have finished executing. This ability enables data encapsulation and emulation of private methods. The `this` keyword, however, refers to the object on which the function is being executed, which can vary based on how the function is called, impacting context management. Together, closures and the `this` keyword allow for precise control of function behavior and make it possible to construct more modular and maintainable code by clearly defining variable scope and context .
Bootstrap plays a pivotal role in responsive web design by providing a grid system and pre-styled components that allow developers to create layouts that are adaptable to various screen sizes and devices. The Bootstrap grid allows for the definition of layouts across different breakpoints, ensuring content is presented optimally whether on mobile, tablet, or desktop screens. This flexibility enhances the user experience by providing consistency and improved navigability across devices. Bootstrap's rich set of UI components, like navbars and buttons, also contribute to a cohesive and visually appealing website without extensive custom code .
NoSQL databases like MongoDB offer advantages for modern web applications, particularly flexibility in handling unstructured data and scalability for high-transaction environments. MongoDB's document-oriented storage allows dynamic schemas, which means applications can evolve more rapidly without requiring heavy structural modifications. This is beneficial for agile development practices. However, Limitations include less robust support for complex transactions and consistency guarantees compared to traditional SQL databases, which use structured query language to provide strong ACID properties. SQL databases are favored where complex querying of relational data is necessary and transactional integrity is crucial .
