Getting Started With Web Development

Topics that I am going to cover in this blog post:

  1. Intro
  2. What is Front-End and Backend
  3. Minimum Skills: Front-End Developer
  4. What is Full stack development ?
  5. Where to learn (Best learning resources)
  6. Tools to use
  • Intro

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:

  1. To know where to look for answers
  2. 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

    • Front-End

    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.

    This category is called the front-end and it is created with programming languages such as HTML, CSS, and JavaScript.

    • Backend

    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

  1. 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.
  2. 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.
  3. JavaScript is what breathes life into your HTML & CSS website. JavaScript can make your web page more interactive, alive, and interesting. Have elements appear and disappear when the user clicks on a button, for instance. Or have elements change their size, color, or other attribute when the user interacts with them.
  4. jQuery is a JavaScript library, helping you use JavaScript even more easily and quickly.

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

https://www.freecodecamp.com/

More Free Certifications

  • https://www.edx.org/learn/web-development

  • https://eu.udacity.com/course/web-development–cs253

    Check out this blog post : https://codeburst.io/100-free-resources-to-learn-full-stack-web-development-5b40e0bdf5f2

Tutorials:

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

Learn Javascript (Front End)

JS Mini Projects

HTML, CSS, JS Projects

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 front-end code in JavaScript, HTML, and Java
  • 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

Code Editor

  • 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.
  • Brackets: A lightweight and powerful modern text editor; written in JavaScript, HTML and CSS.
  • Emacs: An extensible, customizable text editor with built-in functions to aid in quick modifications of text and code.

Markdown Editors

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

Tasks runners are all about automating your workflow. For example, you can create a task and automate the minification of JavaScript. Then build and combine tasks to speed up development time. Package managers keep track of all the packages you use and make sure they are up to date and the specific version that you need.

  • Grunt: JavaScript task runner all about automation.
  • Gulp: Keeps things simple and makes complex tasks manageable, while automating and enhancing your workflow.
  • npm: Pack manager for JavaScript.
  • Bower: A web package manager. Manage components that contain HTML, CSS, JavaScript, fonts or even image files.
  • Webpack: A module bundler for modern JavaScript applications.

Web Servers

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

I hope you found some helpful tips and resources in this post on how to become a web developer.

You might also enjoy