What is Front-End Development
Frontend development is the development of the user interface of a website or mobile application.
Parts of FE Development
There are several parts to it. For the sake of this guide, I will be dividing it into two broad spectrums.
Web Development.
Mobile Development (Apps).
Please note that Mobile app development typically involves building the user interface and functionality of mobile applications for the Android and iOS operating systems. While mobile development involves many of the same skills and technologies as frontend development, such as Java and XML, it is not typically considered to be a subset of frontend development.
Frontend development is more focused on web-based applications and involves designing and building the user interface of websites and web applications using HTML, CSS, and JavaScript. While there is some overlap between frontend development and mobile app development, they are generally considered to be distinct disciplines with their own specific skill sets and technologies.
That being said, some frontend developers may also have experience with mobile app development, including Android development. Likewise, some Android developers may have experience with frontend technologies and techniques. Ultimately, the specific skills and knowledge required for a given job will depend on the employer's requirements and the nature of the project at hand.
Web Development
Web development is the development of the user interface of a website using HTML, CSS and Javascript. These three are the basic languages of web development, but there are frameworks and libraries built on these languages that can be used to make development easier, faster and more interactive. Examples include ReactJS, TailwindCSS, VueJS, Bootstrap etc.
The Basics.
HTML
HTML[HyperText Markup Language] is used to structure a web page and its content
Resources
CSS
CSS[Cascading Style Sheet] is used to style a web page and its content.
Resources
Javascript
Javascript is used to add interactivity to a web page, it also connects the frontend to the backend.
Resources
Frameworks
A framework is a tool that provides ready-made components or solutions that are customized to speed up development. I will be dividing them into two.
CSS Frameworks and Javascript Frameworks.
CSS Frameworks.
TailwindCSS
Bootstrap.
Please note that there are more but these are easier to grasp and use.
TailwindCSS
Bootstrap
Javascript Frameworks/ Libraries
ReactJS: React is a Library and not a framework.
VueJS
Please note that there are more but these are easier to grasp and use.
ReactJS
VueJS
IDE
IDE which means integrated development environment is the software application that programmers use to write code. Several IDEs can be used for web development but one of the most preferable is Visual Studio Code.
How to use VS Code
Other things to note
Resources - YouTube, Freecodecamp, W3Schools.
Certificates - Freecodecamp, Cousera(Financial aid available).
Assignment. - Youtube page
Version Control - Git and GitHub
Free hosting - Netlify, Vercel, GitHub Pages, Google Cloud,
Resume building with projects
Javascript Data structures and Algorithms.
Android Development
Android development is the process of creating applications that run on the android operating system. Several languages that can be used e.g. React Native, Flutter, Kotlin, Xamarine, Golang, Cordova, Java.
I will be expounding React Native and Flutter. One of the main advantages of these two is that they are built on Javascript, which means that coming from a web development angle they are easy to pick up.
Also, they are both cross-platform languages, which means you can use them to build multiple platforms. Eg. React Native can be used to write mobile applications for Android OS and iOS, while flutter can be used to write Mobile Applications, desktop applications, embedded systems and web development. In fact, ReactJS and React Native are the same language except for a little difference in the Markup for React Native.
Flutter
Device Requirements
React Native
IDE
Visual Studio Code
iOS Development
iOS application development is the process of making mobile applications for Apple hardware, including iPhone, iPad and iPod.
The major device requirementsfor iOS development is a Macbook with macOS Monterey [Version 12.6.2] which can successfully run the latest version of XCode as of the day of writing this guide.
Native iOS apps are written in Objective-C. This is the primary language for iOS apps. Thankfully, there are others e.g. Swift, Flutter and React Native. I will only be expounding on swift in this section.
Swift