Topics that I am going to cover in this blog post:
- What is Front-End and Backend
- Minimum Skills: Front-End Developer
- What is Full stack development ?
- Where to learn (Best learning resources)
- Tools to use
I keep reading from blogs, career pages and hearing about the minimum requirements for becoming a web developer all the time. And I remember asking that same question back when I first started learning web development. I felt confused and insecure about whether I knew enough to start working or applying for freelance projects.
What always put me off a bit was the sheer number of tools I thought I needed to learn right away. It just seemed so overwhelming and I thought it would take years before I mastered any of them properly.
So even though there are lots of languages and technologies listed in this post, let me tell you this: you don’t need to know everything about even the most basic tools. Good enough is good enough!
Hence, you will never have perfect skills in any programming language. Instead, you will learn the basics first and build on top of that.
Therefore, when you’re thinking about how to become a web developer, what is more important is:
- To know where to look for answers
- To use your skills for building projects for your portfolio
It’s as simple as that. These two points will get you pretty far, I promise.
What is Front-End and Backend
Appearance is the part of the website that is visible to the user, i.e. to you and me. This includes the content itself, like text and images, as well as any styling that is used to make the interface more appealing and interesting.
Logic determines the underlying dynamics of the web project. In other words, what you see and when while using a web application or a website, is determined by its logic.
The logic is part of the back-end of a web project and developers responsible for it work with programming languages like PHP, Python, and Ruby.
And there’s storage also.
Storage saves any data that is generated by the website or its users. For instance, when you create a user profile on a website, your information must be stored somehow. That way, when you visit the website later on, your information is simply retrieved so that you don’t have to start from scratch every time.
Storage is also part of the back-end and it uses databases like MySQL and MongoDB.
MINIMUM SKILLS: FRONT-END DEVELOPER
- HTML or HyperText Markup Language - creates the structure and contents for a website. Headings, paragraphs, links, images, lists, and much more – you will create all of those using HTML.
- CSS or Cascading Style Sheets is what you will use to make your HTML contents look beautiful. CSS is responsible for the look and feel of a website. Colors, typography, sizings, positionings, alignments, and basic animations are what CSS can do for you.
You can learn the basics of all of these in a matter of days and weeks or maybe in a month if you give enough time to learn.
KEEP THIS IN MIND
The moment you can work on real-life projects and create something out of nothing with code, you are a developer.
Where to learn (Best learning resources)
One of the best - You can learn web development from freecodecamp with certification for free
More Free Certifications
Check out this blog post : https://codeburst.io/100-free-resources-to-learn-full-stack-web-development-5b40e0bdf5f2
I came across a wonderful YouTube channel - Traversy Media. Brad Traversy makes amazing tutorials to learn full web development. Traversy Media is one of the highest recommended channels in subs related to learning to code. Personally this channel has helped me a lot to learn, grow and become a better developer.
Learn Basic HTML, CSS
- Front End – HTML Crash Course
- Front End – CSS Crash Course
- CSS rem & em units
- CSS3 Animations + Transitions Crash Course
- CSS Variables
- CSS Flexbox
- CSS Grid Crash Course
- Emmet for Faster HTML + CSS
- JS Fundamental for Beginners
- JS ES6 Introduction
- JS DOM Crash Course
- JS Higher Order Functions & Arrays
- JS Cardio Part-1 and Part-2
- JS OOP Crash Course – ES5 + ES6
- Ajax Crash Course
- Learn Fetch API
JS Mini Projects
- JS Project – Star Rating with JS & Font Awesome
- JS Project – Reddit Search App – JS + Fetch + Parcel
- Zipcode APP – Fetch + Bulma
- Number Facts – Vanilla JS + Ajax + Fetch
- Filterable List using JS
- Google Maps Api
- Google Geocode API
- Facebook Login + GraphAPI
HTML, CSS, JS Projects
- Fancy Form UI – HTML + CSS (with SASS) + JS
- Responsive Mobile First Website Theme – HTML + CSS
- Drag & Drop using vanilla JS
- CSS Spinners
- Responsive Coming Soon Landing Page
- Social Media Accordion with CSS 3 Transitions
- Image Filter App with CamanJS
- Travel Agency Theme with Materialize CSS
- Front End Project – Responsive Grid CSS Website Layout
- Webcam Filter & Picture App – WebRTC + Canvas
- Split Landing Page
- Create a Sortable & Responsive Grid with Muuri
- Grid CSS Responsive Website Layout
- Full Screen Image Slider
- Full Screen Video Background – HTML + CSS
- Split Screen Slider using JS
- Modal using HTML, CSS & JS
- Bootstrap 4 Theme (using beta version)
- Full Screen Landing Page
- Responsive Contact Form
- Basic Parralax Website
- Responsive Side Menu
- Front End Project – HTML + CSS Theme using FlexboxGrid
What is Full stack development ?
Full stack development process involves development of front and back end portions of a website. The developer needs to deal with multiple stacks including operating system, programming language, Web server, and database server. There are three layers of full stack development, these are- Database Layer, Presentation layer (front end portion dealing with the user interface) and Business Logic Layer (back end portion dealing with data validation).A full stack expert boasts functional knowledge and proficiency in handling all the aspects of application development. The developer is skilled in-
- Writing backend code in Java, Python and Ruby
- Security and Networking
- Dealing with APIs
- Client coordination and Project management
- Creating, querying and understanding databases
- Handling complete system infrastructure including OS and hardware
It takes immense hard word, dedication and focus to become a high-profile full stack developer.
Tools to use
- Atom: A text editor that’s modern, approachable, yet hackable to the core. One of our favorites!
- Sublime Text: A sophisticated text editor for code, markup, and prose with great performance.
- Notepad++: A free source code editor which supports several programming languages running under the MS Windows environment.
- Visual Studio Code: Code editing redefined and optimized for building and debugging modern web and cloud applications.
- WebStorm: Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.
- Vim: A highly configurable text editor built to enable efficient text editing.
- Emacs: An extensible, customizable text editor with built-in functions to aid in quick modifications of text and code.
Markdown is a markup language in plain text using an easy syntax that can then be converted to HTML on the fly.
- StackEdit: A free online rich markdown editor.
- Dillinger: An online cloud-enabled, HTML5, buzzword-filled Markdown editor.
- Texts: A rich editor for plain text.
Git Clients / Services
Git is a source code management system for software and web development known for distributed revision control. When working with teams, using a git client to push code changes from dev to production is a way to maintain the chaos and ensure things are tested so they don’t break your live web application or site.
- GitKraken (Beta): A free, intuitive, fast, and beautiful cross-platform Git client.
- Tower 2: Version control with Git – made easy. In a beautiful, efficient, and powerful app.
- GitHub Client: A seamless way to contribute to projects on GitHub and GitHub Enterprise.
- GitLab: Host your private and public software projects for free.
Task Runners / Package Managers
- Gulp: Keeps things simple and makes complex tasks manageable, while automating and enhancing your workflow.
The web server you ultimately end up using will usually depend on a combination of personal preference, functionality, or preexisting infrastructure. Nginx and Apache are the two most widely used web servers around, however, there are other options.
- Nginx: An open source and high-performant web server. Handles static content well and is lightweight.
- Apache: Currently powers almost 50% of all websites. Has a larger community around it and a great selection of modules.
- IIS: An extensible web server created by Microsoft. Offers excellent security and corporate support, therefore is not open source.
- Caddy: A relatively new web server. It is an open source, HTTP/2 web server with automatic HTTPS.
Local Dev Environments
Depending upon what OS you are running or the computer you currently have access to, it might be necessary to launch a quick local dev environment. There are a lot of free utilities that bundle Apache, mySQL, phpmyAdmin, etc. all together. This can be a quick way to test something on your local machine. A lot of them even have portable versions.
- XAMPP: Completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl.
- MAMP: Local server environment in a matter of seconds on OS X or Windows.
- WampServer: Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.
- Laragon: A great fast and easy way to create an isolated dev environment on Windows. Includes Mysql, PHP Memcached, Redis, Apache, and awesome for working with your Laravel projects.
Web Development Communities
- Stack Overflow: Community of 4.7 million programmers, just like you, helping each other.
- Front-end Front: A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community.
- Hashnode: Global community for software developers to connect and learn programming from each other.
- Refind: Community of founders, hackers, and designers who collect and share the best links on the web.
- Google+ Web Developers Group: Web developers, web designers, and web coding.
- Facebook WordPress Front-end Developers Group: WordPress Front End Developers is a group for devs to ask questions, share their work, discuss emerging trends, and collaborate.
- LinkedIn Web Design and Development Professionals Group: Networking and information sharing resource for professional Web Designers, Web Developers and Web Masters.
- LinkedIn Web Site Development Group: Website design & programming.
- LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
- LinkedIn WordPress Developers Group: WordPress Codex. Using WP as CMS and CMF.
- Sitepoint Forums: Web development discussion.
- /r/perfmatters: The #1 subreddit about web performance and web development.
- /r/webdev: What’s new for web developers.
I hope you found some helpful tips and resources in this post on how to become a web developer.