In this repository, it will be covered some of the tools needed to develop a website. To make it easier to follow through, those tools are divided into sections which are enumerated on the Files Sections". Also, for each section, there is an article explaining the basics concepts for there tool, a few exercises to illustrate what was taught, and a challenge to measure the understanding of that section. As a recommendation, before looking at the challenge's code, try to do it by yourself. Also, be informed that ALL of the content here is was thought as an introductory level. Without further ado let's begin!
Before learning about web development, it is needed to understand what is the internet and how it works; after all, a website is hosted on the internet.
According to Ian Sample's article on The Guardian¹, "The internet is the wider network that allows computer networks around the world run by companies, governments, universities, and other organizations to talk to one another. The result is a mass of cables, computers, data centers, routers, servers, repeaters, satellites, and wifi towers that allows digital information to travel around the world."(2018) So, basically, the internet is a bunch of people communicating with each other through electronic devices.
In communication, someone sends a message to someone, and on the internet isn't so far from these. Of course, this process is more complex than this oversimplification, but the essence remains true. The foundation of internet is request and response. Bellow, there is a video link explaining this process. How the internet works?
To learn more about the internet, check these links:
Museum of the internet
Stanford: How does the internet works?
13 key questions about the internet
Now that this is clear, what is web development? Web development is the process of creating a website for hosting in the internet or intranet²(TECHOPEDIA, 2020). This process it's divided into two parts: the front-end or client-side, and the back-end or server-side. The first one is responsible for the structure, style, and logic processed by the web browser in the user's machine. Some of the technologies used here are: HyperText Markup Language-HTML(structure of the webpage), Cascading Style Sheets-CSS(style of the webpage), and Javascript-JS(the logic of the webpage). The last part is responsible for the database management, security, and logic processed by the server. This can be done using PHP: Hypertext Preprocessor-PHP, PYTHON(the logic process by the server), and MySQL(database management).
To learn more about web development and what is front-end/back-end, check these links:
Definition
Roadmap
Career
The fundamentals of front-end and back-end development
Front-end Vs Back-end
What is full stack developer: How does it compare to back-end or front-end developers?
- -1 HTML: "is a markup language that defines the structure of your content."³(MOZILLA)
- -2 CSS: "describes how HTML elements are to be displayed."⁴(W3SCHOOLS)
- -3 JAVASCRIPT: "is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions."⁵(MOZILLA)
- -4 JQUERY: "is a fast, small, and feature-rich JavaScript library."⁶(JQUERY)
- -5 BOOTSTRAP: "the world’s most popular front-end open source toolkit"⁷(BOOTSTRAP)
- -6 PHP: "is a widely-used open source general-purpose scripting language that is especially suited for web development"⁸(PHP.NET)
- -7 MYSQL: "is a fully managed database service to deploy cloud-native applications using the world’s most popular open source database."⁹(MYSQL)
- -8 PYTHON: is a really versatile programming language. Here it will be shown the it bases and the Django fullstack framework.
- -9 API: "is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other."¹⁰(MULESOFT, 2020)
¹ SAMPLE, Ian. What is the Internet? 13 main questions answered. 2018. Available at: https://www.theguardian.com/technology/2018/oct/22/what-is-the-internet-13-key-questions-answered. Accessed on: 19 sep. 2020.
² WEB Development. Available on: https://www.techopedia.com/definition/23889/web-development. Access on: sep. 02 2020.
³ GETTING_STARTED_WITH_THE_WEB: HTML basics. Available on: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics. Access on: sep. 02 2020.
⁴ WHAT is CSS?. Available on: https://www.w3schools.com/whatis/whatis_css.asp. Access on: sep. 02 2020.
⁵ WEB: Javascript. Available on: https://developer.mozilla.org/en-US/docs/Web/JavaScript. Access on: sep. 02 2020.
⁶ WHAT is jQuery? Available on: https://jquery.com/. Access on: sep. 02 2020.
⁷ BUILD fast, responsive sites with Bootstrap. Available on: https://getbootstrap.com/. Access on: sep. 02 2020.
⁸ WHAT is PHP? Available on: https://www.php.net/manual/en/intro-whatis.php. Access on: sep. 02 2020.
⁹ MYSQL Database Service. Disponível em: https://www.mysql.com/. Access on: sep. 02 2020.
¹⁰WHAT is an API? (Application Programming Interface). Available on: https://www.mulesoft.com/resources/api/what-is-an-api. Access on: sep. 02 2020.