What is full stack development?

Welcome to the full stack course. In this video, you'll learn what full stack development is, what
a full stack developer does, and why it's an in demand role in today's job market. You might find
yourself wondering what stacks are. They are a combination of software applications and
components you use to fix a problem or create a project with a certain development focus. For
example, there's the front end stack that's mostly focused on the user interface. Developers use
different tools and programming languages like HTML, CSS, and JavaScript to build the front
end of Web and mobile applications, and together they are the front-end stack. On the other
hand, you build the back end of a Web application which is mainly the apps core with another set
of programming languages and tools which include Python, Django, and DRF. And these
comprise your back-end stack. The back-end stack also includes a data management system that
consists of database applications to process data. This is generally referred to as the data stack
and is part of the back-end stack. Let's examine these three stacks in more detail. The back-end
stack has everything you need to create the back end of an application's core that deals with
business logic, workflows, and data. Back-end development includes programming languages
like Python or JavaScript frameworks like Django and utilities like DRF. and also builds tools,
databases, and caching applications. Let's shift the focus to the front end, which has two distinct
parts web and mobile. This stack includes everything you need to create a functional user
interface of a web or mobile application that can communicate with the back end. To build the
front end of a web application, you need to learn HTML, CSS, and CSS frameworks. You also
need to know about client side programming languages like JavaScript or Type Script and
JavaScript frameworks like react. And lastly, you also have to be familiar with either iOS or
Android development tools for both for mobile application development. Now, let's move onto
the data stack. One of the most crucial parts of every application is the data stack or tools you use
to successfully store, process, and retrieve data. This stack contains SQL or NOSQL database
engines, caching tools, and everything required to process data. In fact, MySQL, MariaDB, and
PostgreSQL are some of the most widely used database engines you can learn to use for data
stack. For caching, Redis is a popular and widely used solution. Finally, let's discuss the full
stack which is the end to end solution for an application. It contains everything you need to
create the applications core or the back-end process the data presented by APIs on web or mobile
applications. A full stack developer is equally skilled in the back-end, front-end, and database
stacks. Such a developer should have some essential DevOps skills to build and deploy an
application to production, staging, and development servers. To be a full stack developer, you
must learn everything that is required to create and deliver a functioning application. And you
must also be familiar with a version control system like git for full stack development. It takes
time to be a successful full stack developer, so you'll have to be a little patient with yourself. But
what exactly are a full stack developer’s responsibilities? A typical full stack developer performs
the following tasks, understand the complete project and take full ownership. Select a pro create
tools for developing the front-end, back-end, and database, create effective user interfaces for
web and mobile applications. Develop APIs, develop the back-end of applications, store,
process, and retrieve data from databases, create servers and manage them for development,
staging, and production access. Integrate with the CI/Cd workflows, ensure the responsiveness of
web applications, work together with the graphics team to bring their ideas to life. Optimize
applications for maximum performance and make sure applications follow the best security
practices, that's quite a lot of responsibilities. So you now understand why some patience is
needed to learn all of these skills. But don't worry with hard work and dedication you'll get there.
In this video, you learned about different stacks in the application development process. You also
learned about full stack development and the role of a full stack developer.

N-tier architecture
When you develop an application, it has different parts. There's the UI, backend, business logic,
and database. These parts need to properly communicate with each other to make an application
work. In this video, you will learn about some common architectures used in modern application
development. Let's start with layers and tiers. In application development, you often hear the
terms layers and tiers being used interchangeably but there's a difference between them. As you
learned earlier in the course, an application can have multiple parts, like the presentation part, the
core of the application where the business logic stays, and the database. When these parts are
in different places in the application infrastructure, like on different servers, but they still
communicate with each other and function correctly they are called tiers.

Thus, layers are virtual separations of different parts of an application. Tiers are also different
parts of an application but they're physically separated in the application infrastructure. Now,
let's discuss N-tier architecture in two types, 3-tier and 4-tier architecture. In modern application
development, there can be any number of tiers. When an applications architecture is split into
multiple tiers, it's called an N-tier application. These days, 3-tier architecture is the most
commonly used N-tier architecture. Some developers also use a 4-tier architecture when
required. Let's say you developed a web application and the application is split into two distinct
parts: the code with business logic that processes the data and the database to store the data. You
host the application code on one server and the database on another. Since they are
physically separated into two different servers, you can call them tiers. In this example, there are
two tiers. So where's the third one? The third tier is the client computer or mobile, which is used
to browse a web application or access the APIs. These clients are completely separate physical
machines. Together, the client machine, your application server, and the database server makeup
a 3-tier architecture. In a 3-tier architecture, the client tier is called a presentation tier. Client
machines are also called thin clients because they don't run business logic. They only
communicate with your application and present the data. The tier that holds the application code
or business logic is called the application tier. Finally, the tier that deals with data is called the
data tier. The 3-tiers are presentation, application and data tiers. Let's move on to the 4-tier
architecture. In a web application with a 4-tier architecture, a fourth tier is included called the
delivery tier. This delivery tier deals with caching and delivering the front-end assets to the
client. For example, like a Content Delivery Network or CDN. CDN providers have many
servers across the world for better content delivery. They store your web applications, HTML,
CSS, JavaScript, and images, and deliver them to the client from the nearest server. Because
CDN servers are physically separated from your application and data tiers, they're seen as
another tier, the delivery tier. This is just one example of a 4-tier web application. These
applications can be very different from one another depending on their purpose, for example,
financial or enterprise applications that have different needs. There are several benefits to an N-
tier architecture. Let's examine some of them now. When the application is divided into multiple
tiers, it becomes easier to secure and scale the application. Fixing problems or adding new
features becomes more manageable because each tier is separate and works independently. Thus,
the application development process becomes more efficient when you use an N-tier architecture
for your application. In this video, you learned about the difference between layers and tiers. You
also learned about the popular N-tier architecture and how to use it to create a 3 or 4-tier
architecture for your web applications.
What you know about client-server architecture
Introduction
Full stack development includes both a back-end and front-end stack. The back-end, or the core
of a web application or an API project, is hosted on a server or server less platform. In turn, the
web application or API is used by clients. So there are two distinct parts: a client and a server,
and together they form the client-server architecture.

In this reading, you will learn more about client-server architecture.

The client-server architecture

Every website you browse, the multiplayer mobile games you play and modern home appliances
connected to the internet – all of these are applications running on a client-server architecture.

First is the client which is the computer or mobile device used to communicate with the back-end
application. When the client devices only communicate with the back-end and just display or
present the data and don’t apply the business logic, these devices are called thin clients. If client
devices consume data from the API and do heavier data processing on the client side, they are
called thick clients.

Second is the server. In a client-server architecture, the server hosts the application's core that
deals with incoming data, applies business logic and saves and processes data in a database. The
application's core is hosted on cloud computing units, on virtual machines, containers, or a
dedicated server. Using an N-tier architecture, the application can have different layers spread
across multiple physical or virtual servers.

How it works
In a client-server architecture, computers are connected via a network which can be either public
or private. The client or the front-end application accepts the user data, does some basic
validation, and sends the data to the server.

The server accepts the incoming data and runs through rigorous validation and sanitization
processes to ensure the information is valid and doesn't contain any potentially malicious
content. Validation and sanitization are essential parts of every client-server architecture. The
rule of thumb is: don't trust anyone. As the application developer, you must validate and sanitize
data no matter how trusted the source of the data is.

The data is then processed by business logic, saved or served from the database, and a response
is sent back to the client. Then the client processes the server response data, makes decisions, or
simply displays it to the visitor.

In a client-server architecture, the server should be capable of simultaneously handling multiple

requests from multiple clients. If the server capacity is insufficient and can’t accept the number
of incoming requests, then it has to be scaled. You can adjust the server capacity using different
scaling techniques you will learn about later in this course.

And, when it comes to communication, you should follow standard communication protocols
like HTTP or Web socket to establish communication between the client and the server.

Advantages
One of the most significant benefits of using client-server architecture is the separation of the
different layers of your application. The database can be installed and managed in a totally
separate layer, and the data stays synced in a centralized location. In this way it allows multiple
clients to communicate and use that information at the same time.

Think about the Little Lemon application you have been working on throughout the courses in
this program. Without client-server architecture, it wouldn’t be possible to host the restaurant
data in a separate server and process it so that whenever something changes, every client sees the
fresh and updated data.

Since different application parts are stored in different layers or tiers, scaling, optimizing, and
securing the infrastructure and data becomes easier. Backing up and recovering data in case of
accidental loss or hardware failure is also easier because you can directly deal with that tier or
layer instead of potentially causing problems in the whole application.

Additionally, client-server architecture is cost-effective because you can host it on the cloud with
an on-demand pricing model and pay only for what you use. You don't need to purchase
expensive physical computers to host your application. You also don't need powerful clients to
run the business logic. Everything is done on the server, and then the final output is served to the
client, which they can display directly or after some minimal processing if required.

Disadvantages
Like every architectural pattern, the client-server computing model also has some disadvantages.
The first is management: you have to spend time configuring, managing, and maintaining the
servers to keep them in working order. Also, unmonitored or abusive usage of the API provided
by your application can cause a spike in monthly bills. Furthermore, security can be a big
concern. When a security breach occurs, sensitive user data can leak, and severe financial
damage can follow. And, if the server goes down or becomes unresponsive for any reason, the
client applications will also stop working.

 Presentation Layer language

HTML, CSS and JavaScript for beginner and Git , Git Hub ,React JS Framework(Angualr
or Vue js) and Chrome Dev tools (for UI/UX developer is important) for advance learner.

 Business Layer Language

PHP, Node.Js, Java for Beginner

Python, Ruby and .NET framework, C# for advanced learner.

 Database Layer

SQL for beginner and NOSQL is for advance learner language. But Mysql, oracle and
Mongo DB is adatabase.

Submit
You have recently learned about how forms are sent to web servers and the difference between
GET and POST. In this reading, you will build on this knowledge by learning about Submit.

Action and method

Form submissions are an essential part of the world wide web. Nearly every website uses forms,
from buying items online to ordering food for delivery. When you click the login button on a
website, it sends your username and password to a web server to log you into your account.
The action attribute specifies to which web address the form must be sent. This address is the
location of server-side code that will process the request.

It is important to note that action can be a full URL address such as di://meta.com, an absolute
path such as /login, or a relative path such as login. The absolute path, which starts with a
forward slash, will use the base address of the current website, such as https://meta.com and
combine it with the absolute path. For example, if /login is the absolute path, the form will be
submitted to https://meta.com/login. If the address is https://meta.com/company-info/ and /login
is the absolute path, the submission address will still be https://meta.com/login. Similarly, a
relative path will combine the current web address with a relative path. For example, if the web
browser is currently on the web page https://meta.com/company-info/, and the relative path is set
to login, the form will be submitted to https://meta.com/company-info/login. The method
attribute specifies which HTTP method is used to submit the form; GET or POST.

The form will default to the HTTP GET method when the method attribute is not provided. As
you may already know, when the form is submitted using the HTTP GET method, the data in the
form's fields are encoded in the URL. And when the form is submitted using the HTTP POST
method, the data is sent as part of the HTTP request body. When the web server receives the
request, it processes the data and sends back an HTTP response. The response indicates the result
of the submission, which can be successful or unsuccessful due to invalid or incorrect data.
However, as a front-end developer, it is essential to know that forms are not the only way to
submit data to the web server. As you learn more about JavaScript and front-end libraries, you’ll
discover that developers often submit HTTP requests directly via code and send data as part of
the HTTP request body in a text format called JavaScript Object Notation, or JSON.

Semantic tags and why we need them

By now you know that HTML describes the content of a web page. But how do you describe the
meaning of a web page, to understand this in a real world context think of buttons in an elevator.
The vertical arrangement of buttons isn't enough for someone to understand their meaning.
To convey the meaning or semantics of the buttons numbers are added so that people know
which button will take them to which floor. When you write HTML it's good practice to
semantically describe the content. This allows search engines and accessibility software such as
screen readers to understand the contents of a page, fortunately you can do this by using some
basic HTML tags. For example using a heading tags such as H1 describes that the content is a
heading. Similarly the UL and OL tags describe lists. However, there are many more semantic
HTML elements available to you as a developer. In this video I will share a structured
approach you can take to make sure that you create a well formed web page. Let's revisit the
basic structure of an HTML page which includes the head and body. Inside the body tag you can
lay out the website with very semantic tags to describe each of the sections. For a typical HTML
page the structure can be semantically described using the header, main and footer semantic
HTML tags. For example, suppose you lay out your page with a header section that contains
some company logo and navigation links.
Then a main section contains sections and articles. Finally a footer section contains contact
information and social media links. The main navigation section of your web page can also be
described semantically using the Nav tag. Depending on how web pages designed the Nav
element is often placed after the header element and the header element is used for logos.
The main links of your website are then added inside the Nav element. It is common practice for
developers to specify their links as an unordered list inside the Nav element. Next is the main
content of a web page. The two key semantic elements for your main content are the article and
section elements First let's examine the article element. The HTML specification states that
according to the World Wide Web Consortium's website, the article element indicates content
which represents a complete. Or self contained composition in a document page application or
site that is independently distributable That's quite a mouthful. It may help to think of a page in a
newspaper. There are many articles on the page and you can cut out the individual articles with
scissors if you want to. The articles you can remove are the article element. Examples of this
include a forum post, a magazine or a newspaper article, a blog entry, a user submitted comment,
an interactive widget ogadget or any other independent item of content. Let's examine how the
article element is used say you are developing a blog about your summer holiday. It's good
practice to contain the blog post content inside of the article element because it's a complete self-
contained composition on a web page. You should place the article element within your main
element.
Then you add your regular heading and paragraph tags inside the article element. The reason for
doing it this way is because the main element semantically represents the main content of the
page.
And inside of it there can be multiple article elements for something like a blog post list.
At the end of your document is the footer element. This might contain additional navigation links
or other content. It is important to note that semantic elements are not limited to this structure.
Since their purpose is to describe the semantics of the content, the elements can be nested inside
of each other If it accurately describes the content, let's update the previous example to use a
nested semantic structurer You add a header element to the article element, inside the header
element at the heading element with the blog title and a paragraph element describing the date
and author of the blog post. Inside the main element at the content of the blog post. That's it, let's
examine the section element. You can add a section element to semantically define individual
sections of the article. It is important to note that sections should contain heading elements to
semantically describe the section. It is also possible to use section elements to describe different
sections of your webpage, the section element doesn't require the article element. It all depends
on how you want to semantically describe your page. And now you know how to semantically
describe the contents of a web page, your web pages more accessible because the content is
semantically described to add meaning. Now, search engines and accessibility software can
easily understand the contents of your well formed web page.
Semantic HTML cheat sheet
There are hundreds of semantic tags available to help describe the meaning of your HTML
documents. Below is a cheat sheet with some of the most common ones you’ll use in this course
and in your development career.

Sectioning tags
Use the following tags to organize your HTML document into structured sections.

<header>
The header of a content section or the web page. The web page header often contains the website
branding or logo.
<nav>
The navigation links of a section or the web page.
<footer>
The footer of a content section or the web page. On a web page, it often contains secondary
links, the copyright notice, privacy policy and cookie policy links.
<main>Specifies the main content of a section or the web page.

<aside> A secondary set of content that is not required to understand the main content.

<article> An independent, self-contained block of content such as a blog post or product.

<section>
A standalone section of the document that is often used within the body and article elements.
<details>
A collapsed section of content that can be expanded if the user wishes to view it.

<summary> Specifies the summary or caption of a <details> element.

<h1><h2><h3><h4><h5><h6>

Headings on the web page. <h1> indicates the most important heading whereas <h6> indicates
the least important.
Content tags
<blockquote> Used to describe a quotation.

<dd> Used to define a description for the preceding <dt> element.

<dl> Used to define a description list.

<dt> Used to describe terms inside <dl> elements.

<figcaption> Defines a caption for a photo image.

<figure> Applies markup to a photo image.

<hr> Adds a horizontal line to the parent element.

<li> Used to define an item within a list.

<menu> A semantic alternative to <ul> tag.

<ol> Defines an ordered list.

<p> Defines a paragraph.

<pre> Used to represent preformatted text. Typically rendered in the web browser using a
monospace font.

<ul> Unordered list

Inline tags
<a> An anchor link to another HTML document.

<abbr> Specifies that the containing text is an abbreviation or acronym.

<b> Bolds the containing text. When used to indicate importance use <strong> instead.

<br> A line break. Moves the subsequent text to a new line.

<cite> Defines the title of creative work (for example a book, poem, song, movie, painting or
sculpture). The text in the <cite> element is usually rendered in italics.

<code> Indicates that the containing text is a block of computer code.

<data> Indicates machine-readable data.

<em> Emphasizes the containing text.

<i> The containing text is displayed in italics. Used to indicate idiomatic text or technical terms.
<mark> The containing text should be marked or highlighted.

<q> The containing text is a short quotation.

<s> Displays the containing text with a strikethrough or line through it.

<samp> The containing text represents a sample.

<small> Used to represent small text, such as copyright and legal text.

<span> A generic element for grouping content for CSS styling.

<strong> Displays the containing text in bold. Used to indicate importance.

<sub> The containing text is subscript text, displayed with a lowered baseline.

<sup> The containing text is superscript text, displayed with a raised baseline.

<time> A semantic tag used to display both dates and times.

<u> Displays the containing text with a solid underline.

<var> The containing text is a variable in a mathematical expression.

Embedded content and media tags

<audio> Used to embed audio in web pages.

<canvas> Used to render 2D and 3D graphics on web pages.

<embed> Used as a containing element for external content provided by an external application
such as a media player or plug-in application.

<iframe> Used to embed a nested web page.

<img> Embeds an image on a web page.

<object> Similar to <embed> but the content is provided by a web browser plug-in.

<picture> An element that contains one <img> element and one or more <source> elements
to offer alternative images for different displays/devices.

<video> Embeds a video on a web page.

<source> Specifies media resources for <picture>, <audio> and<video> elements.

<svg> Used to define Scalable Vector Graphics within a web page.

Table tags

<table> Defines a table element to display table data within a web page.

<thead> Represents the header content of a table. Typically contains one <tr> element.

<tbody> Represents the main content of a table. Contains one or more <tr>elements.

<tfoot> Represents the footer content of a table. Typically contains one <tr> element.

<tr>

Represents a row in a table. Contains one or more <td> elements when used within <tbody> or
<tfoot>. When used within <thead>, contains one or more <th> elements.

<td> Represents a cell in a table. Contains the text content of the cell.

<th> Defines a header cell of a table. Contains the text content of the header.

<caption> Defines the caption of a table element.

<colgroup> Defines a semantic group of one or more columns in a table for formatting.

<col> Defines a semantic column in a table.

CSS
Earlier you learned about the different types of CSS selectors. Remember CSS selectors
correspond to specific elements or element groups in an HTML document. In this video, you will
learn about additional commonly used CSS selectors. But before you explore them, let's briefly
revise the ones you've already covered. You learned about element or type selectors. The element
selector allows developers to select html elements based on their element type. You also get ID
selectors, ID Selectors use the ID attribute of html element. Since the ID is unique within a web
page, it allows the developer to select a specific element for styling. You were also introduced to
class selectors.
Class selectors allow you to select elements based on the class attribute applied to them. With
class selectors, you can apply rules to all elements with the specified class name. Those are the
CSS selectors you have learned about previously. Hopefully, you've experienced how useful and
effective they can be, but that's not all. As the CSS code based evolved over time, more selectors
were added to improve the design and styling effect of CSS. Let's explore a few of these widely
used selectors First, let's focus on attribute selectors. The attribute selector has a few syntax
variations. Attribute selectors match the attribute of value for a given element. Can you recall
what attributes and value mean? A quick recap, let's say you have a html image tag, img is the
name of the tag, while src and alt are the names of its attributes. The actual name of the image
file, first.jpeg is the value.Now let's explore an example of how attribute selectors can be
used.Say you have an html file with three a tags,each with a h ref attribute that points to a
different page on the meta website. The first one has no class, whereas the second one has a class
called home, and the third class called about. With different variations of the attribute selectors
you can target different
attributes of the html. For instance, you can style all elements that have a defined class by adding
classinside the square brackets In this case, it will turn the second and third link green.
Alternatively, you can target all three elements by inserting the href attribute, a star and a
common value that is part of all the links that you want to target.In this case, it can be the text
meta.Now all three links will be green because each link contains the word meta.Or you can
target only the first element by adding the specific link as the value of the href attribute, that you
want to target inside the square brackets.Wherever there is an attribute on a web page, you can
use some variation of an attribute selector to modify it. This makes attribute selectors a very
flexible styling tool, but let's move on to two other widely used selectors that you need to know
about Nth-of-type and nth-child selectors,the syntax of these two selectors is very similar.
As their name suggests, these selectors target the nth-child or nth-type of a specified parent
element, but what does parent mean exactly? Well, say you have a few list elements in an
unordered list element The unordered list element is the parent tag in this case, and the three list
elements are the children. Now let's specify that the second list element must have a certain
styling In this case, you can use both the nth-of-type and the nth-child selectors to do that. Both
will produce the same output, where the second list element will be colored aqua in this case.
Another commonly used selector is the star selector, just like in many other programming
languages, star selectors are used for selecting all the elements of a web page. It will affect all the
elements in the html file.It is especially helpful when you want to reset the default settings and
styles that browsers use before they apply your styling to the web page. Finally, did you know
that you can group selectors?If you want to apply the same styling to more than one type of
element,like the heading one and paragraph elements you can use group selectors.Instead of
using element selectors where you use a rule for every element, such as heading 1 and P you can
type h1, p and then add the CSS properties.The CSS rule will then be applied to all heading one
and paragraph elements.Group selectors can save you a lot of time, they're also called selector
stacking.In this video, you reviewed the CSS selectors that you are familiar with. You also
learned about additional widely used CSS selectors, their syntax and how they can be used to
target specific elements on your web pages.The selectors covered where, attribute selectors of
type and nth-child selectors, star selectors, and group selectors. Learning how to use the CSS
selectors is important because it allows you to be more
specific when styling your web pages. In the rest of this lesson, you'll be introduced to several
advanced selectors. At first, they might seem more complex than the ones covered in this video,
but with a bit of practice, they will become part of your everyday web styling toolkit.
CSS units of measurement
Relative values

When you create a web page, you will almost never have only a single element present inside it.
Even in case of containers such as flexboxes and grids, there’s usually more than one element
present that rules are applied to. Relative values are defined ‘in relation’ to the other elements
present inside the parent element. Additionally, they are defined ‘in relation’ to the viewport or
the size of the visible web page. Given the dynamic nature of web pages today and the variable
size of devices in use, relative units are the go-to option in many cases. Below is a list of some of
the important relative units.

Unit Description and relativity

em Font size of the parent where present.
ex x-co-ordinate or height of the font element.
ch Width of the font character.
rem Font size of the root element.
lh Value computed for line height of parent element.
Value computed for line height of root element
rlh
which is <html>.
vw 1% of the viewport width.
vh 1% of the viewport height.
vmin 1% of the smaller dimension of viewport.
vmax 1% of the larger dimension of viewport.
Denotes a percentage value in relation to its parent
%
element.

Many of these units are used in terms of the relative size of fonts. Some units are more suitable
depending on the relative context. Like when the dimensions of the viewport are important, it's
more appropriate to use vw and vh. In a broader context, the relative units you will see most
frequently used are percentage, em, vh, vw and rem.

Much like the absolute and relative units discussed above, certain properties have their own set
of acceptable values that need to be taken into account. For example, color-based properties such
as backgroundcolor will have values such as hexadecimal, rgb(), rgba(), hsl(), hsla() and so
on. Each property should be explored on an individual basis and practicing with the code will
help you to decide which of these units of measurement are the most suitable choice.

Document flow - block vs. inline

By now you've learned how CSS styles individual html elements, but how does the web browser
nowhere to place the elements on the screen? The web browsers normal way of calculating the
position of html elements on the screen is called document flow. By default, nearly all html
elements are organized into one of two categories namely in block and in line elements.

A block level element will occupy the full horizontal width of its parent element and the vertical
height of its content. Each block level element will have a new line before and after. Therefore,
multiple block level elements will stack on top of each other like a stack of boxes. In line
elements only occupy the width and height of their content. They don't appear on a new line,
hence the name in line. Therefore, multiple in line elements can form a row of elements. When
coding in html, you need to be able to recognize and use block elements. Some examples of
block level elements include the tags, div form and heading. You also need to be familiar with
common in line elements. These include the tags anchor, image, input label, bold, italics,
emphasis and span.

Okay, so, I've opened visual studio code here, I will now demonstrate an example where you will
learn about document flow. First, I want you to notice that I have a div element containing three
sentences of Lauren ipsum. A div or divided element is used to divide content into sections. If
you don't speak Latin, don't worry. Lauren Ipsum is placeholder text that has been used since the
1500s.

In the code I have div and span elements. I am now going to change the middle sentence from a
span to a div tag. Because the div tag is a block level element, notice that the sentence has
been moved to a new line and the span element after it is also a new line. It's possible to change
elements from block level to in line and vice versa. This can be done using the display CSS
property.

Let me add a CSS file called style dot CSS. In my html file, let me give the middle sentence div
element an Id. I now add a rule in the CSS file to change the element to an in line element. To
create the CSS rule, I type hash middle and open the curly brackets. On the next line, I type
display colon space in line semi colon. And on the next line I close the curly brackets, notice that
the div has now changed to an in line element. If I want to change it back, I can just remove the
property.

I have now changed the value for display to block. In another video, I will demonstrate to you
that there are other values you can set for the display property to change the layout behavior of
an element. Congratulations, you have now learned about block and in line elements in html. It's
important for developers to be comfortable working with each and to know the differences.
Basic flexbox
At this stage, you should be familiar with different layouts and grid structures, and you should be
ready to start using flexbox. Let's explore a few practical examples of how you can use it. In the
next few minutes, you will explore what the three most common uses of flexbox are. As
mentioned earlier, flexboxes are more suitable to use for simple layout or designing simple
elements in a page. In line with that idea, let's explore a few commonly used design elements that
you see on a page. You will discover simple ways in which you can utilize flexboxes for binding
elements together or creating an easy layout. Let's explore the three most common uses of
flexbox is in CSS.
The first application of flexbox that you will cover that is commonly used is a search bar. You
can use flex in search bars because it ties up all the elements, such as the small Search icon, the
search input area, and the Submit button. Next, you can create the navigation bar using
flex, which consists of several different layouts, and it makes your navigation bar highly
responsive on different devices. Finally, another type of flexbox that is commonly used is an
image gallery. Flexes helpful here is it can realign itself as you change the size of the window. In
the next few minutes, you will discover how to create these flexboxes to ensure a simple
layout. In the first example of a flexbox file, I will create a search bar, I add a reference to the
CSS file in the head section of the HTML page. After that, I add content inside the body section
of our HTML code. I first create a container class with a div tag. Inside this container, I have
three different elements, which are the search icon, the search box where I typed my search, and
finally the Submit button. In the CSS code, I first write rules for the container, then for the search
icon, the search box, and finally for the button. Most of the properties defined here are settings
for the alignment of the selectors. There are just a few important things to take note of. The
display property I use is inline flex instead of flex,
which makes the flex container behave like an inline element? Another property to take note of
is the overflow. The overflow property clips the overflowing content, which in this case will
be the text enter in the search query. Then I add the properties for the icon and the search
box. Finally, I add the properties for the Search button. Let's remove this CSS code momentarily
to check how the output displays with aided. Although all the elements are there the page is
standard and playing, I add the code back to the CSS file and check the output one more
time. Now the search box displays
the properties that I defined in my CSS file. Notice that when I change the size of the page, the
search area doesn't change. Another place where flexbox is used quite frequently is in navigation
menus. In this case, I created an unordered list that consists of four items. Notice that in my CSS
code I use something called a star or universal selector. The universal selector applies the rules to
every element in my CSS code. I use this to declare any formatting that is browser specific. Now
I define the rules for the container. It's important to notice that I use the flex-flow, which is a
shorthand property specifying the direction of the flex container and its behavior for wrapping.
Another important property is justify content, which aligns the flexible containers items along
the main axis. In this case, I have set it to stretch. Since the individual elements are part of the
container, I applied the rules both to the container, onto the elements which are the list
items, anchor, tag, and so on. It's also important to notice that the page is responsive. As the size
of the browser window gets smaller, the items stacked on top of each other, and if I expand the
window, it changes to a standard horizontal navigation menu. One final flexbox example that I
will
demonstrate is a responsive image gallery. All the elements for the gallery is in the body of the
HTML file. There is a div element with a class container that consists of six images that
are saved inside the project folder. Now, let's open the CSS file. First, I remove all browser-
specific settings that may be there by using the star selector just like I did earlier. I set the value
of both the margin and the padding to zero. I then reset the basic alignment options for the
images by setting the border to zero. Next, let's focus on the container. First, I set the value of
display to flex, then I add the flex-wrap property which determines whether the flex items should
be forced in one line or should wrap over multiple lines. Next, I justify the content
property, which aligns the flexible container items on the horizontal main axis, I set it to space
dash between. Finally, I add some padding. Let's inspect the output. The output window is
narrow at the moment, so the six images are stacked on top of each other. But when I expand the
window, they spread out. One can notice the effect better in a browser, so I copy the link and
paste it into my browser. When I change the size of the browser window, it is clear that the
alignment of these images is responsive. These are just some of the ways in which you use
flexboxes to provide responsiveness to websites and bind different elements together on web
pages. You should now be more familiar with some simple ways in which you can use flexboxes
to bind elements together to create
an easy responsive layout on your webpage. Good job.

CSS grids
CSS Grid layouts are important when it comes to designing a good webpage. This is because
layouts are a way to provide visual cues for a user by organizing relevant content to make it
easier to comprehend. Let's learn more about layouts. When someone says the word grid, you
probably think of lines that cross each other to form squares or rectangles. CSS Grids are two-
dimensional design layouts that are responsive and compatible with browser variations. They are
an alternative to other options such as Flexboxes and tables, especially when you are working
with larger scale layouts.
Columns are the vertical tracks and are the horizontal tracks in your viewport. Grids divide the
page into rows and columns, and the space between these tracks are called gutters or gaps. A cell
is the space in a grid container where a row and column intersect. There are several different
configurations you can add to define and modify grids. Let's examine an example that uses a
HTML document to demonstrate how to iteratively make changes to a grid. First, let's create a
HTML document called index.html. Right now, the contents displayed in the viewport are just a
vertical series of letters from A to E without any styling. Let's start adding content to the CSS
file. The first thing to do is set the values for the properties of the different box classes inside the
container object to make the layout look more presentable. The letters now have a better visual
design, but their arrangement on screen is unchanged. The result is that each letter occupies more
screen space than is necessary for its size. What's displayed in the viewport may appear to be a
grid, but it's not actually one. It's just the default settings of CSS for a layout. Once you convert
this into the grid layout, you'll be able to recognize the flexibility it can add. Let's convert it into
a grid layout. Set the properties of the container class by first assigning a grid value to the
display property. The display property is also used to set display types for other designs such as
flex, block, inline, and so on. It's usually a part of container elements inside our code. The
updated container now has the display property value set to grid and the property
values configured for three columns and two rows. That's two changes from the previous
configuration. Let's examine them. The grid template columns property has been added into the
CSS code to set the size of each of the three columns using pixel values. The use of fr, which is
an abbreviation for fraction, has been introduced. Fraction effectively divides the grid. The page
now displays five separate grid cells around the letters which are arranged in three columns and
two rows. Where applied, the grid tracks are divided proportionately to the ratio of all the
fraction values present. As there are two rows, the defined values are sized in the ratio of two to
one. Fraction adds flexibility to the grid without needing to deal with actual pixel sizes.
It must be noted though, that fraction and pixel sizes can be used interchangeably with both rows
and columns. Now to add a couple of properties such as grid gap or gutter and background color
to define the grid, the updated view displays a red box representing the grid because that's
what the background colors RGB value was set to. The grid stretches by default the entire width
of the page and the size of the grid track or gutter has been adjusted to 10 pixels, which leaves
more space between the grid cells. You can also opt to use the auto properties such as grid, auto
rows and grid auto columns Let's replace the grid template rows property in the code with grid
auto rows. All the rows are now auto-resized to 100 pixels. Now let's examine some of the
functions that can make configuring the layout easier. First, the repeat function passes the
number of repeats required for a given number of rows and columns. The result of the code
adjustment is an unchanged webpage from the last instance because the repeat function didn't
change anything, it just reduced the amount of code you need to write. Therefore, the repeat
function helps reduce redundancy and provides ease of code modification. Next, the min-max
function sets the minimum and maximum values expected for the sizes of rows and
columns. Let's set the value for the grid auto rows to 150 pixels. The output is modified so
that the minimum size of each row is 150 pixels. One more important concept is grid
frameworks. There are a number of commonly used grid frameworks and layouts. Two such grid
design layouts are known as the 12 and 16-column grids. They divide the page into 12 and 16
tracks respectively, along the vertical columns. The properties can be modified accordingly to
target a specific track. CSS Grid layouts are so important when it comes to good webpage
design. This video has demonstrated that layer to provide visual cues for the user by organizing
content in a way that makes it easier to understand. Who knows? Soon you'll be building your
own web pages and you'll be able to test out some of the techniques shown in this video. Don't
forget the repeat and min-max functions, they'll save you time and effort.
Grids and flexbox cheat sheet
Grid shorthand consists of the following properties with default values:
grid

A grid will allow you organize the various elements on your page.

grid-template-rows: none

This feature allows you configure your elements so that they are organized similarly to rows on a
table.

grid-template-columns: none

This feature allows you configure your elements but with this setting the elements are organized
like columns on a table.

grid-template-areas: none

This feature allows you configure the names of a grid and how they sit in relation to one another.

grid-auto-rows: auto

Default setting for all row sizes that have not been explicitly configured.

grid-auto-columns: auto

Default setting for all column sizes that have not been explicitly configured.

grid-auto-flow: row

Default location for rows that are not explicitly allocated.

column-gap: normal

This sets the gap between the rows

Grid properties for container

grid-template-columns: measurement units | % units |repeat()

Defines the line names, and maintains a constant size of column items. Can accept a range of
different measurement sizes.

grid-template-rows: measurement units | % units |repeat()

Defines the line names, and maintains a constant size of rows. Can accept a range of different
measurement sizes.
grid-auto-columns: measurement unit (fixed value for all columns)

Determines the default size for columns that have not been explicitly configured.

grid-auto-rows: measurement unit (fixed value for all rows)

Determines the default size for rows that have not been explicitly configured.

grid-template: “header header” auto

This allows you define and maintain named cells on a grid

“main right” 75vh

This defines two cells named main and right, that have a sizing of 75% of the viewport height.

“footer footer” 20rem

This defines two cells named footer and footer, that have a sizing of 20 root em (rem). This
defines the size in relation to the html font size.

Gap
grid-gap: measurement units

Determines the gap between rows and columns

grid-column-gap: measurement units

Determines the gap between columns

grid-row-gap: m-unit-1 m-unit-2

Determines the gap between columns

Alignment
justify-items: start | center | end | stretch

Defines the default space that is allot to each item on the grid

align-items: start | center | end | stretch

Defines the default space related to an item along the grid’s block axis

place-items: start | stretch /* shorthand for two properties above */

This feature allows you align items with the block and inline directions.
Justification
justify-content: start | center | end | stretch | space-between | space-evenly | space-around

Defines browser allocation of space to content items in relation to the main-axis

align-content: start | center | end | stretch | space-between | space-evenly | space-around

Defines browser allocation of space to content items in relation to cross axis and block axis

place-content: center | start

This feature allows you align items with the block and inline directions.

Positioning
grid-auto-flow: row | column | dense

This relates to how the items are placed automatically within the grid

grid-auto-columns: measurement units

This relates to the size for columns created without specific size specifications

grid-auto-rows: measurement units

This relates to the size for rows created without specific size specifications

Grid properties for items (child)

grid-column: column position /* E.g. 1/2 */

Allows for specifying where on the grid the column is to start.

grid-column-start: column start position

This property determines the starting column position an item is placed on a grid.

grid-column-end: column end position

This property determines the end column position an item is placed on a grid.

grid-row: row position /* E.g. 1/2 */

Allows for specifying where on the grid the row is to start.

grid-row-start: row start position

This property determines the starting row position an item is placed on a grid.
 grid-row-end: row end position

This property determines the end row position an item is placed on a grid.

Justification and alignment

justify-self: start | center | end | stretch

Determines how an item is positioned inside its aligned container in relation to the appropriate
axis.

align-self: start | center | end | stretch

Aligns an item within a grid area.

place-self: start | stretch /* shorthand for two properties above */

This setting lets one align and justify an item within a block.

Flexbox

Here the selector can refer to any of the following flex attributes

 Attribute selector

 Class Selector

 ID Selector

 Type Selectors

 Universal Selectors

The display relates to how you want the selector to be shown. Setting display to flex makes the
given selector a flex box. Setting display to inline-flex makes the selector a flex box container
while will be inline.

Properties for flexbox container

flex-direction: row | row-reverse | column | column-reverse

It is possible to specify the direction your elements will follow. Traditionally text goes from left
to right which is flex’s default setting however it can be set from right to left or even top to
bottom. The four flex-direction are:

 row : organized from left to right

 row-reverse: organized from right to left
 column: organized from top to bottom
 column-reverse: organized from bottom to top.
flex-wrap: wrap | nowrap

The standard layout is to plot the elements from left to right in a straight line. The wrap feature
allows you customize this to match the size of the window displaying the page.

 wrap: Automatically wrap the items with as the window space gets smaller.
 Nowrap: Default setting, items remain rigid and don’t respond to adjustments made to the
window size.
align-items: flex-start | flex-end | center |Stretch
This determines how the flex items are to be positioned on the page. Items can be aligned in a
variety of ways

 Flex-start: Similar to standard writing, items start at the top left-hand corner and are positioned
from left to right
 Flex-end: Position begins in the bottom right hand corner.
 Center: Item is positioned from the center.
 Stretch: item expands to fill the container.
justify-content: flex-start | flex-end | center | space-between | space-evenly

Justify-content determines the alignment of the flex items.

 Flex-start: goes from right to left along the main axis.

 Flex-end: goes from left to right along the main axis.
 Center: Starting at the middle, alignments expands from there.
 Space-between: first and last item are flush with the left and right wall respectively, every other
item is evenly spaced.
 Space-evenly: each item is equidistant from each other and the boundary wall
Properties for flexbox items (child)
flex-grow: factor of flex’s main size

This attribute enables the flex container to grow proportionally to the other containers present.

flex-shrink: factor of flex’s main size

This allows elements to shrink in relation to items around it.

flex-basis: auto | factor of main’s size | measurement unit

The sets the initial main size of an item. It can be overridden if other stylized elements are
configured.

order: position in flex /* Set ascending by default */

The standard positioning of items is by source order, however this feature will enable you to
configure where the items appear on the page.
align-self: start | center | end | stretch

This determines where on the page the child items will be positioned. Similar to the main flex
attributes, start is to the left and end is to the right.

Pseduo-class
Pseudo-class selectors give developers great control over what they select and style. By knowing
how to use these selectors, you will not only improve the interactivity of your web pages, but
you will also be able to add advanced styling without too much effort. These selectors are also
often referred to as just pseudo-classes. Previously, you were briefly introduced to the pseudo-
class invalid. Remember, pseudo-classes are state-based selectors, which means that they allow
you to select elements based on their state. For example, the hover state. You use pseudo-class
selectors to improve the interactivity of web pages by styling elements in response to user input.
In this video, you will explore practical examples of how to do this. There are many types of
pseudo-classes. Other than the hover state, examples include selecting an element when it is
active or in-focus, or when a link has already been visited. Pseudo-classes are also very effective
to target specific elements such as, let's say, the fifth item in a list, bold items, empty elements,
and so on. Let's review the general syntax that you use for various pseudo-classes. You add the
selector, a colon, the pseudo-class, and then the properties. Well, there isn't a broadly accepted
classification for pseudo-classes, you can group them in terms of general similarities and their
purpose. Let's explore a few of these general classifications.
The first group you need to know about is user action states, which include the hover pseudo-
class, which changes the style of an element when a cursor hovers over it. The active pseudo-
class, which styles an element only while a user actively presses and holds the mouse button, and
the focus pseudo-class, which focuses styling on the element that you use it for. These pseudo-
classes have an effect while a user is actively engaging with a HTML element. Let's explore an
example of how the hover and active pseudo-classes can be used. Say you have a HTML file
with an a tag inside a paragraph and a button element inside a div element. The paragraph
element has a class defined as "mypage" and the button class is defined as "mybutton." Now,
let's explore the CSS. First it contains basically styling for the mypage and mybutton class
elements. Then to make the link change its appearance when a user hovers over it, you use the
hover pseudo-class to target a tag. To change the mybutton class, you use the active pseudo-
class. The active pseudo-class changes the properties of an element when the state of that
element is active. In this case, the styling properties will be applied only when a user presses and
holds the mouse button. In this example, the pseudo-class selectors target HTML elements, but
you can also use them to target HTML class attributes. Next, let's focus on Form states.
Previously, when discussing form validation you were introduced to the invalid pseudo-class
selector. But there are more pseudo-classes that are specifically used for HTML forms. They
usually come in pairs and target the different states that elements can have. Form state pseudo-
classes include disabled and enabled, generally used for buttons, checked and indeterminate, that
are used for checkboxes, and valid and invalid used in case of fields like emails and phone
numbers. Another pseudo-class type that you should know about is specific position-based states.
They allow you to target specific items, for instance, a specific list item among the list elements.
Some examples of this type include, first-of-type, last-of-type, nth-of-type, and nth-last-of-type.
Let's explore an example of first-of-type. Say you have two list items in an HTML page, Adrian
and Mario. With the first-of-type pseudo-class, you can style the first item of its type while the
remaining items will not be affected. In this video, you explored a few examples of how you can
use pseudo-classes to improve the interactivity of your web pages. There are plenty of other
pseudo-classes and some of them are more popular than others. You're encouraged to follow
your own style and explore the creative possibilities that pseudo-classes offer.

Pseudo-elements

Pseudo-elements help you style a specific part of an element. For example, you can decide to
apply styling to only the first word or line in a given element. First, let’s examine the syntax of a
pseudo-element.
Syntax
selector::pseudo-element {

property: value;

It is important to note that pseudo-elements use two colon (::) characters instead of one.

::first-letter
You can use the first-letter pseudo-element to change the color of just the first letter of each of
the three points in the example text.

::first-line
First-line will change the complete first line of each of the bullet points to light sea green.

::selection
::selection is another useful pseudo-element. For example, you may use it when you are taking
notes on your device because it allows you to highlight specific text. The effect of it becomes
obvious only after the user selects content. On web pages today, you will typically see inverted
colors from white-black to black-white when selecting a portion of text.

::marker
::marker is typically used to add style elements to a list, for instance, to color bullet points. For
example, you can enhance the user experience when you use a marker in the following way.

::before and ::after

One more pair of pseudo-elements are the ::before and ::after pseudo-elements. They allow you
to add content before and after an element on which they are allowed. In other words, new
content can be added to a page without adding HTML code for it. You can also add styling
options for this content. Let’s do an example where text is added both before and after some
cooking guidelines to identify them as important tips.
 What you know about Django

Well done. You've come really far with all the courses you've completed. But sometimes it can
be difficult to remember everything. In this course, you will be returning to some key concepts of
Django, so let's recap what you've learned in the Django course to make sure that you're
prepared for the rest of this course. First, you learned how Django is used in the real world. For
example, the developers can create a back-end framework with Django that can connect to a
front-end framework, and you learned about projects and applications, admin and structures, as
well as what are web frameworks. Django encourages dry principles, or don't repeat yourself. In
other words, write it once but use it many times. You learned about django-admin and
manage.py commands as options for command line utility to perform administration tasks, and
you learned how they're used in the creation of projects and apps. Furthermore, you now know
that frameworks are designed to support you in building web applications because they provide
you with a clean, ordered structure. Also recall the benefits of using the Django framework,
which include: speed, feature-rich classes, security, and scalability. You also learned how
Django implements the model, view, and template or MVT architecture, and that splitting the
data, logic, and display into M, V, and T rapidly creates large-scale data-driven web
applications. You then progressed to learn about the model part of the MVT framework. You
learned about the concept of migrations and how to apply them using a best-practice approach.
You also explored how to use the QuerySet API to interact with the database. After that, you
learned how to create a form and use the Form API to bind data to objects and build model
forms as well as HTML forms. Then, you learned how to use the Django Admin panel to add
and control the permissions of users and groups, and you explored how to set up an external
MySQL database for your Django app. Next, you moved on to learn about the view part of the
MVT framework. You learned how to create views and view logic that can process basic HTTP
requests. You now know that the view handles web requests and returns web responses, and
you learned how to create a view function and map it to a URL with a process called routing so
that you can make the request-response work. In addition, you should be able to perform other
programming logic inside of View functions such as processing and retrieving data from a
database, transforming data, and rendering templates. You also explored the URL configuration
file urls.py and learned why it exists. You know that the urls.py file is already present at the
project level and configuration can also be added at the app level. You learned about the HTTP
request object and should be able to demonstrate how it can be used to map to URLs, map to
common crud operations, and get information by calling the client. Next, you unpacked URL
name-spacing and views, which is how URLs can be mapped to a name and its subsequent
view. You also practiced URL parameters and query parameters. Then you learned about the
different operations for using parameters in a web application. You should be able to
demonstrate how it relates to get, put, post, and delete operations. You also learned about
regular expressions in URLs. Following this, you explored how to handle errors such as dealing
with HTTP status responses and dealing with error responses from the server. You also
explored how developers can simplify their views by using object-oriented techniques, such as
the concept of inheritance to create views from inherited classes by using class-based views
that can be reused across a project. You were introduced to the Django template language or
DTL for short, which consists of constructs such as variables, tags, filters, and comments. While
working with templates, you also explored variable interpolation. You should now be able to
create dynamic templates in Django and map model objects to the template. Next, you explored
template inheritance, where you learned how to split out content into individual components and
reuse the segments. You learned that template inheritance uses two main tags, the include and
the extends tag, which allows you to replace blocks or content from a parent template. Finally,
you learned about debugging and testing. You learned that debugging is about removing an
application's errors and bugs, and testing considers metrics for quality, reliability, and
performance. You now know that Django has a distinct debugger that appears in the form of a
yellow page error, we call it DEBUG equals True flag. You also know that every language and
framework have many testing options that work well in Django. A popular method is unit testing
which you can use to isolate a function, class, or method, and only test that piece of code.
Finally, in Django, the unit test module uses a class-based approach where you add the tests
inside a class that inherits the class called test case from the Django test package. You really
worked hard in the Django course and covered a lot of ground. If there's anything in the recap
that you feel unsure about, please review the relevant material from the Django course so that
you feel confident and ready for the activities that come later when you use your Django coding
skills.

What you know about APIs

Think about all the communication that happens between the different parts of an application.
For example, making a booking on a restaurant website for a specific date and time. That
communication is made possible by APIs. You completed a course on APIs, but a refresher will
help you with the upcoming sections of this full-stack course. Let's begin. If you think back to the
beginning of the API course, you'll remember that you started off with what HTTP and HTTPS
are. And that HTTPS is better because data is encrypted on the client and server side. You also
learned how HTTP communication requires a client requesting information and a server that
responds to the request and serves the content. And you learned about the HTTP methods
used to make API calls to instruct the back-end code how to deal with the resources as well as
the HTTP status codes that give more information to the client about current HTTP requests.
Following this, you learned about RESTfulness. Naming conventions and essential tools for API
development. Remember, well-designed endpoint also conveys valuable information about its
purpose which is helpful for developers and the project itself in the long run. Common naming
conventions include use lowercase URI formatting, indicate hierarchical relationships with a
forward slash, use nouns for resource names, and avoid file name extensions. You learned how
to test your APIs with insomnia. A powerful rest API client that's free with cross-platform
versions and a very user-friendly interface. Next, you cover the principles of API development.
This included REST best practices, security, authentication, authorization, and access control.
You also learned about how to organize your own projects as well as about XML and JSON
response types. And by now you know that creating an API isn't enough. You also have to know
how to debug it. And that's why you learned how to debug Python scripts from VS code using
the built-in debugging tools. You also learned how to integrate the Django debugging toolbar in
your project to debug your APIs. You learned that API mocking is a great way to imitate a real
API endpoint. These mock APIs are used to test and develop applications because they provide
you with a similar response you get from a real API endpoint. Next up was the Django Rest
Framework and how you can use it to create APIs. Serialize your database models and convert,
validate, and render data. DRF is a Django utility app that bridges your regular Django app, the
Django framework, and the object-relational mapping or ORM library which communicates with
the database. Just some of the DRF benefits are that you have a built-in API view at your
disposal. You can use human-readable HTTP status codes and the most popular feature in
DRF serializers. They are essential for converting objects and Django models into a more
readable format like JSON or XML. And what's more, the serializers can also perform
deserialization which you can use to convert user-supplied data into models to store them safely
in a database. Like parsing JSON data and mapping it into an existing model. And you learned
about different types of routers and DRF. How to auto-configure the URLs from class-based
views and create function in class-based views. You learned about the advantages of class-
based views like how you don't have to write as much code. That there's less code duplication
and you can extend the classes and add features at any time. And you learned about the built-in
renderer object in DRF, and how to use it to display different types of content. Next, you were
introduced to the concept of filtering, ordering, searching, and paginating. This included learning
that filtering is used to allow client applications to get access to specific data via APIs and that it
is usually performed by passing query strings. And you learn how to order API results in both
ascending and descending order as well as how to perform multiple ordering. Next, you learn
how to paginate your restaurant menu items by specifying how many items you want to display
per page. Developers use pagination to chunk results. Client applications can then decide the
page number and how many records they want per page. Pagination helps the server to
perform better by consuming less resources. You learned about caching too. Another way to
optimize overall performance by serving saved results instead of creating a fresh one every time
it is requested. You learned about data sanitation and that it is important from a security
perspective because unsanitized data can cause vulnerabilities. You learn that API security is
crucial because they give third-party clients access to your databases. You learned how to build
token-based authentication in DRF by creating a simple registration and login API that use the
generated tokens to authenticate API calls. But remember relying only on authentication checks
will not be sufficient to protect your data. You must also create and check privileges like if the
authenticated user has the authorization to perform this action. Access control is all about
setting roles and privileges for users to make sure only the right users have access to data. And
that's why you learned how to create different user roles in DRF. You also learned about the
Djoser library and what the benefits are of using this library over DRFs built-in authentication
system. You now know about new authentication endpoints introduced by the Djoser library for
the registration and sign-in process. When it comes to security. Another way you can keep your
API secure is to use a signed URL to limit access to a resource for a specific period of time.
Another important topic that we covered is how to set up API throttling. Using the two throttling
classes in DRF, you can control how often APIs can be accessed in a certain amount of time by
unauthenticated and authenticated users. And that's it. Conceptually, APIs may only make up a
small segment of full-stack, but it's like a bridge that connects the different components of an
application together and integrates it into a single unit. And that's why it's important that your
API knowledge is up to date. So if there's anything you think you should revise, please return to
the API course material before proceeding with this course.

Environment check
Introduction
If you set up your full stack development environment with the right tools, you can use your time
more effectively during the development process. By using effective tools, you can make the
development process fast and fun. This reading will introduce you to some essential tools for full
stack development.

The terminal
In full stack development, you must familiarize yourself with using terminals and command-line
tools. This is where you can run commands to build Django projects, manage builds and
communicate with your server and the database. If you are not using the terminal, you can't use
Django, install the dependencies or use JavaScript to properly build tools. In macOS and Linux,
you can use the app called terminal and in Windows, you use PowerShell for this purpose.

Django specific tools

By now you should know that when using Django for your project, it's always a good idea to
avoid using global environments to manage your package dependencies. Pipenv is a fantastic
command line tool that only manages your dependencies but also does so in a virtual
environment, avoiding any possible conflicts between the packages. Download it from the
Pipenv website.

Database
While Django can use SQLite, a file-based database system, it can work with many others. And
MySQL and MariaDB are some of the most popular and widely used database engines by
 developers worldwide. You can install MySQL on your machine using the installer from their
website or using the package managers available for your operating system.

Editor
A good code editor can really speed up your development by providing essential features like
debuggers, quick refactoring and syntax highlighting. Additionally, there are many add-ons or
extensions that you can install which provide even more functionalities. Visual Studio Code is a
great editor that has everything you need to start developing in different programming languages.
And the best part is, it's free. Download VS Code here.

API testing
To test the APIs that you build, you need a REST API client to make different API calls and send
JSON or form URL encoded payloads and headers. Postman, Insomnia, and HTTpie are three
popular REST clients you can use for free. They are cross-platform and very user-friendly. Here
are a few helpful links to get you started with API testing:

 Postman API platform for building and using APIs

 Postman Echo service to test REST clients and make sample API calls

 Insomnia homepage

 Getting started with Insomnia

 Httpbin HTTP request and response service

Version control
An effective version control system is a must-have for any full stack developer. Using a version
control system like Git, you can maintain different versions of your code and you can also roll
back to any particular state in the past at any time. Fortunately, these days version control
systems are integrated with the build tools.

Front-end tools
When using front-end frameworks like React, you need Node.js installed on your system to
access it from the command line. You also need a package manager like NPM or Yarn to deal
with the dependencies and a build tool like Vite.jsor Webpack to build the production version of
your code. These days, Vite is a popular and fast building tool you can use for free.

Conclusion
With the proper development environment, you can make your development journey really
enjoyable and productive. The correct tools help you to write quality code fast and avoid
common errors. In this reading, you learned what tools you should have in your toolbelt to
become an excellent full stack developer.
Optional: Creating a Django project
(steps and code)
Introduction
This reading will give you an overview of the steps you should take when creating a Django project
while working with VS Code and using pipenv as your virtual environment. The project structure can
be vary according to your preferences, but the one suggested is easy to use.

Note: The instructions in this reading may vary slightly from the instructions in the video about
creating a Django project because the video presumes a preconfigured Pipfile.

Note: The commands added below are specific to MacOS. The learner will have to make OS specific
changes such as using keyword python instead of python3 for Windows OS.

Step 1
Open VS Code on your computer and click on File. In the drop-down menu select Open Folder and
select the folder you have created for the project.

Now click on Terminal and select New Terminal from the drop-down menu. This is the main folder
that contains all your files for the Django project you are going to create.

Step 2
Create a directory for the Django project by running the following command:

mkdir LittleLemon
Step 3
Step inside the LittleLemon directory with the command:

cd LittleLemon

Step 4
Run the following command to create a project in this directory:

django-admin startproject myproject .

Note: You can run the command above without using the dot(.) at the end. However, the relative
position of directory and commands executed below must change accordingly. Without the dot( .),
Django creates a nesting directory with a name same as the nested project name.

Step 5
Run the command to activate pipenv:

pipenv shell

Note: It is expected that pipenv is installed using pip on your local machine.

Step 6
Open the file labeled Pipfile that was created inside the project directory. This file contains details of
the dependencies for the project. Update it with the following code and save the file.

Note: The packages added as dependencies are specific to the lab and functionalities you will
require.

Note: While copy-pasting the file content above, ensure any special characters added automatically
are removed. They may appear in yellow or between code blocks in your VSCode.

Step 7
Run this command to install the dependencies using the updated Pipfile:
pipenv install

Note: Alternatively, you can also use a command like pipenv install django to install specific
packages. This will also update the Pipfile.

Step 8
Now run this command to create a Django app:

python3 manage.py startapp myapp

Step 9
Run the command to start the server to test if the installation was successful.

python3 manage.py runserver

Stop the server by pressing Ctrl + C while you are in the Terminal window.

Step 10
Create the urls.py file in the app-level LittleLemonDRF directory.
Paste the following code inside it:

Note: The specific url configurations will differ according to the views created.

Step 11
Open the urls.py file in the project-level directory and update the code as follows:

Note: The specific url configurations at the project-level will vary according to the name of the app
created.

Conclusion
In this reading, you learned about the initial setup you need to make on your local machine while
running VS Code with pipenv to create a Django project.
 What you know about Databases and MySQL

 Databases are a central component of any web application. The ability to provide persistent data
is the key for applications to perform, create, read, update, and delete operations. While building
a full stack application, the databases can either be relational or non-relational. However,
relational databases such as PostgreSQL, and MySQL are more commonly used than non-
relational databases such as MongoDB and Neo4j, as they provide something called a referential
identity. In other words, they ensure consistency and accuracy of data with the help of keys
present for records in a table and constraints that define the rules for them. In this video, you will
briefly review what you know about databases, and specifically MySQL. Django supports the
use of many databases with minimal configuration. These include PostgreSQL, MariaDB,
MySQL, Oracle, and SQLite. Among these PostgreSQL and MySQL are the most commonly
used. Django has features to support each database that make it easy to connect and work with. It
provides a generic way to access the different types of databases. A connection to a database is
established by knowing the type of database. When creating a Django project, the default
configuration uses a SQLite database that requires no additional installation. It is automatically
set inside the settings.py file. This means that you can directly start working with the database
immediately. SQLite is known as a user friendly, zero configuration database. There are many
advantages to using it. You don't need to install anything to support the database as it doesn't run
as a server process. This means the database does not need to be started or stopped and it doesn't
require additional configuration files. As a result, this type of database is suitable for small
projects or rapid prototyping. But there may be occasions where a more scalable, robust database
is needed. For example, when moving from a development to a production environment, the
SQLite database has a lot of limitations. It is serverless and doesn't have a user management
system. MySQL, on the other hand, can be an alternative to SQLite. MySQL has advantages
such as being an open source database. It also has a lot of other advantages over SQLite such as
scalability and authentication. To connect to a MySQL database, you need to provide the address
where the database is running, the port number, and the database name you wish to connect to.
There are a few steps that should be followed for using MySQL with Django. These include
setting up MySQL on a local machine, installing the MySQL DB API driver, updating MySQL
settings inside Django and setting up database tables. Let's briefly explore these steps. To install
the MySQL server, download the installer appropriate for your operating system. The download
link can be found in the additional resources at the end of this lesson. Start the MySQL command
line client with the following command, MySQL-u route-p. Hyphen u is the flag for the
username root, and hyphen p is the flag for password. You will then be prompted to enter the
password set at the time of installation. In the command terminal, you will get the MySQL
prompt. You can now enter any SQL statement in it. Start by creating a database with the
following command, create database my database. Then enter the next command, show
databases, which will show the list of currently available databases. Next, you also need a
database driver, which is responsible for mapping all the models and translating Python queries
into SQL instructions via the model. There are a number of Python drivers available for MySQL.
Django recommends that the MySQL API driver package, MySQL client is used. To use
MySQL, the driver or connector, MySQL client needs to be installed. When you connect to a
database, the connection opens on each request and it's kept open for a specified amount of time.
The connection is controlled by the CONN_MAX_AGE parameter and represents a certain time
before the connection is automatically closed. To establish a connection with the Django project,
you must configure parameters under the databases option of the settings.py file. By default, the
configuration is for SQLite. You can also use an options file for MySQL to store the database
connection credentials. You will learn more about it later in this lesson. The credentials can
include the database name, username, and password, and are stored in a separate configuration
file. Inside the settings.py file, the MySQL connection reference looks for the connection file in
the directory, etc/MySQL. Notice that this is not within the Django project. This is a deliberate
security measure. You should note that the settings can also be updated directly in a Django
settings.py file, but it is not recommended to be done in the production environment. While
Django creates all the tables based on the models you have from the migration scripts, the initial
setup requires you to manually create the database. Creating a database requires a connection to
the database itself and sufficient permissions for authentication and authorization. It's important
to remember that you must keep the database secure by assigning security roles and using strong
usernames and passwords. As a developer, you need to be aware of potential security risks. One
significant risk is the security of the credentials of your database. Allowing someone to know or
access the username and password of your database can have major consequences. You might
find it hard to gauge the advanced functionalities available in Django while using databases.
However, the use of Django with MySQL in a full stack application is a well-accepted industry
standard. The ease of scalability and configuration options available make it a good match while
building robust and secure applications in full stack.

Setting up a MySQL database on Windows

Introduction
MySQL is an open-source relational database management system and it’s one of the most widely
used databases for both personal and industry use.

Installation for MySQL and other such databases is relatively straightforward; however, there are
some system-specific dependencies and OS-specific differences. This reading is a guide to installing
MySQL on a Windows device.

Step 1
The standard MySQL installation in Windows is done with the help of the MySQL Installer tool.

First you need to download the MySQL Installer app from the official MySQL website.

You will be presented with the following screen:

Select the larger installer and press the Download button.

You can also choose the web-based installation if you are going to stay connected to the internet
while installing MySQL on your local machine.

Note: The visual layout of the installer may appear slightly different according to the Windows
version and MySQL installer at the time of installation. The general sequence of steps will however
remain the same.

Step 2
Once downloaded, double-click on the MySQL installer file and follow the steps outlined below.

Note: During the installation, whenever you’re unsure, select the default options in place.

Select Full as the setup type and set the Installation Path for the installation location.
All the required dependencies are selected for the installation.

Step 3
Proceed to the next step by clicking on the Next button.
Step 4
This step in the installation process lists all the products you may want to install with your MySQL
database as below. Once you press the Execute button, the tools will be downloaded automatically.
In addition to the steps mentioned, specific connectors may be required to use MySQL with different
tools such as VSCode and languages such as Python. For example, to use Python you would first
need to install the package mysqlclient using pip.

Wait until all the downloads are complete and installed and you'll get a screen similar to this.
The list will depend on the tools available at the time of your installation. For a complete list of tools
that you may require, you can refer to the official MySQL website which also provides an additional
option to install tools individually.

Note: For general use, the installation of MySQL Workbench and MySQL Server is important.

Step 5
The next screen provides a Product Configuration Overview of the installation.
Pressing the Next button, will take you to the following screen:
Keep the basic configuration and proceed with setting the password for the root user:
Note: Make a note of the password you set and save it in a secure place to avoid having to reset it if
you forget your password.

If necessary, you can also add additional users on this page.

Step 6
Proceed by pressing the Next button and add the MySQL Server Configuration which will be the first
one downloaded.

Proceed with all of the remaining steps by pressing the Next and Finish buttons.
Step 7
When you come to the screen below, add the root password you configured a few steps back during
the installation.

Proceed with all of the remaining steps by pressing the Next button and then Finish, keeping the
default settings in place.
Step 8
On the final page on the Installer, press the Finish button to complete the installation.

This will open two applications, MySQL Workbench and the command prompt logged into the
MySQL shell, on your desktop as in the images below:
Note: In case you encounter some problems during the installation, there are additional installation-
specific details available on the MySQL Windows installation page.

Setting up a MySQL database on Mac

Introduction
MySQL is an open-source relational database management system and it’s one of the most widely
used databases for both personal and industry use.

Step 1
To install MySQL on Mac, you first need to first establish which OS X version is in use. Click the
Apple icon in top right corner and select About This Mac. It should open a window like this:
In the example above, the macOS version is Ventura 13.0.1.

For most users, the versions will either be Ventura (13) or Monterey (12).

Note: In the example above, Apple M1 is the chip in use which is ARM 64-bit. The Intel based chips
will be x86 64-bit architecture.

Currently, Apple has support for the following versions:

Additionally, the minimum requirements recommended by the official website are as follows:
Step 2
Once you’ve confirmed these details, proceed to the official MySQL website to download the MySQL
Community Server.

Note: The packages for version 12 are compatible with both versions 11 and 13.

Press the Download button specific to your OS and chip version.

It will download a dmg file like the following:

mysql-8.0.31-macos12-arm64.dmg

Double-click and open the package installer. You will be presented with the image below:

If you receive an error, open the Privacy and Security settings in your System Preferences and scroll
down until you see the Security option.
Under the error message, press on the Open Anyway button and proceed with the installation.

Acknowledge the warning message once again and press Open.

Step 3
A screen like the one below should appear that welcomes you to the MySQL server. Click Continue.
Proceed with the setup by clicking Allow and adding a system password if prompted.

You will come to a screen such as the one below where you need to set a password for the root
user:
Keep the checkbox that says StartMySQLServer once the installation is complete selected and
complete the installation.

Note: It is very important to keep a note of the root password because if you forget it you'll have to
reset it which takes time and effort.

Step 4
Go to System Preferences once again and search for MySQL in the search box.
Press the Start MySQL Server button.

Note that the red dots have changed to green on the screen below.

Your MySQL server and database are ready for use on the local machine.
Step 5
You can confirm the status by opening the terminal and typing the following command:

mysql -u root -p

Press Enter and enter the root password you created.

The terminal prompt will change as follows:

Conclusion
Sometimes you may encounter some problems during your installation. Some of these queries are
addressed on the official website for MySQL. It also consists of useful information about using
MySQL database on your local machine.

Note: It is recommended to use the latest stable version of MySQL (5.7 at present) for your
installation. However, you can use any earlier version that is compatible with the OS in use and your
project requirements.

The MySQL Community Edition that you may encounter is a free downloadable toolset used with the
MySQL database server that includes a host of tools as listed in the image below taken from the
official website.

There are also other ways to install mysql such as using binary files and third-party package
installers like homebrew. These can be pursued in case the installation from the official package
manager file encounters some errors.

In addition to the steps outlined in this reading, specific connectors may be required to use MySQL
with different tools like VS Code and languages such as Python. For example, you need to install the
package mysqlclient using pip for Python before using mysql.

More information about installation and setup can be found in the additional resources of this lesson.
Recap: Models and migrations
Introduction
Models are the M in the Model, View, Template (MVT) architecture used by Django and models are
widely considered to be one of the best features of Django.

Object Relational Mapping, or ORM, is the ability to create a SQL query using an object-oriented
programming language such as Python. This enables quick turnaround time in fast production
environments where constant updates are the order of the day.

In this reading, you will learn about the models used in Django and how you can use migrations to
perform ORM on these models.

ORM and CRUD operations in models

Each model is a Python class which in turn is a subclass of Django.db.models.Model

Each attribute of the model represents a database field. Essentially, you can think of a model as a
Python object, and models help developers create, read, update and delete objects, commonly
called CRUD operations. The models that you create are saved in the models.py file that is inside the
Django app. Examine the example below of the SQL syntax and the corresponding Django models
for creating a table called User:
Configuring Django to connect to MySQL
MySQL is one of the world's most popular and widely used database engines. It's open-source,
very performant, and works with both small and larger scale web applications. In this video,
you'll learn how to use MySQL as the back end database engine for your Django project. Open
the terminal and come to your Django project directory. If you're using pipenv, activate the
virtual environment using the pipenv shell. To avoid dependency conflicts, you should always
use a virtual environment for your Django projects. Pipenv is a great tool to manage your
dependencies and the virtual environment easily. Django needs a package called MySQL client
to communicate with the MySQL database. To install this package, apply the following
command in the terminal inside your project directory. Pipenv install MySQL client. If you're not
using pipenv or configured your virtual environment manually, use pip or pip3 or your preferred
package manager to install the MySQL client package.