In this module, you will be assessed on the key skills covered in the Course.
Learning Objectives
- Synthesize the skills from this course to create and style a simple Bio page.
- Reflect on this course’s content and on the learning path that lies ahead.
Graded Assessment
Video: Course 1 Recap: Introduction to Web Development
Module 1: Get Started with Web Development
- Roles of front-end, back-end, and full-stack developers.
- Core technologies: HTML, CSS, JavaScript.
- How the Internet works: from request to response.
- Web browser tools for efficient coding.
- IDEs for faster development.
Module 2: Introduction to HTML and CSS
- Creating HTML documents and websites.
- HTML tags and linked documents.
- Document Object Model (DOM).
- Web accessibility and assistive technologies.
- Styling webpages with CSS.
- Selecting and styling elements.
- Text, color, and alignment for user experience.
- Combining HTML and CSS to create webpages.
Module 3: Bootstrap and React
- Responsive design and UI frameworks.
- Getting started with Bootstrap: styles and benefits.
- Alternative UI frameworks and libraries.
- Introduction to React: purpose and high-level overview.
- Virtual DOM, component hierarchy, and alternatives.
Assessment:
- Edit your biographical webpage using acquired knowledge and skills.
In this course, you
were introduced to the foundations
of web development. Let’s do a brief recap
of what you covered. Module 1 was get started
with web development. In this first module, you learned about the
different types of web developers and the roles and responsibilities
of front-end, back-end, and
full-stack developers. You gained knowledge about the
core technologies of HTML, CSS, and JavaScript, and explored the concept of
how the Internet works. The module also
featured an example to show what a day in the life
of a web developer is like. Next, you learned more about
webpages, web servers, and web browsers,
and how they all work together to create
what we call the Internet. You covered what happens when you send a request to look for something online and how that information
gets back to you. Then you were introduced to core Internet technologies
and how they interact. You explore some web
browser tools that you can use to help you
code more efficiently. Finally, you learned
what an IDE is and how it can help you speed
up your work to write code. An introduction to HTML
and CSS followed Module 2. In Module 2, you learned
about HTML and CSS. In HTML, you discovered how
to create an HTML document, use simple HTML tags and linked documents
to create a website. Then you learned about the
Document Object Model or DOM, and how it’s used to display the content that you
see on your device. In addition, you covered techniques to improve
web accessibility and some assistive
technologies available to provide universal
access to the Internet. Next, you learned how to
use CSS to style webpages. You explored how to
select and style elements and use text, color, and alignment to make
the web pages you create look great and offer
a great user experience. You then use your new
HTML and CSS skills together to create a webpage. In Module 3, you learned how to use the Bootstrap
framework to build responsive interfaces
and got to know the benefits of working
with UI Frameworks. First, you were introduced
to the concept of responsive design and
working with libraries. Then you learned how
to get started with the Bootstrap library
and how to use Bootstrap styles
and you explored some alternative UI
frameworks and libraries. Finally, you were introduced to the JavaScript library react. You learned why
it was created by meta-engineers and how it
works at a high level. You then briefly explored the virtual DOM
component hierarchy and some alternatives to react. Well done on completing
this course recap. Now it’s time to
put into practice all that you’ve learned
in the graded assessment. Are you ready to edit your
biographical webpage? Good luck.
Reading: About the Ungraded Lab: Improve your Bio page with Bootstrap
Reading
In this Ungraded Lab, you will update your biographical page from Week 2 – Introduction to HTML5 and CSS to use Bootstrap.
The expected outcome is a two-column biographical page with your name and a photo in the left column and your favorite music artists and films in the right column.
The image below shows how your page should look once you finish the assessment.
Practice Quiz: Self review: Improve your Bio page with Bootstrap
Using the web browser developer tools to check, does your web page content stack vertically on a mobile device?
Yes
That’s correct! The web page content stacks vertically on mobile due to the Bootstrap grid rules.
Does the profile photo display in the right column of the page?
No
That’s correct! The photo displays on the left side of the page as it was added to the first column of the grid.
Does the link to My Meta Profile display as a button?
Yes
That’s correct! The link displays as a button because the Bootstrap button CSS class was added to the element.
Reading: Exemplar
Reading
By updating your biographical page to use Bootstrap, your new page should be similar to the image below.
Your HTML file structure and content should be similar to the snippet below. Note where the Bootstrap CSS classes were used in the different HTML elements.
<!DOCTYPE html>
<html>
<head>
<title>My Bio Page</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div id="bio" class="col-12 col-lg-6 text-center">
<h1>Jane</h1>
<img src="photo.jpg" class="img-fluid" />
</div>
<div id="more" class="col-12 col-lg-6">
<h2>Favorite Music Artists</h2>
<ul>
<li>Metallica</li>
<li>Bob Marley</li>
<li>Madonna</li>
<li>The Beatles</li>
<li>Pink Floyd</li>
</ul>
<h2>Favorite Films</h2>
<ol>
<li>Pulp Fiction</li>
<li>The Godfather</li>
<li>The Lord of the Rings</li>
<li>Iron Man</li>
<li>Inception</li>
</ol>
<a href="https://www.meta.com/user/123" class="btn btn-primary">My Meta Profile</a>
</div>
</div>
</div>
<script src="bootstrap.bundle.min.js"></script>
</body>
</html>As a developer, Bootstrap is one of the many libraries in your toolkit to help build web applications. Bootstrap has many utilities and components. We encourage you to read their documentation and experiment further with styling your webpage.
Quiz: Course 1 Assessment: Introduction to Web Development
True or False. In the request/response cycle, the web browser sends the request.
True
Well done. The web browser sends a request and receives a response from the web server.
In the web browser, what is the role of HTML?
To describe the content of the web page
Well done. HTML describes the content of the web page.
Which of the following issues does UDP solve? Select all that apply.
What will display on the web page inside the web browser for the following HTML document?
<!DOCTYPE html>
<html>
<head>
<title>Little Lemon</title>
</head>
<body>
<p>Our Menu</p>
</body>
</html>Our Menu
Which HTML tag is used to link to other HTML documents?
The anchor tag <a>
Well done. The anchor tag is used to link to other HTML documents.
What type of selector is used for the following CSS rule?
.header {
width: 50%;
}Class selector
Well done. The class selector is prefixed with a . character.
What is the padding-box width for the following CSS rule?
div {
width: 10px;
padding: 5px;
margin-left: 10px;
margin-right: 10px;
}20 pixels
Well done. The padding-box width is the content width + padding width.
How many columns does Bootstrap’s grid consist of?
12
Well done. Bootstrap’s grid consists of 12 columns.
In the following HTML, the btn-primary CSS class is applied to the button element. What is this CSS class known as in Bootstrap?
<button class="btn btn-primary">Submit</button>Modifier
React stores a representation of the browser DOM in memory. What is this representation called?
The Virtual DOM
Well done. The virtual DOM is used to represent the browser DOM in memory.
Course wrap-up
Video: Congratulations, you have completed Introduction to Web Development
Congratulations! You have successfully completed the Introduction to Web Development course and built a strong foundation in front-end development skills.
Key Learnings:
- Web developer roles: You can now distinguish between front-end, back-end, and full-stack developers.
- Web development fundamentals: You understand how data travels through the Internet and the technologies that underpin it.
- HTML and CSS: You can create and style basic web pages using HTML and CSS.
- Bootstrap: You can use Bootstrap to create responsive web pages and access and modify its components.
- React introduction: You have a basic understanding of React and its relation to other frameworks.
Next Steps:
- Enroll in the second course: Continue your learning journey and deepen your front-end development skills.
- Develop a full-fledged website: Apply your acquired knowledge to create a functional website as part of the final assessment.
- Earn Meta front-end developer certification: Upon completing all courses, obtain a prestigious industry-recognized certification.
- Showcase your skills: Include your website project in your portfolio to demonstrate your capabilities to potential employers.
This course completion marks a significant step in your development as a front-end developer. Keep pushing forward and learning, and you will achieve your goals!
Congratulations on
completing the introduction to web development course. You’ve worked hard
to get here and developed a lot of new
skills during the course. You should now have a
great foundation of front-end web development
skills that you can build on. You’ve also demonstrated
your skill set by editing and styling a web page in the
graded assessment. Following completion
of the first course, you are now able to describe
the web developer job role, distinguish between front and backend and full
stack developers, explain how data moves
through the Internet, and describe the technologies
that underpin the Internet. The key skills measured in
the lab showed your ability to use HTML to create
a simple web page, use CSS to define the style
of a simple web page, outline the concepts that
exist in most UI frameworks using Bootstrap as an example to directly reference
common practice. You use the Bootstrap CSS
framework to create web pages. In addition, you should now
have the ability to use Bootstrap documentation
to reproduce and modify CSS components, use Bootstrap themes to
speed up your workflow, and describe the
basics of React in relation to other frameworks
and web technologies. What are the next steps? Well, this is the
first course in the Meta front-end developer
professional certificate. While you’ve established
a good foundation so far, there’s still more
for you to learn. If you’ve enjoyed this course
and want to discover more, why not enroll in
the second course? Throughout each
of these courses, you’ll continue to
develop your skill set. In the final assessment, you’ll bring together all
the skills you’ve learned and create your own fully
functional website. Whether you’re just
starting out as a technical professional
or student, this project will prove
your knowledge of the values and
capabilities of React. You’ll have a functional
website to include in your portfolio to demonstrate your skills to
potential employers. This shows employers that you are self-driven and innovative. It also speaks
volumes about you as an individual and your drive
to continue your growth. Once you’ve completed
all the courses in this professional
certificate, you’ll receive a
Coursera certification for Meta front-end developer. Meta certifications provide globally-recognized and
industry-endorsed evidence of mastering technical skills. Congratulations once, again, on reaching the end
of this course. It’s been a pleasure
to embark on this voyage of
discovery with you. Best of luck, and do continue to follow
your learning journey.