Front-End Development 101:
Introduction and Basic Setup
Timonwa Akintokun
Bio
Timonwa Akintokun
INTRODUCTION
As a front-end developer, you can create visually stunning websites and engaging user experiences. This session will introduce you to the fundamentals of web development and equip you with the tools you need to take your first steps in this exciting field.
TABLE OF CONTENTS
Introduction To Web Development
01
01
What is web development?
Web development is the process of building websites and applications for the internet. It involves creating the structure, functionality, and design of websites and applications, and it requires skills in both programming and design.
01
What is web development?
Web development can be used to create a wide variety of websites and applications, including e-commerce websites, social media platforms, online booking systems, and more.
01
Importance of web development
The internet has become an integral part of our daily lives, and web development plays a crucial role in making the internet accessible and useful for people all around the world.
01
Importance of web development
Web development offers opportunities for businesses, organizations, and individuals to connect with a wider audience and achieve their goals. Whether you want to sell products online, share your ideas with the world, or provide a valuable service to your community, web development can help you do it.
Introduction To Front-End Development
02
02
What is front-end development?
Front-end development is the part of web development that deals with the user interface and user experience. It focuses on designing and building web pages that are easy to use, engaging, and accessible for all users.
02
What is front-end development?
Front-end development involves creating the visual design of web pages, creating interactive features such as forms and animations, and ensuring that the web page is responsive and works well on different devices.
02
Importance of frontend development
The internet has become an integral part of our daily lives, and web development plays a crucial role in making the internet accessible and useful for people all around the world.
02
Importance of frontend development
Good front-end development can also make the internet a more accessible and enjoyable place for all users, regardless of their abilities or disabilities.
Basic Web Dev Environment Setup
03
03
Overview of the web development environment
In order to begin building websites and applications, you will need to set up the necessary tools and software on your computer. The basic web development environment typically includes a text editor, a browser, and a local server.
03
Overview of the web development environment
A text editor is used for writing and editing code. There are many different text editors available, including Sublime Text, Atom, and Visual Studio Code.
03
Overview of the web development environment
A browser is used for testing and viewing web pages. Popular browsers include Google Chrome, Mozilla Firefox, and Microsoft Edge.
03
Overview of the web development environment
To preview your website locally, you can use the Live Server extension in Visual Studio Code or a similar tool. This allows you to view your web pages in a browser without having to upload them to a web server.
Introduction to HTML
04
04
What is HTML?
HTML stands for HyperText Markup Language. It is the standard markup language used to create web pages.
HTML uses a set of tags to structure and display content on a web page. Tags are enclosed in angle brackets, and most tags come in pairs, with an opening tag and a closing tag.
04
What is HTML?
Examples of HTML tags include:
<html>, <head>, <body>, <p>, <a>, <img>
04
Basic structure of HTML
HTML documents have a specific structure that must be followed in order for them to display properly in a browser. The basic structure of an HTML document includes:
04
Basic structure of HTML
The <!DOCTYPE> declaration is the very first line of an HTML document and is used to tell the browser which version of HTML is being used.
It helps the browser to display the web page in the correct way, so it's important to include it in your HTML document.
04
Basic structure of HTML
The <html> element is the root element of an HTML document. All other elements should be nested inside this element.
The <html> element is also used to define the language of the document using the lang attribute. For example, if the web page is written in English, the lang attribute would be set to "en".
04
Basic structure of HTML
The <head> element is where you can include metadata and other information about the document, such as the title of the page, links to CSS stylesheets, and other scripts that the page uses.
The <head> element is not visible on the web page itself but is important for search engine optimization (SEO) and other purposes.
04
Basic structure of HTML
The <body> element is where the main content of the web page is placed, such as text, images, and other elements. Everything that is visible on the web page should be placed inside the <body> element.
The <body> element can also include attributes such as background color or image, and can be used to set the default font, size, and color for the text on the page.
04
Basic structure of HTML
In addition to these basic elements, HTML also includes a variety of semantic tags that can help you structure your content and make it more accessible to users with disabilities. Some common semantic tags include:
04
Basic structure of HTML
04
Basic structure of HTML
04
Basic structure of HTML
Using semantic tags can help you structure your content in a meaningful way, which can improve the accessibility and usability of your website.
Assignment
05
05
Assignment: Create a Personal Website
Create a personal website that includes the following elements:
05
Assignment: Create a Personal Website
05
Assignment: Create a Personal Website
Constraints
05
Assignment: Create a Personal Website
Deliverables:
Resources
THANKS