EN 
SQ Web Development
Are you a beginner looking forward to learning how to create websites? We will guide you through the entire process: from how to write your first line of code to actually creating industry-standard websites for clients using HTML, CSS, Bootstrap, JavaScript, etc.
*Please check our requirements before applying
Course Contents
Self Paced
80 Hours
Mentor LEd
40 Hours
Tests
10+
Assignments
5
With this knowledge you will be able to
Understand how websites work
Set up your domain and hosting and create your own portfolio website
Create professional business websites for corporates
Build eCommerce websites for your clients where they can sell their products
Create blogging websites
Get maintenance and bug fixing jobs for existing websites
Get a good grasp on the concepts of web development setting you up to specialize further in either front-end or back-end web development
Course Curriculum
| Introduction to the course |
| How to get the most out of this course |
| Let’s get the setup done |
| The document structure and doctype |
| What are HTML tags ? |
| Tags for handling text |
| HTML Lists |
| Link tags |
| HTML Tables |
| Image tags |
| Conventional and Layout HTML tags |
| HTML Forms |
| What is Semantic HTML |
| Semantic tags (header, footer, section, article) |
| Semantic tags (aside, main, time, details) |
| HTML5 video/audio |
| HTML meta tags |
| HTML special characters |
| Assignment: Create a small website structure where you will display information about yourself |
| What is CSS and how CSS works |
| Ways to select an element to style |
| Font and Text styling |
| The Box Model |
| Changing colors and backgrounds |
| CSS layout properties |
| Advance CSS properties |
| Pseudo Properties |
| Transitions and Transform |
| CSS Flexbox and it’s uses |
| Media Queries and Breakpoints |
| Making grids with Flexbox to create a full website layout |
| Assignment: Style the website structure that you build in last weeks assignment |
| What is Bootstrap why to use it |
| How to setup Bootstrap for a project |
| The Bootstrap Grid |
| Breakpoints |
| Rows and Columns |
| Bootstrap Components and Elements |
| Bootstrap Utilities |
| Forms |
| Helpers |
| What is SASS and how to use it |
| Variables |
| Nesting |
| Modules |
| Operators |
| Mixins |
| Assignment: Recreate your personal website (that you built in assignment of week 1 & 2) with Bootstrap and SASS and share how easy or difficult it is to use Bootstrap and SASS |
| Introduction to JavaScript |
| Let’s write some JavaScript code |
| JavaScript Variables |
| Arrays in JavaScript |
| Data types in JavaScript and Truthy/Falsy Values |
| Operators in JavaScript |
| if/else and switch statements |
| The LOOPS and how to use it to write less code |
| Data Type Methods |
| Functions, Function Expressions and IIFE |
| Using Function as parameters and return values and the Scope chain |
| Closures |
| What is Asynchronous JavaScript and Promises |
| An Example of Asynchronous JavaScript |
| Async-Await, API and Ajax |
| Making AJAX Calls with Fetch and Async-Await |
| Assignment: Create and tip calculator with the rules from below |
| Introduction to OOP |
| Objects in JavaScript |
| Creating Objects Function Constructors |
| The “this” keyword |
| What’s new in ES6 JavaScript? |
| Arrow Functions and Default parameters |
| Arrays in ES6 and Map method and the Rest Parametre |
| Destructuring |
| Classes and Subclasses |
| What is DOM and how does it work? |
| Manipulating the DOM for the first time |
| How to select DOM elements in different ways |
| Changing styles of elements with DOM Manipulation |
| Handling Events |
| Special Methods for elements while manipulating the DOM |
| Good practices while handling events |
| Assignment: Create a small ludo game with JavaScript |
| Introduction to the terminal and CMD |
| Basic commands |
| What is version control |
| Git and Github |
| How to use Github fully |
| What is Node JS and NPM |
| Setuping Node JS |
| Basic package install and packages.json file uses |
| Why you need Node JS to learn modern JS development |
| What are JavaScript libraries and why you should learn React |
| Environment setup and Create-React-App |
| Understanding the files and the architecture of components |
| Class Vs Functional Components |
| Nested components |
| What is JSX and why it is important |
| How to write Raw JavaScript and CSS in a JSX file |
| What is props and how to use it |
| Prop Drilling and Props Destructuring |
| Lists in React and .map method and the spread operator |
| Assignment: Create a small React web application with more than 5 sections |
| State management |
| Component lifecycle methods |
| Styled Components |
| Module based CSS in a Component |
| Conditional Rendering |
| PropTypes |
| Why React Hooks? |
| useState |
| General rule of hooks |
| useEffect and Short-Circuit Evaluation |
| React Router and how to use in a real web application |
| useMemo |
| useRef |
| useReducer |
| useContext and Context API |
| useCallback |
| Handling forms with controlled input |
| Handling forms with useRef |
| Fetching Data From an API |
| Using Axios to get data from an API |
| Creating a custom React hook that fetches data from an API url |
| What are external libraries and why you should use them |
| Using tailwind CSS to create a small tours list application |
Let’s create a Markdown Blog
Creating an app that finds github users
Lets create a blog website with an API
Let’s create an eCommerce website with Material UI
Create your own brand new portfolio website from scratch using the topics of the whole course and share it.
We will also teach you SOFT SKILLS!
because you will need them to excel in the Freelance marketplaces
In addition to learning technical skills, you will also need freelancing skills, mostly tips and tricks on how to win jobs and grow your portfolio.
With our expert mentors who are also professional freelancers, we have created a complete freelancing skills course that will take you from a beginner to an expert in no time.
We will teach you how to find appropriate jobs, write proper cover letters and negotiate to get better rates for your work.
Most of the clients in the Freelance marketplaces communicate in English
To help you become better in your communication and negotiation, we will provide you with an Business English course.
We will start with the basics of the English language and we will teach you everything you need to know to communicate effectively with your clients.
Apply Now To Get Started
Click on the button below to apply. We will let you know the results and the timing of the final program.
