Introduction to Front-End Development
Welcome to Introduction to Front-End Development, the first course in the Meta Front-End Developer program. This course is a good place to start if you want to become a web developer. You will learn about the day-to-day responsibilities of a web developer and get a general understanding of the core and underlying technologies that power the internet. You will learn how front-end developers create websites and applications that work well and are easy to maintain. You’ll be introduced to the core web development technologies like HTML and CSS and get opportunities to practice using them.
Buy Now AED 170.99 + VAT
Monthly Subscription Starting at AED 99 + VAT
- Level Foundation
- المدة 19 ساعات hours
- الطبع بواسطة Meta
-
Offered by
عن
Welcome to Introduction to Front-End Development, the first course in the Meta Front-End Developer program. This course is a good place to start if you want to become a web developer. You will learn about the day-to-day responsibilities of a web developer and get a general understanding of the core and underlying technologies that power the internet. You will learn how front-end developers create websites and applications that work well and are easy to maintain. You'll be introduced to the core web development technologies like HTML and CSS and get opportunities to practice using them. You will also be introduced to modern UI frameworks such as Bootstrap and React that make it easy to create interactive user experiences. By the end of the course, you will be able to: - Describe the front-end developer role - Explain the core and underlying technologies that power the internet - Use HTML to create a simple webpage - Use CSS to control the appearance of a simple webpage - Explain what React is - Describe the applications and characteristics of the most popular UI frameworks For the final project in this course, you will create and edit a webpage using HTML and the Bootstrap CSS framework. Using a responsive layout grid, you will construct a responsive webpage containing text and images that looks great on any size screen. This is a beginner course intended for learners eager to learn the fundamentals of web development. To succeed in this course, you do not need prior web development experience, only basic internet navigation skills and an eagerness to get started with coding.الوحدات
Introduction to the Professional Certificate
-
4
Videos
-
3
Readings
-
1
Discussion
1
Discussions
- Meet and greet
4
Videos
- Introduction to the Program
- Introduction to the course
- Front-end, back-end and full-stack developer roles
- A day in the life of a front-end developer
3
Readings
- Course syllabus for Introduction to Front-End Development
- How to be successful in this course
- Capstone project demo: Little Lemon website
How the web works
-
5
Videos
-
1
Readings
-
1
Assignment
1
Assignment
- Knowledge Check - How the web works
5
Videos
- How the internet works
- What is a web server and how does it work?
- What are websites and webpages?
- What is a web browser and how does it work?
- Web hosting
1
Readings
- Additional Resources
Core internet technologies
-
9
Videos
-
7
Readings
-
4
Assignment
4
Assignment
- Knowledge Check - The Web and the Internet
- Self -review: Examine a Page
- Knowledge Check - Core Internet Technologies
- Module Quiz: Get started with Web Development
9
Videos
- Introduction to Internet Protocols
- Introduction to HTTP
- Intro to HTML, CSS and Javascript
- Webpages, Websites and Web Apps
- Developer tools
- Frameworks and libraries
- APIs and services
- What is a an IDE?
- Module Summary - Get started with Web Development
7
Readings
- HTTP examples
- Other Internet Protocols
- Exercise: Examine a web page
- Exercise: Edit a website using a browser developer tools
- Setting up your local development environment
- Visual Studio Code on Coursera
- Additional Resources
Getting started with HTML
-
8
Videos
-
2
Readings
-
1
Programming
-
1
Assignment
- Creating an HTML Document
1
Assignment
- Knowledge Check - Getting started with HTML
8
Videos
- What is Hyper Text Markup Language?
- HTML documents
- Linking documents
- Adding images to a webpage with HTML
- Use HTML to work with data in tables
- What are forms?
- Introduction to the DOM
- Web accessibility
2
Readings
- Simple HTML tags
- Additional Resources
CSS Basics
-
3
Videos
-
4
Readings
-
1
Programming
-
1
Assignment
- Styling a page
1
Assignment
- Knowledge check: CSS basics
3
Videos
- Selecting and styling
- Box model introduction
- Document flow - block vs. inline
4
Readings
- Different types of selectors
- Text and color in CSS
- Alignment basics
- Additional resources
Creating a web page
-
1
Videos
-
1
Discussion
-
1
Programming
-
1
Assignment
- Create and style a webpage
1
Assignment
- Module Quiz: Introduction to HTML and CSS
1
Discussions
- Discuss challenges you faced creating and styling the webpage
1
Videos
- Module Summary - Introduction to HTML and CSS
Intro to UI Frameworks and Libraries
-
6
Videos
-
4
Readings
-
2
Lab
-
3
Assignment
3
Assignment
- Self Review: Working with Bootstrap Grid
- Self review: Working with Bootstrap components
- Knowledge Check: Introduction to UI frameworks and libraries
2
Labs
- Working with Bootstrap grid
- Working with Bootstrap components
6
Videos
- Working with libraries
- Introduction to responsive design
- Getting started with Bootstrap
- Using Bootstrap styles
- Bootstrap grid
- Bootstrap components
4
Readings
- Bootstrap
- Using Bootstrap documentation
- Other CSS frameworks and libraries
- Additional Resources
Introduction to React
-
6
Videos
-
4
Readings
-
2
Assignment
2
Assignment
- Knowledge Check: Introduction to React
- Module Quiz: UI Frameworks
6
Videos
- Static and dynamic content
- Single page applications
- What is React?
- How React works
- Component hierarchy
- Module Summary: UI Frameworks
4
Readings
- Case Study: Why did Facebook engineers create React?
- The Virtual DOM
- Alternatives to React
- Additional Resources
Graded Assessment
-
1
Videos
-
2
Readings
-
1
Discussion
-
1
Lab
-
2
Assignment
2
Assignment
- Self review: Improve your Bio page with Bootstrap
- Course 1 Assessment: Introduction to Web Development
1
Discussions
- What challenges did you encounter while editing your biographical page?
1
Labs
- Improve your Bio page with Bootstrap
1
Videos
- Course 1 Recap: Introduction to Web Development
2
Readings
- About the Ungraded Lab: Improve your Bio page with Bootstrap
- Exemplar
Course wrap-up
-
1
Videos
-
1
Readings
-
1
Discussion
1
Discussions
- What did you find most challenging and most rewarding in this course?
1
Videos
- Congratulations, you have completed Introduction to Web Development
1
Readings
- Next steps after Introduction to Web Development
Auto Summary
Join "Introduction to Front-End Development" and kickstart your web development journey. This beginner-friendly course, led by Meta on Coursera, covers essential technologies like HTML, CSS, Bootstrap, and React. Over 1140 minutes, you'll learn to create responsive webpages and understand the role and tools of a front-end developer. Ideal for those new to web development, no prior experience needed—just enthusiasm and basic internet skills. Available with a Starter subscription.
Taught by Meta Staff