mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-15 10:00:47 -04:00
chore(curriculum): rm vids from 3 css design lectures (#61583)
This commit is contained in:
hbar1st
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672aa7005c24e45bbd53b20d
|
||||
title: What Are Design Briefs and How Do Developers Work with Them?
|
||||
challengeType: 11
|
||||
videoId: 9IbDnoNf52w
|
||||
challengeType: 19
|
||||
dashedName: what-are-design-briefs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are design briefs and how do developers work with them?
|
||||
|
||||
When it comes to designing new features or applications, a good first step would be to create a design brief.
|
||||
|
||||
A design brief is a document that outlines the objectives, goals, and requirements of a project. It is a roadmap that guides the design process and ensures that the final product meets the needs of the client.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bb619f0d4538d0528760d
|
||||
title: What Are Some Common Tools Developers Should Know About That Are Used by Designers in the Industry?
|
||||
challengeType: 11
|
||||
videoId: i5_Reeq4ueo
|
||||
challengeType: 19
|
||||
dashedName: what-are-some-common-tools-developers-should-know-about
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are some common tools developers should know about that are used by designers in the industry?
|
||||
|
||||
Design is the foundation of every enterprise-level web application. That's why designers and developers work closely to create user-focused interfaces that are visually appealing and functional.
|
||||
|
||||
Because of this, developers should be familiar with common design tools to make the most of what designers offer. Most of these design tools excel in vector-based design and prototyping.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672aa6ee9011775b27e23399
|
||||
title: What Is User-Centered Design?
|
||||
challengeType: 11
|
||||
videoId: 1OBUf7Jdcmk
|
||||
challengeType: 19
|
||||
dashedName: what-is-user-centered-design
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is user-centered design?
|
||||
|
||||
User-centered design is a web development approach that prioritizes the end user, from their needs to their preferences and limitations. The goal of user-centered design is to craft a web page that is intuitive, efficient to use, and pleasing for your users to interact with.
|
||||
|
||||
One of the first aspects of user-centered design is considering your target demographics. For example, if your intended user-base is younger, you might leverage more flashy eye-catching designs that grab their attention immediately. For an older audience, you might focus more on clear and streamlined designs without distractions.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bafd715f6ba77d57f3ec0
|
||||
title: What Are User Requirements, User Research, and Testing?
|
||||
challengeType: 11
|
||||
videoId: U3AE224w-d0
|
||||
challengeType: 19
|
||||
dashedName: what-is-user-research-and-testing-and-user-requirements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is user research/testing, and user requirements?
|
||||
|
||||
User research is the systematic study of the people who use your product. The goal is to measure user needs, behaviors, and pain points.
|
||||
|
||||
User research comes in many forms. Perhaps one of the most common is the Net Promoter Score, or NPS. The NPS measures how likely your users are to recommend your product to a friend. NPS is measured through a survey offered at key milestones along the user's journey, such as after 7 days, 30 days, and 90 days. NPS is measured on a scale of 0 to 10, with 9 and 10 indicating an active promoter of your site.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bafe4ef812b78696b0e27
|
||||
title: What Are Best Practices for Designing a Dark Mode Feature?
|
||||
challengeType: 11
|
||||
videoId: fhW5T_fJnLI
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-designing-a-dark-mode-feature
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for designing a dark mode feature?
|
||||
|
||||
Dark mode is a special feature on web applications where you can change the default light color scheme to a dark color scheme. This helps reduce eye strain and improve readability in low-light conditions. When designing your dark mode features, it is important to understand best practices to ensure that your dark mode feature is effective and user-friendly.
|
||||
|
||||
The first consideration is the avoidance of saturated colors in dark mode. Saturated colors are colors that are bright and intense. For example, a bright magenta button against a dark gray background can be too intense and cause eye strain. Instead, you should use desaturated colors in dark mode. Desaturated colors are colors that are less intense, have a lower saturation level, and more comfortable to look at in dark mode.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baff13bc5b3789691c75c
|
||||
title: What Are Best Practices for Designing Breadcrumbs?
|
||||
challengeType: 11
|
||||
videoId: u5PbtBwcdFE
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-designing-breadcrumbs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for designing breadcrumbs?
|
||||
|
||||
When it comes to web design, there are many types of navigational aids you can use. Examples include top navigation bars, sidebars, and footers. But if your site is on the more complex side with deeper levels of navigation, you might want to consider using breadcrumbs.
|
||||
|
||||
Breadcrumbs are a navigation aid that shows the user where they are in the site's hierarchy. Here is an example of what breadcrumbs look like for a mock-up electronics website:
|
||||
@@ -50,7 +43,7 @@ A type of container for images.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of this video for the answer.
|
||||
Review the beginning of this lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -58,7 +51,7 @@ A navigation aid only found on mobile sites.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of this video for the answer.
|
||||
Review the beginning of this lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -66,7 +59,7 @@ A type of container for text.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of this video for the answer.
|
||||
Review the beginning of this lecture for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
@@ -118,7 +111,7 @@ Which of the following is a common separator for breadcrumbs?
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle of this video for the answer.
|
||||
Review the middle of this lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -126,7 +119,7 @@ Review the middle of this video for the answer.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle of this video for the answer.
|
||||
Review the middle of this lecture for the answer.
|
||||
|
||||
---
|
||||
|
||||
@@ -138,7 +131,7 @@ Review the middle of this video for the answer.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the middle of this video for the answer.
|
||||
Review the middle of this lecture for the answer.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baffc684be178dd02fa06
|
||||
title: What Are Best Practices for Designing Cards?
|
||||
challengeType: 11
|
||||
videoId: IfHiiYdvQ3I
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-designing-cards
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for designing cards?
|
||||
|
||||
Card components are a very common occurrence in e-commerce, social media, and news sites. They are used to help display information in a structured way. When you are designing your cards, it is important to understand best practices so your users can easily understand the information you are trying to convey.
|
||||
|
||||
The first consideration for card design should be simplicity. You don't want your cards to be visually cluttered or display too much information. For example, if a card design is visually cluttered, there will be too much information for the user to process all at once. Having less information and good spacing between items on the card makes it easier for the user to process the information, and allows for multiple cards on the page.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bb009952c7a7904a750cb
|
||||
title: What Are Best Practices for Designing Infinite Scrolls?
|
||||
challengeType: 11
|
||||
videoId: yOpOd3gudQw
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-designing-infinite-scrolls
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for designing infinite scrolls?
|
||||
|
||||
Infinite scrolling is a design pattern that loads more content as the user scrolls down the page. Oftentimes, this is used on social media sites like Twitter. For example, if you are logged in and want to see more tweets, you can scroll down and more tweets will load. This is an example of infinite scrolling.
|
||||
|
||||
Infinite scrolling is also used as a substitute for pagination. Pagination is a design pattern that breaks up content into pages. This is often used when there is a lot of content to display. An example of pagination is when you search for something on Google and you see the search results on multiple pages. With pagination, you have to click on a button to go to the next page. With infinite scrolling, you just keep scrolling down and more content will load.
|
||||
@@ -40,7 +33,7 @@ A design pattern that changes the scrollbar on the page.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of the video when this concept is introduced.
|
||||
Review the beginning of the lecture where this concept is introduced.
|
||||
|
||||
---
|
||||
|
||||
@@ -48,7 +41,7 @@ A design pattern that changes the size of the page.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of the video when this concept is introduced.
|
||||
Review the beginning of the lecture where this concept is introduced.
|
||||
|
||||
---
|
||||
|
||||
@@ -56,7 +49,7 @@ A design pattern to change the background color of the page.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of the video when this concept is introduced.
|
||||
Review the beginning of the lecture where this concept is introduced.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bb015cfc889794359c4e0
|
||||
title: What Are Best Practices for Designing Modal Dialogs?
|
||||
challengeType: 11
|
||||
videoId: PbGkibOy27M
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-designing-modal-dialogs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for designing modal dialogs?
|
||||
|
||||
What is a modal? It's the type of pop-up that a website might show you on top of their content.
|
||||
|
||||
The content behind a modal is usually dimmed. This helps the user visually focus on the area you want them to interact with – in this case, the modal.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bb02009ffc0797ca567ab
|
||||
title: What Are Best Practices for Progress Indication on Forms, Registration, and Setup?
|
||||
challengeType: 11
|
||||
videoId: 1GLv71oPffs
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-progress-indication-on-forms-registration-and-setup
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for designing progress indication on forms, registration, and setup?
|
||||
|
||||
Progress indication is a way to show users how far they are in a process. It can be used in forms, registration, and setup processes. The goal is to help users understand where they are in the process and how much more they need to do.
|
||||
|
||||
For example, you can use a progress indication bar to show users what is left to do when filling forms. You don't want to create a situation where the user needs to fill out a lengthy form and they don't know how many more steps they need to complete. Transparency is key so the user knows whether they have enough time to sit down and complete the form or if they need to come back later.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bb02ecb230779bbbaccd9
|
||||
title: What Are Best Practices for Designing Shopping Carts?
|
||||
challengeType: 11
|
||||
videoId: _j1vT9yHN9w
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-designing-shopping-carts
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for designing shopping carts?
|
||||
|
||||
There are thousands of e-commerce websites on the internet, and the shopping cart is a crucial part of the e-commerce experience. A good design can make the shopping cart experience more enjoyable and increase sales. A poor design can lead to abandoned carts and lost sales.
|
||||
|
||||
In this lecture, we will discuss some best practices for designing shopping carts. The first design consideration is making sure the shopping cart is visible to users at all times. Most shopping cart designs will have the cart displayed in the upper right hand corner of the page. Users should see the number of items in their cart displayed next to the cart icon, and be able to click on the cart to see more details about the items they are purchasing.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bb03999f39379f67d8972
|
||||
title: What Is Progressive Disclosure?
|
||||
challengeType: 11
|
||||
videoId: Qy29tDRCJl4
|
||||
challengeType: 19
|
||||
dashedName: what-is-progressive-disclosure
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is progressive disclosure?
|
||||
|
||||
A progressive disclosure is a design pattern used to only show users relevant content based on their current activity and hide the rest. This is done to reduce cognitive load and make the user experience more intuitive.
|
||||
|
||||
For example, when you use Google's search page, most of your searches will be simple. So having a simple user interface with very few options makes sense. But for the few times you will need a more advanced search, Google provides an advanced search option that will reveal more options.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672bb04476b1997a1da8b79b
|
||||
title: What Is Deferred and Lazy Registration?
|
||||
challengeType: 11
|
||||
videoId: itW2wgtgC3A
|
||||
challengeType: 19
|
||||
dashedName: what-is-deferred-and-lazy-registration
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is deferred/lazy registration in UI design?
|
||||
|
||||
Lazy registration is a UI design pattern that allows users to browse and interact with your application without having to register. A good example of this would be an e-commerce site. Users should be able to browse through the products and add a few items to their cart. Then, if they are interested in purchasing, they will need to register.
|
||||
|
||||
The reason is that users need to see the value your site offers before they are willing to provide their information and register. When designing your applications, users should be able to see the value and feel like the application is safe to provide their information. Otherwise, they will not be willing to register and you will lose potential customers.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672aa6c9e379285acca5a2aa
|
||||
title: What Are Common Design Terms to Help You Communicate with Designers?
|
||||
challengeType: 11
|
||||
videoId: lLchbUmf8Lw
|
||||
challengeType: 19
|
||||
dashedName: what-are-common-design-terms-to-help-you-communicate-with-designers
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are common design terms to help you communicate with designers?
|
||||
|
||||
As a developer, you may need to work closely with designers. If you understand basic design terminology, you'll have a shared vocabulary and you'll be able to participate in the design process more actively. This can make your workflow more efficient and result in a better user experience.
|
||||
|
||||
So let's dive in. We'll start with the term layout. Layout is how the visual elements are arranged on a page or screen to communicate a message. These elements may include text, images, and white space. The layout is like the blueprint of a design. Designers must consider the placement, size, and hierarchy of each element.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baa97f2990e6631d522e7
|
||||
title: How Do You Create Good Background and Foreground Contrast in Your Designs?
|
||||
challengeType: 11
|
||||
videoId: VjKxo-QAz5k
|
||||
challengeType: 19
|
||||
dashedName: how-do-you-create-good-background-and-foreground-contrast-in-your-designs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How do you create good background and foreground contrast in your designs?
|
||||
|
||||
First, you may need to familiarize yourself with contrast. Contrast is the difference between two colors - or how easy it is to tell them apart.
|
||||
|
||||
Colors with a higher contrast will be more visually distinct, whereas colors with a lower contrast will be more visually similar. For example, black and white have a very high contrast ratio. Whereas light blue and light purple have less of a contrast.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baaa62d4b46667a8ac869
|
||||
title: What Is the Importance of Good Visual Hierarchy in Design?
|
||||
challengeType: 11
|
||||
videoId: mO7-xcBtftg
|
||||
challengeType: 19
|
||||
dashedName: what-is-the-importance-of-good-visual-hierarchy-in-design
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is the importance of good visual hierarchy in design?
|
||||
|
||||
Visual hierarchy refers to the way you layout and display the content of your page to guide the viewer's attention.
|
||||
|
||||
A strong hierarchy can provide a clear path for the eye to follow, ensuring that the information you convey is consumed in the order that you intended.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baab2a0c3df66ad987b94
|
||||
title: How Does Scale Work in Design?
|
||||
challengeType: 11
|
||||
videoId: v-6Yh-GnDtg
|
||||
challengeType: 19
|
||||
dashedName: how-does-scale-work-in-design
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How does scale work in design?
|
||||
|
||||
The "scale" of something refers to its size.
|
||||
|
||||
When you're looking at scaling in your web design, you're looking at the size relationships between different elements, and how these elements might adapt to different screen sizes.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baabf16290b66e6b79a39
|
||||
title: How Does Alignment Work in Design?
|
||||
challengeType: 11
|
||||
videoId: pdU32PTAb28
|
||||
challengeType: 19
|
||||
dashedName: how-does-alignment-work-in-design
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
How does alignment work in design?
|
||||
|
||||
When you are designing web pages, it is important to create cohesive and visually appealing designs. One way to achieve this is through the use of alignment.
|
||||
|
||||
Alignment is the process of arranging text and images in a way that creates a visual connection between elements.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baacb7f2f446728e77efe
|
||||
title: What Is the Importance of Whitespace in Design?
|
||||
challengeType: 11
|
||||
videoId: _gG8xxq1TcA
|
||||
challengeType: 19
|
||||
dashedName: what-is-the-importance-of-whitespace-in-design
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is the importance of whitespace in design?
|
||||
|
||||
White space refers to any type of space around elements like images, text, and buttons. White space is important in design because it helps to create a balance between the elements on the page.
|
||||
|
||||
Let's take a look at some examples of how white space can be used effectively in design.
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baad7bbc4f86762ca173e
|
||||
title: What Are Best Practices for Working with Images in Your Designs?
|
||||
challengeType: 11
|
||||
videoId: CYHzEAPnPzU
|
||||
challengeType: 19
|
||||
dashedName: what-are-best-practices-for-working-with-images-in-your-designs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What are best practices for working with images in your designs?
|
||||
|
||||
Adding images to your websites is a great way to engage your users and increase the visual appeal of your site. But there are a few things to consider when working with images in your designs.
|
||||
|
||||
The first thing to consider is creating responsive images. Responsive images are images that scale to fit the size of the screen they are being viewed on. This is important because it ensures that your images look good on all devices, from desktops to mobile phones.
|
||||
@@ -126,7 +119,7 @@ The number of points per one inch of an image.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of the video when PPI was first introduced.
|
||||
Review the beginning of the lecture where PPI was first introduced.
|
||||
|
||||
---
|
||||
|
||||
@@ -134,7 +127,7 @@ The number of pixels per one centimeter of an image.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of the video when PPI was first introduced.
|
||||
Review the beginning of the lecture where PPI was first introduced.
|
||||
|
||||
---
|
||||
|
||||
@@ -142,7 +135,7 @@ The number picas per one image.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Review the beginning of the video when PPI was first introduced.
|
||||
Review the beginning of the lecture where PPI was first introduced.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
---
|
||||
id: 672baae11d06c867a16f64e1
|
||||
title: What Is Progressive Enhancement?
|
||||
challengeType: 11
|
||||
videoId: G-LBLlpdNGg
|
||||
challengeType: 19
|
||||
dashedName: what-is-progressive-enhancement
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Watch the video or read the transcript and answer the questions below.
|
||||
|
||||
# --transcript--
|
||||
|
||||
What is progressive enhancement?
|
||||
|
||||
Progressive enhancement is a design approach that ensures all users, regardless of browser or device, can access the essential content and functionality of an application.
|
||||
|
||||
It focuses on delivering a core experience that works for everyone, while offering extra features and improvements to users with more advanced browsers or better internet connections.
|
||||
|
||||
Reference in New Issue
Block a user