In this certificate program from meta I will be learning react development but it will be devided into parts that are individual courses and its through these courses I will have to build some websites and increase my skills, luckily everything will be available on github and hence will be there for the public to track.
web developer roles can be categorized into
- Front End
- Back End
Front End Developer Is involved in creation of the user experience that a user can interact with this require a knowledge of -HTML -CSS -JS
Some CSS frameworks like -Bootstrap -Tailwin -Material CSS
JavaScript Library and Frameworks such as -React -Angular -Meteor
A fron end dev might also need knowledge of UX design if they are going to work alone
BackEnd Developer Is developing the back end parts of the website. some of the back end technologies are -Databases -BackEnd programming languages and framework -PHP -Python Django and Flask -NodeJS -APIs -REST -RPC -and some basic idea on server configuration and manipulation and networking
FullStack Developer Is the type of developer that does both backend and front end Dev of this role are usual seniors with a number of years in the industry the deal with everything from server setup, project design,server adminstration, networking, writing of databases, implementation, developing of APIs and consuming APIs and developing front ends.
A day in life of the Front End Engineer by Benedict Hobard a software engineer at Meta
He explain that the day of the software engineer at meta is usual spent with designers and project team and some time is spent building the decided designs agreed to be built
Front end engineer work with people to build solution for people not just hiding in the office working alone. What excites most times is building something your excited about.
People collaborate with are designers, project managers and other developers.
In order to stay focused always have a purpose. When solving a really hard problem its easier to think your not making any progress and when ur nt making any progress you feel like an imposter. Technical things you need to know are how to write code, make it accessible and responsive
A software engineer job is to get the designs to live as a website. Problem solving is hard but you still need to push while going easy on yourself, adopt a growth mindset and keep going. And take time off when you can't seem to wrap your head around the road blocks
In this course we are going to build a little lemon project that will be a product that is to be built by this course but I am doing to build my own portifolio website too.
HOW THE INTERNET WORKS:
Searching online comes naturally to many of us, search something is like snap of a finger write some sentence then boom you get a reply very quick. BUt how does all of this happen? Here is how based on this course: . Communication is enabled through the computer network that enable computers to communicate with each other. This network can be wired or wireless, a network span world wide and famously known as the internet. According to the auther the network connect to other networks through routers but according to my IT knowledge these network communicate with other networks throught routers and only use switches at industry level. Not bad but when we are using apps that have data that is remote we are communicating with servers (these are computers) that store the needed material that we are accessing through the internet and the computer that request for these material are called clients. This type of communication is called the client server model type of communication/architecture
But what is the web server?
The server is a computer that run applications that serve thr services that are accessed remotely, the server is connected tot he internet 24/7 and constantly running without stopping, servers are usual in data centers where are constantly cooled and mantained. Server represents both the hardware and the software that work together. The type of server we are interest with here is the web server that hosts the website we are working with. some of the functionality of the web server includes the web hosting, web storage, management and database management and control as well as email address managemen. It also management web request, this is a process of responding to web client requests and return what was asked about. Servers can respond to too many request per minute from different clients world wide
What are websites and web pages?
A web page is a a computer file that annotates the structure of web content such as images, videos and texts and how they are arranged on it. Collection of webpages that are linked to one another is what is called as a website but these files have to be stored in the same server directory and talk to each other probably share the same domain name and data store
when all pages have a similar web address they are called of the same website. web pages dont have to link to the same website they may link to resources on other websites.
But how are they written?
Web pages are usual written in web editors, these editors use web technologies to write individual technologies and link them to one another
Core technologies used to build websites are
HTML - it is used to structure the content that are used as foundaton for the web CSS - used to arrange the content and give it a great presentation JS - Add some functionality interactivity to the website, what to happen when a button is clicked or what should happen when something has been loaded
HTML create structure through the mark up tags (markup tags are less than keywords that are ended with greater than tag and these when combined make up the web page, this is called html description. CSS tells the browser how to show the HTML description. JS cause interaction with the user. JS is a power house of the webpage and can manipulate the content and styles.
Page rendering is a technique of displaying the website to web browser after all the content have been downloaded in order for a page to be rendered it is required to be completely downloaded together with other styles that are required
Rendered content is what the user sees.
What is the web browser?
Is an application software that is used to render web pages so users can interact with. It is what is known as client to the server, a web browser has an address bar that a user can enter the address to the website. The browser send the request to the server through the hypertext transport protocol and this request is then responded by the server to client computer and create the the web content.
This type of communication is known as a request response circle.
Web hosting,is the commercial system that allowe devs to place their websites without owning the equipments. Hosting can be available in various forms such as
- Shared hosting
- Virtual Private hosting
- Dedicated hosting
- Cloud hosting
Shared hosting: Is the cheapest type of hosting, you share with other website the resources such as RAM, CPU, and storage this might slow down your website.
It has a physical server with web server services that devide ownership of each site to its own directory and program
This option is good for website of small websites with small number of visitors, practice enviroment and it is sometime free with limitations.
Virtual Private Servers (VPS) These have more demand than other type of websites It is a physical device that is devided into VPS that each individual hosting an individual site
more expensive than shared hosting
Dedicate hosting You get a dedicated physical server with all its resources that is connected to the internet, this is very expensive and is only needed when the site is having so much demand than usual.
Cloud server:
Is the type of server that has a physical space but all the resources appear as if they are from a physical machine but in real sense these servers are virtual. these are more expensive than VPS na and have low limitations
Addition resources on server and web hosting
Learn more Here is a list of resources that may be helpful as you continue your learning journey.
What is a Web Server? (NGINX)
https://www.nginx.com/resources/glossary/web-server/
What is a Web Browser? (Mozilla)
https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/
Who invented the Internet? And why? (Kurzgesagt)
What is Cloud Computing? (Amazon)
Browser Engines (Wikipedia)
https://en.wikipedia.org/wiki/Browser_engine
CORE INTERNET TECHNOLOGIES
Email addresses are the most common way of communication across the internet. But before email addresses, there was postal mail. that relied on the postal address to ensure packages and mails are delivered to the intended individuals, but with advancement in internet communication there was birth of internet protocals addresses, famously known as IP addresses, the new addresses enable individuals across the internet to communicate. As postal address ip addresses can go wrong. IP addresses are the backborn for communication across the internet without them nothing is communicated by computers.
There exist two types of IP addresses one being the IP version 4 and the IP version 6 The former is the oldest the later is a new one that is better and has alot of addresses In IPv4 there are 4 groups of decimal number, each group has a size of 8 bits and that make up about 32bit of the size of the address number, these octates are separated from one another through the dot sign IPv6 has 8 groups of hexadecial numbers separated by a colon from one group to the other group. hence IPv6 has a size of 64bit which means it can accomodate more IP address than IPv4. Each group of the 8 groups has also the size of 8bits hence the hexadecimal has a size of 64bit
Browsers use the internet protocal to communicate
in the Transport layer there are two methods of delivering packets from one node to another
The reliable one called TCP/IP and the unreliable one called the UDP/IP these protocals work with the IP protocal to deliver packets across the network. when a website is requested its requested through the HTTP protocal that is the main protocal for transfering markup files and these files are delivered to the client through the TCP and UDP protocols accordingly, when these request are sent are also sent through these protocols
TCP transmission control protocol and UDP is user data gram protocol
IP packets have scructure the main parts are the the IP header and the IP Payload. these are the overview structures, the IP header has source and destionation IP address and the payload contains the data that is being communicated
TCP handles correct delivery of data i.e how data is arranged if it is delivered correctly or not and in order and if there are errors if they are corrected. UDP doesnt care about that. It only cares about the delivery of files hence it is used for video chats and and voice call streams, though UDP solve the corrupt packet issues but does not order them neither does it ensure they are delivered on the other end.
each of these protocols a inside a payload and each protocol has its own payload.
HTTP:
Hypertext transport protocol is a reqiest responcse based protocol. It involve a client sending a request to the server and a response being sent back.The request is called an http request and the response is called an http response
Structure of an HTTP request an HTTP request contain the method eaither get or post path we are requesting access to and version of http and other headers such as client type and the language a file should be written in when sent back to us
Method describe the task the server must perform in order to complete our request example of methods that we usual have are
- GET - retrive the data from the server
- POST - sends the data back to the server 3 PUT - updates the data to the website
- DELETE - deletes the data that we are trying to access Path is a representation of where the resource is stored on the web server
HTTP response
has the header and a message body that contain the response content on the header there contain the http status codes such as 200 which means the activity completed succesfully status codes range from 100 to 999 these status codes are are grouped by purpose status message is the text representation of the status code
Status codes are grouped into five groups which are 100-199 are information codes (are interim request that is they tell the client to continue when more files are expected) 200-299 are succesful codes (succesful processed status codes here one of the success status is 200 which means ok) 300-399 are redirection codes (redirect method) 400-499 are client error is caused by the client asking for something that is not permitted or not available for accessing from the server hence the server may return the error that this is not possible 500-599 are server error explain is caused by the server failing to fulfilling its functionality due several reasons maybe a method is not supported or it not understanding the request and perceive it as error from the server
HTTPS: is just http with secure shell layer, the layer encrypt the message everytime the request is sent and the server then decrypt the file on the end and respond with the encrypted file too.
INTRO TO WEB DEV TECHS There are essentially three technologies used to develop front ends of the website. These generally include HTML,CSS and JavaScript
HTML creates the structure that is to be displayed, CSS arranges the content into presentable content that can be viewed easily and understood perfectly. JavaScript adds interactiviy and make it functional for users while they are interacting with the system. This way people get to interact with the website easily.
Other protocols that we are goint to create and learn are as follows
When your computer is connected to the internet it is assigned an IP address by a server called the dynamic hosting protocol protocol server, this server and the computer communicate over the UDP protocol during this process and it assigns all computers their individual IP dynamically and how to communicate between themselves. Once the computer has an IP address it can communicate with other computer on the network easily.
See computers dont use words to communicate but numbers for the case of networks they use IP address to communicate and find each other on the network. when a user enter the domain name on the url bar the computer then sends a request to domain name system server asking for the IP address associated with the domain name for it to find the computer it wants to reach to cause RRC call, when it receives this response it will then send an HTTP header to the server where it is trying to request for the service then the server will respond.
Other protocols are IMAP internet message access protocol is a protocol used to access the email on the email server, does not delete the files on the server hence the copy is only download and it is good if you wanna have more than one device accessing the email server
POP3 is a post office protocol it downloads all the email from the server and removes them from server to local storage, it is not good if you use more than one device to access your email server. version 3 is a message access protocol for email servers the difference between it and the IMAP is that POP3 deletes emails from the server and download them to the local client
FTP is a file transfer protocol it is used to move files between computers that are connected on the network, this protocol is used to send,download and change files between servers and client, it is used to upload website to servers, using an ftp client that is usual located on the developer machine. example of such client are filezilla. in order for this to be possible we need the FTP server to be present on the opposite end i.e the server.
SSH is a short form of secure shell is a way to login to remote server using the terminal command line interface, this method is current one replace the telnet that used to be used before, it is more prefered because it the data sent through this method is encrypted
SFTP is a secure version of FTP and it encrypts the data sent between the FTP server and the client, this method is good when transfering the files that are sensitive.
Web Page, Website and Web App what is the difference?
A web page is a single page written with mark up language that is html and having the mark up language extension
A website is a collection of web pages linked to one another using the hypertext link and all belonging to the same domain name.
Hyper links or links dont have to link to the same website they can link to other websites as well and other resources.
WebApp and Website are names used interchangebly, but the web app and website difference is a level of interactivity and dynamic content.
Web App is interactive and a website is informative
An interactive website, allow the user to send information to the server that can be used to get something to do with it.
A website ont the other hand is just showing the same content regardless of whom is interacting with it.
Developer tools:
These are the tools that are available on the website browsers that enable developers to check on the website performance, and even why it doesnt behave as expected. some of the tabs and what they do are as follows
The element tab shows all the html and css code that the website has and how to interact with it.
The console tab shows the javascript logs from the webpage and if there are any errors in the code that is running.
Sources show all the files that are now viewed, including the html,css and even javascript
In the network tab you can inspect the time for http request, http headers and http responses and what content are containerd in them.
Performance tab show what the website is doing, it is used to track functionalities that slows down your website and what you should do to reduce the load time
Memory tab pin point parts of ur website that consume most of the resources.
on the Element tab if u select an element the browser highlight it on teh view port and if you click on the element twice the browser allow you to hot edit it.
FrameWorks and Libs
Frameworks:
Library: are reusable pieces of code that can be used for implementing common tasks
Frameworks are structures that developer can write their own code to implement functionality for the framework but the framework has all its structure and methods it supports
MOst frameworks use libraries, it can be libraries that came with the code or third party libraries.
You must know when to use a lib and when to use a framework
Libs are not opinionated and frameworks are opinionated.
Framework are good for reduce development time but they also enforce the structure that is common for all devs.
Sometime libs can enter into conflicts with libs.
what is an API?
Application programming interface: is a procedure,service offering advanced functionality with simple syntax API is open for many application and use cases. common APIs are browser APIs,
APIs are a bridge between systems, it can also called middle ware, web storage API, REST API
DOM API turn html into tree of objects that JS can interact
Representation state transfer: is a set of principles that enable building highly efficient APIs
Most REST APIs send and receive data to and from the central data server
Additional Resources for Module ONE Learn more Here is a list of resources that may be helpful as you continue your learning journey.
HTTP Overview (Mozilla)
https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
Introduction to Networking by Dr.Charles R Severance
https://www.amazon.com/Introduction-Networking-How-Internet-Works/dp/1511654945/
Chrome Developer Tools Overview (Google)
https://developer.chrome.com/docs/devtools/overview/
Firefox Developer Tools User Docs (Mozilla)
https://firefox-source-docs.mozilla.org/devtools-user/index.html
Getting Started with Visual Studio Code (Microsoft)
https://code.visualstudio.com/docs
MODULE TWO:
In order to build a building you need a frame from which the building will stand on. HTML stands for hypertext mark up language. Here hypertext means links and mark up means tags and elements that are used to identify content on the html document. HTML was first create by a Physist Tim Berna-Lee in 1991 while he was working at CERN. It was released together with its web browser, and server.
HTML has a structure that it follows and it is saved as text file with dot html extension on it.
Anatomy of an HTML document starts with a tag, a tag is a less than sign name then greater than sign together as a single component, when tags are combined together they make up an element. Some tags have a closing tag, that is it has a less than sign together will the forward slash following it before the tag name example tag name usual represents what it does or type of content it deals with. some tags carry content and others don't carry content if an element is not containing any content there is no need for it to have a closing tag you can just have a forward slasha the end of the name or no forward slash at all. example of elements that do not need a closing tag are the meta image and more these usually use attributes to deal with content they are representing
Attributes are featuers that are written on the opening tag to add functionality to the element they are written in a form of key value pair separated by a an equal sign the value is usual put inside some quotes whether double or single. Some values do not need quotes especially those that require boolean values example the true and required
Some of the most common tags are the paragraph tag which is written as
and the html tag written as this is known as a root element as it borrows some ideas from the tree structure.In order to write an html document one needs to first create a html root element
in between the html root element there needs to be two child elements one being the head element and the second one being the body element. these two elements are siblings to one another none visible content goes here man visible content goes hereThe good thing about html is that you dont need a web server to view them, you can save them as local files and view them on the web browser
before you write html root element you first type the doctype declaration which notifies the browser that your about to start coding the the html.
meta tag is used to write the meta data
Simple HTML tags There are many tags available in HTML. Here you will learn about common tags that you'll use as a developer.
Headings Headings allow you to display titles and subtitles on your webpage.
12345678
The following displays in the web browser:Heading style displayed in browser Paragraphs Paragraphs contain text content.
12345
This paragraph contains a lot of lines but they are ignored.
The following displays in the web browser:Paragraph style displayed in browser Note that putting content on a new line is ignored by the web browser.
Line Breaks
As you've learned, line breaks in the paragraph tag line are ignored by HTML. Instead, they must be specified using the
tag. The
tag does not need a closing tag.
12345
This paragraph
contains a lot of lines
and they are displayed.
Line breaks displayed in browser Strong Strong tags can be used to indicate that a range of text has importance.
123
No matter how much the dog barks: don't feed him chocolate.
The following displays in the web browser:Text with strong tag displayed in browser Bold Bold tags can be used to draw the reader's attention to a range of text.
123
The primary colors are red, yellow and blue.
The following displays in the web browser:Bold text displayed in browser The following displays in the web browser:
Text with strong tag displayed in browser Bold tags should be used to draw attention but not to indicate that something is more important. Consider the following example:
1 The three core technologies of the Internet are HTML, CSS and Javascript. The following displays in the web browser:
Bold text displayed in browser Emphasis Emphasis tags can be used to add emphasis to text.
123
Wake up now!
The following displays in the web browser:Text with emphasis tag displayed in browser Italics Italics tags can be used to offset a range of text.
123
The term HTML stands for HyperText Markup Language.
The following displays in the web browser:Italic text displayed in browser Emphasis vs. Italics By default both tags will have the same visual effect in the web browser. The only difference is the meaning.
Emphasis tags stress the text contained in them. Let's explore the following example:
1 I really want ice cream. The following displays in the web browser:
Text with emphasis tag displayed in browser. Italics represent off-set text and should be used for technical terms, titles, a thought or a phrase from another language, for example:
1 My favourite book is Dracula. The following displays in the web browser:
Italic text displayed in browser Screen readers will not announce any difference if an italics tag is used.
Lists You can add lists to your web pages. There are two types of lists in HTML.
Lists can be unordered using the
- tag. List items are specified using the
- tag, for example:
123456
- Tea
- Sugar
- Milk
This displays in the web browser as:
Bullet style displayed in the browser img10 Lists can also be ordered using the
- tag. Again, list items are specified using the
- tag.
12345
- Rocky
- Rocky II
- Rocky III
Numbered list style displayed in browser img11 Div tags A
tag defines a content division in a HTML document. It acts as a generic container and has no effect on the content unless it is styled by CSS.The following example shows a
element that contains a paragraph element:123
This displays as the following in the web browser.This is a paragraph inside a div
Div displayed in browser img12 It can be nested inside other elements, for example:
12345
This displays in the web browser as:This is a paragraph inside a div that’s inside another div
Div inside a dive displayed in browser As mentioned, the div has no impact on content unless it is styled by CSS. Let’s add a small CSS rule that styles all divs on the page.
Don't worry about the meaning of the CSS just yet, you'll explore CSS further in a later lesson. In summary, you're applying a rule that adds a border and some visual spacing to the element.
1234567891011
<style> div { border: 1px solid black; padding: 2px; } </style>This is a paragraph inside stylized divs
This displays in the web browser as:
Paragraph in stylized div displayed in browser img13 Div elements are an important part of building webpages. More advanced usage of div elements will be explored in another course.
Comments If you want to leave a comment in the code for other developers, it can be added as:
The comment will not be displayed in the web browser.
Intro to the DOM The DOM is an tree like structure of an HTML document that is exposed to by the browser that JavaScript can interact with.
Each node on the tree represents a single html element that can be manipulated by javascript on an html tree
the structure is like html is a root and has two child nodes which are then containing more other child elements. web pages have 100 of elements which are related to their ancestors.
Uses: You can access the content on the html example a digital clock that is constantly updated by the js
Many frameworks rely on the DOM example react
WEB ACCESSIBILITY is supervised by the web accessibility ininitiave and to help the people with disability to use ur website it is recommended to use the semantic html and allow access to assistive technology to navigate ur device without any problem.
Additional Resources Learn more Here is a list of resources that may be helpful as you continue your learning journey.
HTML Elements Reference (Mozilla)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
The Form Element (Mozilla)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
What is the Document Object Model? (W3C)
https://www.w3.org/TR/WD-DOM/introduction.html
ARIA in HTML (W3C via Github)
https://w3c.github.io/html-aria/
ARIA Authoring Practices (W3C)
https://www.w3.org/TR/wai-aria-practices-1.2/
CSS BASICS is a language that is used to decorate and arrange content of the web page. In order to affect content you first need to select them and manipulate them on the css
5 things that a developer needs to understand before coding CSS are
Declaration block: a pair of curly braces Declaration: is a key value pair of properties separated from their values with a colon selector: indicate an element or elements u want to style, you can select by using an element name, identity, class, you can select based on the attributes too
Different types of selectors When styling a web page, there are many types of selectors available that allow developers to be as broad or as specific as they need to be when selecting HTML elements to apply CSS rules to.
Here you will learn about some of the common CSS selectors that you will use as a developer.
Element Selectors The element selector allows developers to select HTML elements based on their element type.
For example, if you use p as the selector, the rule will apply to all p elements on the webpage.
HTML
12
Once upon a time...
In a hidden land...
CSS123 p { color: blue; } ID Selectors The ID selector uses the id attribute of an HTML element. Since the id is unique within a webpage, it allows the developer to select a specific element for styling. ID selectors are prefixed with a # character.
HTML
1 New! CSS
123 #latest { background-color: purple; } Class Selectors Elements can also be selected based on the class attribute applied to them. The CSS rule has been applied to all elements with the specified class name. The class selector is prefixed with a . character.
In the following example, the CSS rule applies to both elements as they have the navigation CSS class applied to them.
HTML
12 Go Back
Go Forward
CSS123 .navigation { margin: 2px; } Element with Class Selector A more specific method for selecting HTML elements is by first selecting the HTML element, then selecting the CSS class or ID.
The example below selects all p elements that have the CSS class introduction applied to them.
HTML
1
CSS
123 p.introduction { margin: 2px; } Descendant Selectors Descendant selectors are useful if you need to select HTML elements that are contained within another selector.
Let's explore an example.
You have the following HTML structure and CSS rule.
HTML
1234567891011
CSS
123 #blog h1 { color: blue; } The CSS rule will select all h1 elements that are contained within the element with the ID blog. The CSS rule will not apply to the h1 element containing the text Archives.
The structure of a descendant selector is a CSS selector, followed by a single space character, followed by another CSS selector.
Multiple descendants can also be selected. For example, to select all h1 elements that are descendants of div elements which are descendants of the blog element, the selector is specified as follows.
CSS
123 #blog div h1 { color: blue; } Child Selectors Child selectors are more specific than descendant selectors. They only select elements that are immediate descendants (children) of a selector (the parent).
For example, you have the following HTML structure:
HTML
12345678
If you wanted to style the h1 element containing the text Latest News, you can use the following child selector:CSS
123 #blog > h1 { color: blue; } This will select the element with the ID blog (the parent), then it will select all h1 elements that are contained directly in that element (the children). The structure of the child selector is a CSS selector followed by the child combinator symbol > followed by another CSS selector.
Note that this will not go beyond a single depth level. Therefore, the CSS rule will not be applied to the h1 element containing the text Today's Weather.
:hover Pseudo-Class A special keyword called a pseudo-class allows developers to select elements based on their state. Don't worry too much about what that means right now. For now, let's look at how the hover pseudo-class allows you to style an element when the mouse cursor hovers over the element.
The simplest example of this is changing the color of a hyperlink when it is hovered over. To do this, you add the :hover pseudo-class to the end of the selector. In the following example, adding :hover to the a element will change the color of the hyperlink to orange when it is hovered over.
CSS
123 a:hover { color: orange; } This pseudo-class is very useful for creating visual effects based on user interaction.
Other Selectors There are many other CSS selectors available to style your webpage.
To link to the css we use the link tag with href and rel and type rel tells how the css file relate tot he html file type ins a mime type and href links the file to html
CSS precedence: is a rule that govern which selector is chosen first when multiple selectors are present
BootStrap Learned about BootStrap how it works, and how I can use it to build UIs quickly BootStrap works by using the containers that are used to contain rows and columns that are used to created a simple website that is dependant on the bootstrap framework from this link
Programming with JavaScript
I have started to a second course on programming with javascript as part of 9 courses that I am supposed to study towards the react developer, road
I have already explored how to declare variables using var keyword, read some data types such as string, numbers, boolean, bigInt, and also learned some operators such as +,-,*,** bitwise operators such as or ||, AND && and ! NOT and the comaparison operators such as > greater than, < less than and the >= greater than or equal and the <= less than or equal. Also read the how to declare variables and using them after declaration, how to change the variable data, and also how to run different operations and display the result using the console log
Installed nodejs on my machine so I can run commands on the terminal but also write code on VS code and run them to receive an output while on the VS code, this has been helpful with exception of some parts that require a browser to run but I have created an html page that enable me to capture input from the browser and use it on the program. This has been helpful to help code js and get inputs fromt he browser. Did some quizzes and and I still going on more updates soon.