Guide to become a Front-End Developer using Free resources
Tim Berners-Lee wrote a proposal in 1989 for a system called the World Wide Web. He also created HTML (Hypertext Markup Language) in 1990, for the purpose of formatting scientific documents. HTML is a markup language that gives structure and meaning to documents.
These documents were to be viewed on a browser-editor also created by Tim Berners-Lee. This was the first browser that people will recognise today. Although it had a GUI , it did not display images embedded in the text, rather displayed them in a separate window. This browser was named WorldWideWeb and later renamed Nexus to avoid confusion between the World Wide Web and the web browser.
Then came Mosaic, by Marc Andreessen, in February, 1993. It had a GUI and displayed images inline; embedded in pages alongside text, support for sound, video clips, forms support and bookmarks. Soon after it's release Mosaic became the most popular browser at the time. It was also the first commercial browser.
A year after creating Mosaic, Andreessen co-founded Netscape Communications which gave us the Netscape Navigator browser in December 1994 which was once the dominant browser in terms of usage share. On August 23rd, 1995, Microsoft released their Windows 95 operating system, including a Web browser called Internet Explorer. By the fall of 1996, Explorer had a third of market share, and passed Netscape to became the leading web browser in 1999.
Opera was first released publicly in 1996. Although Navigator and Internet Explorer had the largest market share by users, things began to change when Mozilla Foundation released Firefox in November 2004. Google also entered the browser market with Chrome in 2008.
As Internet became more popular and accessible around the world, developers and users became bored of the monotonous structure and style of the webpages. Variations in web browser implementations made consistent site appearance difficult, and users had less control over how web content was displayed. Appearance or presentation of the webpage became important. Developers started using HTML to provide ‘style’ to the webpages at the cost of more complicated code. HTML began to loose it's purpose of providing structure to the content. Now it was also used for presentation. In response CSS (Cascading Style Sheets) was developed to provide style sheets for the web. CSS was first proposed in 1994 and adopted in 1996 by Internet Explorer and Netscape Navigator.
So, let's begin with finding out what's web development like today.
What is Web development ?
Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications (or just 'web apps') electronic businesses, and social network services. A more comprehensive list of tasks to which web development commonly refers, may include web engineering, web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development.
Today we are running entire businesses online with database for thousands of products, displayed on simple to navigate and functional webpage. Security for users data and performance on different connections still remain big cocern today. Today developers do not concern themselves with all aspects of development, instead they specialize in different domains. These domains are :
- Front-End Development
- Back-End Development
- Full Stack Development
What is Front-end development ?
What is Back-end development ?
If you are creating a web application like an e-commerce website or any website that allows users to store, modify and delete the data and access it through interactive user interface; you need to store the data in a database, set up a server for handling user request to access, modify and delete data from database and serve dynamic content when required. A back-end/server-side developer works with PHP, Python, Database( like MySQL, PostgreSQL etc), Servers( like Apache, Nginx etc.) and related libraries and frameworks. Not all websites require a back-end. Product pages and portfolio websites don't need to store any data or generate dynamic web pages.
What is Full Stack development ?
Stack here is collection of software required for Web development such as an operating system (OS), a programming language, database software and a Web server. For some people full stack developer is someone who has mastery over all aspect of web stack. Others might consider a person familiar with entire stack, but specializes in part of technology as full stack developer.
This list provides free resources to help you become a front-end developer. I’ll include resources for back-end technologies once I dive into it. 😄
Jump to whatever section you want :
HTML & CSS
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. HTML is used to define the structure and semantics of your content.
Cascading Style Sheets (CSS) allows you to style your web page once you have structured it. It defines layout of HTML documents.
- HTML Dog
- Interneting is hard
- Learn to Code HTML & CSS
- Learn web development - Mozilla Developer Network
The following websites may prove useful to better understand certain concepts that are usually poorly understood.
- HTML Reference → It features all elements and attributes.
- head Cheat Sheet →
A list of everything that could go in the
headof your document.
- HTML5 Video Events and API → This page demonstrates the new HTML5 video element, its media API, and the media events.
- CSS Reference → It features the most popular properties, and explains them with illustrated and animated examples.
- AtoZ CSS → Screencast teaching popular CSS properties from AtoZ.
- CSS Almanac → A reference guide to the many features of CSS.
- Mastering the :nth-child → Master the :nth-child property.
- How well do you know CSS display? → Learn everything about CSS display property.
- Learn CSS Layout → Fundamentals of CSS Layouts.
- Learn CSS Positioning in Ten Steps → This tutorial examines the different layout properties available in CSS.
- Centering in CSS : A Complete Guide → Different ways for centering things in CSS.
- A Complete Guide to Flexbox → One stop guide to learn Flexbox.
- A Complete Guide to Grid → Learn CSS Grid Layout.
- ES2015 Crash Course → A crash course on the latest and greatest that the language has to offer.
For any front-end developer, tools such as a text editor and browsers provide powerful capabilities. When mastered they make your development process easier and more productive.
This is a list of popular browsers in use. Based on your Operating System (and version) some may not be available for your system.( No worries you are already using your favourite browser now.😄 )
There is also what is called the Developer Edition of popular browsers, that are marketed to developers. These browsers implement the latest technologies, and powerful tools that simplify debugging and testing.
Note: There is also Safari and Microsoft Edge that are available for MacOS and Microsoft Windows respectively.
- Chrome Dev Tools → Explore and Master Chrome DevTools by Code School.
- Firefox Dev Tools → Scroll down to see tutorial videos.
Note: Dev Tools work mostly same on every browser. If you are using browser other than Chrome or Firefox than I suggest that you learn dev tools using Chrome / Firefox.
Default text editors provided by your OS is not exactly productive for web development. There are some great text-editors that provide boatload of functionality. They makes writing and editing code much easier. Mastering your text-editor will boost your productivity and reduce your chances of writing bad code.
Below is a list of popular, free text-editors used for web development.
- Atom → Master atom editor using this tutorial.
- Visual Studio Code → Master VSCode editor using this tutorial.
Nearly every project out there is using a Version Control System (VCS). Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. For whatever reasons, if you want to undo the changes you made across the project or, you want to recover the files you accidentally deleted !
Enter Version Control 😎
Version Control will rescue you by allowing you to restore your project to a previous state. There are many VCS in use today. The most popular is Git which was created by Linus Torvalds, who created the linux kernel. Part of the reason git became popular as it is today is because of Github. Github allows you to host your code online and integrates git for version control.
Use the links below to learn Git & Github.
- Pro Git → Only book you'll need to learn git.
- Git and GitHub for Poets → Excellent video series that teaches you how to use Github and Git.
- Try Git → 15 minutes to get up to speed with git.
This is by no means an exhaustive list of front-end technologies and resources. I will update the related technologies section in future. Meanwhile, these are some more guides/roadmaps that will surely help you. Do check them out.