If you don't want to go the traditional route and learn one by one, here are courses that cover the entirity of Front-End Web Development:
- Modern Html/CSS from the beginning- TraversyMedia
- The Complete Front-End Web Development Course!- Udemy
- Html-CSS-Javascript-for-Web-developers- Coursera
- Front-End Dev with React- Coursera
YouTube
- Complete Web Development Course - CodeWithHarry
- Complete Web Development Course - FreeCodeCamp/CodingAddict
- Complete Web Development Course - Envato Tuts
HTML is the backbone of the entire page. All the content in the page is given in the HTML. Here are some resources to check out HTML:
- HTML - FreeCodecamp/Giraffe Academy
- HTML - FreeCodeCamp/CodingAddict
- HTML - TraversyMedia
- HTML - W3Schools
- HTML - TutorialsPoint
- HTML - JavatPoint
- HTML - HTML.com
- HTML - CodeAcademy
- HTML - MDN Docs
If you want to make a website very fast there is a really quick way.
Add the following to the title tag. It is Tailwind CSS that allows you to use TailBlocks:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">Then you can use the blocks to add to your code feom the following site:TailBlocks Website
If you want to go down the traditional route, here are some websites to checkout:
- CSS Full Course - FreeCodecamp
- CSS Zero To Hero - Jad Khalil
- CSS - MDN Docs
- CSS - CodeAcademy
- CSS - HTMLDog
- CSS - W3Schools
- CSS - TutorialsPoint
- CSS - JavatPoint
- CSS - CSSTutorial.net
- Bootstrap Docs
- Sass Tutorial - W3Schools
- Sass Tutorial - GetBootstrap
- Sass Tutorial - Mugo
- Sass in BootstrapStudio
- Bootstrap 4 with Sass - Academind
- Sass Tutorial - Dev Ed
- Bootstrap and Sass TraversyMedia
- Bootstrap - Code With Bibek
- Bootstrap 4 Tutorial - Brad Hussey
- Bootstrap 5 and Sass - Thapa Technical
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. You should learn Vanilla JS before starting in any front end frameworks like. Here are some resources to get started:
- Vanilla JS Official Docs
- LearnVanillaJS.com
- Vanilla JS Academy
- Javascript Challenges and Projects
- Javascript Courses - Lynda
- Vanilla Javascript - Traversy Media
- Vanilla Javascript - Dev Ed
- Vanilla Javascript Project Tutorial
- Vanilla Javascript - Online Tutorials
A common question arises among many beginners that why to learn a front-end framework when the same thing can be done by HTML/CSS and Vanilla Javascript?
- It is not possible to write complex, efficient and easy to maintain UIs with Vanilla JavaScript. Another reason is, in VanillaJS the code is highly repetitive and as the complexity of your UI increases, the code gets more ugly and lengthy (spaghetti code), that's where frameworks make your job easy. If you are building small and basic applications, you can use Vanilla JS. To know more about using Vanilla JS or a Framework for your project, read 'THIS ARTICLE'.
There are 4 top Javascript Front end Frameworks in the market currently:
ReactJS is an open-source JavaScript library for building user interfaces or UI components. It was created by developers at Facebook.React can be used as a base in the development of single-page or mobile applications. It was open-sourced in 2013 and has since been the most popular front-end framework in the developer community.
- ReactJS Official Docs
- React Tutorial - W3Schools
- Learn React - CodeAcademy
- React Crash Course - TraversyMedia
- React Course - Programming With Mosh
- React Course - FreeCodeCamp/Bob Ziroll
- React Course - Codevolution
- React Course - Web Dev Simplified
AngularJS is a JavaScript-based open-source front-end web framework created by Google to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.
- Angular Official Site
- AngularJS Tutorial - W3Schools
- Angular - FreeCodecamp/Dan Wahlin
- Angular Tutorial - Programming With Mosh
- Angular Course - FreeCodeCamp/CodeDamn
- Angular Course - Codevolution
- Angular Crash Course - DesignCourse
- Angular 9 Tutorial - PHP Step By Step
- Angular Crash Course - Hitesh Chowdhary
Vue.js is an open-source model–view–viewmodel JavaScript framework for building user interfaces and single-page applications.It was created by Evan You, and is maintained by him and the rest of the active core team members coming from various companies such as Netlify and Netguru.
- VueJS Official Docs
- VueJS Courses - VueMastery
- VueJS Course - CodeAcademy
- VueJS - W3Schools
- Vue Course - LearnVue
- Vue Courses - hackr.io
- VueJS Course - TraversyMedia
- VueJS 2 Tutorial - The Net Ninja
- VueJS Tutorial - PHP Step By Step
- VueJS Tutorial - FreeCodecamp/Gwen Faradays
Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern. It was developed by Yehuda Katz and initially released on in December 2011. It allows developers to create scalable single-page web applications by incorporating common idioms and best practices into the framework.
- Learn EmberJS
- Ember Learn Github Repo
- EmberJS Tutorial - TutorialsPoint
- Learn EmberJS - hackr.io
- Ember.js Guide - Program With Erik
- Master Ember.js
- Ember Tutorials - Scott Batson
- Clone repo and create a new branch:
$ git checkout https://github.com/CSI-SFIT/Web-Development.git -b name_for_new_branch. - Make changes and test.
- Submit Pull Request with comprehensive description of changes.
CSI SFIT Tech Team 2020 - 2021 :
- Tech Joint Head : @Kaif Kohari
- Tech Executive : @Varun-Patkar
- Tech Executive : @Shardul Shroff
