Course syllabus for Introduction to Front-End Development

This course is the first of a series that aims to help you learn more about web development and prepares you for using Bootstrap on a biographical page you will create. By the end of this course, you’ll 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

In this course, you will explore the following:

Module 1: Get started with web development In this module, you are introduced to web development. You’ll learn about the different types of web developer roles and the responsibilities of front-end, back-end and full-stack developers. You will get a streamlined overview of the core technologies of HTML, CSS and JavaScript and explore the concepts that underpin how the internet works. Furthermore, you will be able to access hands-on exercises to edit a website.

After completing this module, you will be able to:

1. Describe the web developer job role.
2. Distinguish between front-end, back-end and full-stack developers.
3. Explain how data moves through the internet.
4. Describe the technologies that underpin the internet.

Module 2: Introduction to HTML5 and CSS

Here you'll learn about HTML5 and CSS. You'll also examine how to construct HTML documents and add basic styling and layout using CSS.

After completing this module, you will be able to:

1. Use HTML to create a simple webpage.
2. Use CSS to define the style of a simple webpage.

Module 3: UI Frameworks

In this module, you'll learn about UI frameworks. In addition, you will learn how to use the Bootstrap framework to build responsive interfaces. You'll explore the benefits of working with UI frameworks.

After completing this module, you will be able to:

1. Outline the concepts that exist in most UI frameworks.
2. Use the Bootstrap CSS framework to create webpages.
3. Leverage Bootstrap documentation to reproduce and modify CSS components.
4. Use Bootstrap themes.
5. Describe the basics of React in relation to other frameworks and web technologies.

Module 4: Graded Assessment

Here you'll learn about the graded assessment. After you complete the individual units in this module, you'll synthesize the skills from the course to create and style a biographical page. You'll also have the opportunity to reflect on the course content and the learning path that lies ahead.

After completing this module, you will be able to:

1. Create and style a biographical page.

How to be successful in this course

Taking an online course can be overwhelming. How do you learn at your own pace and successfully achieve your goals?

Here are some general tips that can help you stay focused and on track.

Set daily goals for studying

Ask yourself what you hope to accomplish in your course each day. Setting a clear goal can help you stay motivated and beat procrastination. The goal should be specific and easy to measure, such as "I’ll watch all the videos in Module 2 and complete the first programming assignment". And don’t forget to reward yourself when you make progress towards your goal!

Created a dedicated study space

It’s easier to recall information if you’re in the same place where you first learned it, so having a dedicated space at home to take online courses can make your learning more effective. Remove any distractions from the space and if possible, make it separate from your bed or sofa. A clear distinction between where you study and where you take breaks can help you focus. 

Schedule time to study on your calendar

Open your calendar and choose a predictable, reliable time that you can dedicate to watching lectures and completing assignments. This helps ensure that your courses won’t become the last thing on your to-do list.

Tip: You can add deadlines for a Coursera course to your Google calendar, Apple calendar, or another calendar app.

Keep yourself accountable

Tell your friends about the courses you’re taking, post achievements to your social media accounts or blog about your homework assignments. Having a community and support network of friends and family to cheer you on makes a difference!

Actively take notes

Taking notes can promote active thinking, boost comprehension and extend your attention span. It’s a good strategy to internalize knowledge whether you’re learning online or in the classroom. So, grab a notebook or find a digital app that works best for you and start synthesizing key points.

Tip: While watching a lecture on Coursera, you can click the 'Save Note' button below the video to save a screenshot to your course notes and add your own comments.

Join the discussion

Course discussion forums are a great place to ask questions about assignments, discuss topics, share resources and make friends. Our research shows that learners who participate in the discussion forums are 37% more likely to complete a course. So make a post today!

Do one thing at a time

Multitasking is less productive than focusing on a single task at a time. Researchers from Stanford University found that “People who are regularly bombarded with several streams of electronic information cannot pay attention, recall information or switch from one job to another as well as those who complete one task at a time.” Stay focused on one thing at a time. You’ll absorb more information and complete assignments with greater productivity and ease than if you were trying to do many things at once. 

Take breaks

Resting your brain after learning is critical to high performance. If you find yourself working on a challenging problem without much progress for an hour, take a break. Walking outside, taking a shower or talking with a friend can help you to re-energize and even give you new ideas on how to tackle the project.

Your learning journey starts now! 

While preparing for the module quiz or working on achieving your learning goals you're encouraged to:  

• Work through each lesson in the learning pathway. Try not to skip any activities or lessons unless you are certain that you already know this information well enough to move ahead.   
• Take the opportunity to go back and watch a video or read all the information provided before moving on to the next lesson or module. 
• Complete all the knowledge and module quizzes and exercises.
• Read the feedback carefully when answering quizzes, as this will help you to reinforce what you are learning. 
• Make use of the practical learning environment provided by the exercises. You can gain substantial reinforcement of your learning through the step-by-step application of your skills.

Capstone project demo: Little Lemon website

You’ve just begun your coding journey on the Meta front-end developer program. By the end of this program, you'll put your new skills to work by completing a real-world portfolio project, where you'll create your own dynamic front-end web application. Completing this project will help you to validate the knowledge and skills that you have gained.

What you will be able to develop

You will build this web app yourself in React and use all of the excellent tools available. Putting your newly acquired skills into practice, you will demonstrate how to build and program part of a responsive web app.

It includes the following elements:

• A home screen with information about the restaurant.
• A table reservation system.
• A profile screen for users to enter their personal details.
• Navigation that enables users to move between parts of the web app.

Project preview

In the video below, you can take a trip into the future and get a preview of what you'll be able to create with your new set of skills at the end of this program.

That's what you'll be able to accomplish by the end of this Front-end development program. Pretty cool, right? It’s a modern front-end application for the Little Lemon restaurant and the best thing about this project is that it’s part of your portfolio and you'll be able to showcase it to any prospective employer as proof of your abilities. It shows the multiple skills you will learn during this program.

Conclusion

In this reading, you explored the front-end application for the Little Lemon restaurant that demonstrates the kind of project you will develop towards the end of the program.

Best of luck in your coding journey.

Meet and greet

Meet and greet Time to share and get to know your fellow classmates! Provide a brief introduction to your classmates.

If you are not sure about what to include in your introduction you can use some of the following topics to guide you.

Suggested Topics

Where in the world are you from?

You can share which part of the world you are from or in which country you live. If you share this information, it’s a good idea not to share your specific location or personal details such as a mailing address.

What is your vision and what are your goals?

• Why did you enroll in this program?

• What are you hoping to achieve in your life once you have completed this program?

• What are your career goals?

• What is your background?

• What do you currently do?

• Are you pursuing a new career or switching careers and/or interested in learning something new?

  Anything else that may be of interest!

Share information that may help others connect with you when searching the forums. Share common interests with your classmates so that others with like interests can find you.