Forem: CodeWithYaku

AI DeepSeek: The Developer’s Secret Weapon to Revolutionize Your Workflow 🚀

CodeWithYaku — Tue, 28 Jan 2025 11:00:12 +0000

Artificial Intelligence (AI) is no longer a futuristic concept—it’s here, and it’s transforming industries at an unprecedented pace. For developers, AI tools like DeepSeek are becoming the ultimate game-changers. Whether you’re a frontend wizard, a backend guru, or a full-stack maestro, DeepSeek is poised to revolutionize how you work, code, and innovate.

In this article, we’ll dive deep into what AI DeepSeek is, how it’s reshaping the developer landscape, and why it’s the secret weapon you need to supercharge your workflow. Let’s get started!

What is AI DeepSeek? 🤔

AI DeepSeek is an advanced AI-powered platform designed to assist developers in automating repetitive tasks, optimizing code, and accelerating development cycles. Think of it as your AI pair programmer, debugging assistant, and productivity booster—all rolled into one.

DeepSeek leverages cutting-edge machine learning models to understand your codebase, predict potential issues, and suggest improvements in real-time. It’s like having a senior developer by your side, 24/7, without the coffee breaks.

How AI DeepSeek Will Change the Game for Developers 🎮

1. Automate Repetitive Tasks

Let’s face it: no developer enjoys writing boilerplate code or debugging the same issues over and over. DeepSeek automates these mundane tasks, freeing up your time to focus on what really matters—building innovative solutions.

For example, DeepSeek can:

Generate boilerplate code for APIs, UI components, or database schemas.

Automatically refactor code to improve readability and performance.

Identify and fix common bugs before they even reach production.

2. Supercharge Your Debugging Process

Debugging is often the most time-consuming part of development. DeepSeek’s AI-powered debugging tools can analyze your code, pinpoint errors, and suggest fixes ( that actually works ) in seconds.

Imagine this: you’re working on a complex Svelte app , and you encounter a cryptic error. Instead of spending hours Googling solutions, DeepSeek instantly identifies the issue and provides a detailed explanation and fix.

3. Optimize Your Code Like Never Before

DeepSeek doesn’t just help you write code—it helps you write better code. By analyzing patterns in your codebase, it can suggest optimizations for performance, security, and scalability.

For instance, if you’re building a landing page, DeepSeek can recommend CSS and JavaScript optimizations to ensure your page loads faster and ranks higher on search engines.

4. Accelerate Learning and Skill Development

DeepSeek isn’t just a tool—it’s a mentor. Whether you’re learning a new framework like Svelte or mastering advanced CSS techniques (like the ones in this CSS quiz), DeepSeek provides real-time feedback and suggestions to help you grow as a developer.

5. Enhance Collaboration Across Teams

With DeepSeek, collaboration becomes seamless. Its AI-driven insights ensure that everyone on your team is on the same page, whether you’re working on REST APIs, GraphQL, or gRPC (like we explored in this API comparison).

Real-World Use Cases of AI DeepSeek 🌍

1. Frontend Development

DeepSeek can help frontend developers create responsive, pixel-perfect designs faster than ever. From optimizing CSS to automating UI testing, DeepSeek ensures your frontend code is clean, efficient, and user-friendly.

2. Backend Development

For backend developers, DeepSeek can streamline database management, API development, and server optimization. It’s like having a DevOps engineer and a database administrator rolled into one AI-powered assistant.

3. Full-Stack Development

Full-stack developers can leverage DeepSeek to bridge the gap between frontend and backend development. Whether you’re building a React.js todo app or integrating WebRTC with Svelte, DeepSeek ensures seamless integration and optimal performance.

Why Developers Love AI DeepSeek ❤️

Time-Saving: Automate repetitive tasks and focus on creativity.

Error-Free Code: Catch bugs before they become problems.

Continuous Learning: Get real-time feedback to improve your skills.

Scalability: Build robust, scalable applications with ease.

The Future of Development with AI DeepSeek 🔮

As AI continues to evolve, tools like DeepSeek will become indispensable for developers. They won’t replace developers—they’ll empower us to achieve more, faster, and with fewer headaches.

The question isn’t whether you should start using AI DeepSeek—it’s when. And the answer is: now.

Ready to Revolutionize Your Workflow? 🚀

AI DeepSeek is more than just a tool—it’s a paradigm shift in how we approach development. Whether you’re optimizing your frontend workflow (like the tips in this article) or exploring new technologies, DeepSeek is your ultimate ally.

So, what are you waiting for? Dive into the world of AI DeepSeek and unlock your full potential as a developer. The future of coding is here, and it’s smarter than ever.

Let’s Stay Connected! 🌐

If you enjoyed this article and want to stay updated on the latest in tech, development, and AI, follow me on my socials:

🐦 X (Twitter)

🔵 Bluesky

💻GitHub

👔LinkedIn

🎥 YouTube

Let’s build, learn, and grow together! 🚀

What’s your take on AI DeepSeek? Let me know in the comments below! 👇

Unleash the Power of LangChain 🦜️🔗: 10 Cool Use Cases You Can Build.

CodeWithYaku — Sun, 30 Apr 2023 05:52:01 +0000

Introduction

Wow, have you heard about LangChain? It's an incredible technology that's taking the world by storm! LangChain lets developers build applications using large language models (LLMs) and combine them with other sources of computation or knowledge. It's like ChatGPT, but with so much more customization! With this powerful library, developers can create amazing applications such as question answering, chatbots, and agents.

Document Summarization: Leverage LangChain's Data Augmented Generation to interact with external data sources and summarize long pieces of text, making it easy for users to digest key information.

Customized Question Answering: Build a question-answering system that can search specific documents or databases, providing users with precise answers to their queries.

Intelligent Chatbots: Create chatbots capable of understanding and responding to user inputs, offering a more interactive and engaging experience.

Virtual Assistants: Develop a virtual assistant that can perform various tasks, such as scheduling appointments, managing to-do lists, and offering personalized recommendations.

Language Translation: Use LangChain to build an application that can translate text between different languages, breaking down language barriers and facilitating communication.

Sentiment Analysis: Analyze user-generated content like product reviews or social media posts to determine the sentiment behind the text, helping businesses understand customer feedback.

Content Generation: Develop an application that can generate creative content, such as blog posts, social media captions, or even poetry, based on user inputs or specific topics.

Code Completion: Create an intelligent code completion tool that helps developers write code more efficiently by suggesting relevant code snippets based on the current context.

Personalized Learning: Build a learning platform that can understand a user's knowledge gaps and generate customized content to help them learn and grow effectively.

Collaborative Filtering Develop a recommendation system that leverages LangChain's memory capabilities to provide users with personalized suggestions based on their preferences and browsing history.

Conclusion

LangChain offers endless possibilities for creating powerful applications that harness the capabilities of large language models.

By combining LLMs with other sources of computation or knowledge, you can build innovative solutions to tackle various problems and enhance user experiences. Start exploring LangChain today and unlock its potential for your next project

If you would like to check out the project visit LangChain
Make sure you follow me on

Github
Twitter

If you need anything else send me an email - brianlemba2@gmail.com

Thanks for reading 😁🙌

Understanding APIs: Comparing REST, SOAP, GraphQL, and gRPC:

CodeWithYaku — Tue, 29 Nov 2022 20:33:50 +0000

APIs are an integral part of modern software development, allowing applications and services to communicate and exchange data. With the development of technology, there are now four main types of APIs to choose from: REST, SOAP,
GraphQL, and gRPC.

Whether you’re an application architect or a backend developer, it’s essential to understand which type of API is best suited to your particular application. Each API has its own architecture, which has adapted to the changing needs of the times. As technology has evolved and our relationship with it has changed, APIs have emerged to fill new gaps and serve new purposes.

In this article, we compare SOAP, REST, GraphQL, and gRPC APIs to each other, exploring their pros and cons, use cases, and considerations when selecting the best one for your needs. Additionally, we’ll discuss how blockchain technology is being incorporated into these APIs to provide users with a more secure and efficient platform.

REST (Representational State Transfer)

REST is a type of software architecture that uses a stateless client-server model to create an application. The client (browser) sends a request to the server, which then processes the request and sends a response back to the client. The client can then take the response and display it in a user interface.

In JavaScript, we can create a REST API using the Node.js framework and Express.js. The following is a basic example of a REST API using Node and Express:

// Import Express
const express = require('express');

// Create an Express App
const app = express();

// Set up a GET request
app.get('/', (req, res) => {
  res.send('Hello World!');
});

// Listen for requests
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

In this example, we’ve imported Express and created an Express App. We’ve then set up a GET request, which is a type of request used to retrieve data from the server. Finally, we’ve set up the server to listen for requests on port 3000.

SOAP (Simple Object Access Protocol)

SOAP is a type of web service protocol that sends and receives data in the form of XML. It is used to exchange data between applications over the internet, and is based on a set of rules called the Simple Object Access Protocol.

We can create a SOAP API in JavaScript using the Node.js framework and the soap package. The following is a basic example of a SOAP API using Node and soap:

// Import the soap package
const soap = require('soap');

// Create a SOAP Server
const myService = {
  MyService: {
    MyPort: {
      MyFunction: (args) => {
        return {
          name: args.name
        };
      }
    }
  }
};

const xml = require('fs').readFileSync('myservice.wsdl', 'utf8');

// Initialize the SOAP Server
const server = soap.listen(app, '/wsdl', myService, xml);

// Listen for requests
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

In this example, we’ve imported the soap package and created a SOAP Server. We’ve then defined a MyFunction function, which is used to process incoming XML requests. Finally, we’ve initialized the SOAP Server and set up the server to listen for requests on port 3000.

GraphQL

GraphQL is a query language used to access data from an API. It is based on the idea of a Graph, where data is organized into nodes and edges. It is designed to be flexible and efficient, allowing clients to request only the data they need.

We can create a GraphQL API in JavaScript using the Node.js framework and the graphql package. The following is a basic example of a GraphQL API using Node and graphql:

// Import the graphql package
const { graphql, buildSchema } = require('graphql');

// Define the schema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Define the root query
const root = {
  hello: () => 'Hello World!'
};


// Create the GraphQL server
const server = graphql(schema, root);

// Listen for requests
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

In this example, we’ve imported the graphql package and defined a schema. We’ve then defined a root query, which is used to process incoming GraphQL requests. Finally, we’ve created the GraphQL server and set up the server to listen for requests on port 3000.

gRPC (gRPC Remote Procedure Calls)

gRPC is a remote procedure call (RPC) framework that is used to create distributed applications. It uses the HTTP2 protocol to establish a connection between the client and the server, and is designed to be fast and efficient.

We can create a gRPC API in JavaScript using the Node.js framework and the grpc package. The following is a basic example of a gRPC API using Node and grpc:


// Import the grpc package
const grpc = require('grpc');

// Define the service
const server = new grpc.Server();


// Define the method
server.addService({
  sayHello: (call, callback) => {
    callback(null, { message: 'Hello ' + call.request.name });
  }
});

// Start the server
server.bind('0.0.0.0:3000', grpc.ServerCredentials.createInsecure());
server.start();

// Listen for requests
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

In this example, we’ve imported the grpc package and defined a service. We’ve then defined a method, which is used to process incoming gRPC requests. Finally, we’ve started the server and set up the server to listen for requests on port 3000.

Thats it for the examples

I will outline the Pros and Cons, however if you feel I have left anything let me know in the comments below

*REST (Representational State Transfer): *

Pros:

Scalable to meet the needs of the application
Easy to implement
No additional software or hardware needed
Good performance

Cons:

Difficult to maintain
Not suitable for real-time applications
Unstructured data transfer
No support for streaming data

SOAP (Simple Object Access Protocol):

Pros:

Supports both synchronous and asynchronous communication
Supports streaming data
Supports security protocols
Supports multiple data formats

Cons:

Complex to implement and maintain
Poor performance
Not suitable for real-time applications
Difficult to debug

GraphQL:

Pros:

Easy to use and implement
Flexible and efficient
Supports multiple data formats
Improved performance

Cons:

Difficult to maintain
No built-in security protocols
Not suitable for real-time applications

gRPC (gRPC Remote Procedure Calls):

Pros:

Easy to use and implement
Supports multiple languages
Supports streaming data
Good performance

Cons

Difficult to maintain
Poor error handling
Not suitable for real-time applications
No built-in security protocols

Thanks for reading this far if you enjoyed the article please make sure to follow me on Twitter CodeWithYaku and github at Yaku.

7 tips on how to optimize your Frontend workflow efficiency

CodeWithYaku — Thu, 10 Feb 2022 02:48:52 +0000

What is a workflow?

A workflow is a collection of tools and processes that you use to get your work done. It might include a text editor, a code linter, a build tool, and a version control system.

Why optimize your workflow?

💅A well-optimized workflow can

1.Save you time ⏰

2.Improve your productivity 📊

3.Make your code easier to read and maintain 🐕‍🦺

There are many different ways to optimize your workflow. Here are 7 tips that can help you get started.

1. Use a text editor that supports syntax highlighting and autocompletion.

A good text editor can make your life a lot easier. It should have syntax highlighting and autocompletion to make it easy to read and write code.

2. Use a code linter to help you write clean code.

A code linter can help you write code that is error-free and consistent. It can also help you learn the rules of your language.

3. Use a build tool to automate your development tasks.

A build tool can automate common tasks, such as compiling your code, minifying your code, and running tests. This can save you time and improve your productivity.

4. Use a version control system to track your changes and collaborate with others.

A version control system can help you track your changes, collaborate with others, and roll back changes if necessary.

5. Use a package manager to manage your dependencies.

A package manager can help you install and manage your dependencies. This can make it easier to keep your code up-to-date.

6. Use a code formatter to format your code automatically.

A code formatter can help you keep your code organized and consistent. It can also make your code easier to read and maintain.

7. Use a code scanner to scan your code for potential security vulnerabilities.

A code scanner can help you find and fix potential security vulnerabilities in your code. This can help keep your code safe and secure.

Thank you for reading! I hope you found this blog useful. If you're interested in following my GitHub profile, please click the "follow" button below. I'll be sure to keep you updated on my latest projects follow

121 CSS Quiz Questions that will refresh your knowledge of CSS in style 😎

CodeWithYaku — Sun, 30 Jan 2022 22:14:11 +0000

Hi everyone and welcome to this awsome list 121 CSS quiz that will test your knowledge on CSS and make you 100% confident on your job interview. As a bonus this list inlcudes all 121 answers to the quiz question 😎.

To get started clone this repo here https://github.com/Yakumwamba/css-interview-quiz-and-answers.git

and Also don't forget to follow me on github if you want more content on frontend development in general.

Enjoy this Awesome quiz Thanks.

CSS

Q1. In the following example, which selector has the highest specificity ranking for selecting the anchor link element?

ul li a
a
.example a
div a

[x] .example a
[ ] div a
[ ] a
[ ] ul li a

Q2. Using an attribute selector, how would you select an `<a>` element with a "title" attribute?

[x] a[title]{...}
[ ] a > title {...}
[ ] a.title {...}
[ ] a=title {...}

Q3. CSS grid and flexbox are now becoming a more popular way to create page layouts. However, floats are still commonly used, especially when working with an older code base, or if you need to support older browser version. What are two valid techniques used to clear floats?

[ ] Use the "clearfix hack" on the floated element and add a float to the parent element.
[ ] Use the overflow property on the floated element or the "clearfix hack" on either the floated or parent element.
[ ] Use the "clearfix hack" on the floated element or the overflow property on the parent element.
[x] Use the "clearfix hack" on the parent element or use the overflow property with a value other than "visible."

Q4. What element(s) do the following selectors match to?

1) .nav {
  ...;
}
2) nav {
  ...;
}
3) #nav {
  ...;
}

  1. An element with an ID of "nav"
  2. A nav element
  3. An element with a class of "nav"

      They all target the same nav element.

  1. An element with an class of "nav"
  2. A nav element
  3. An element with a id of "nav"

  1. An element with an class of "nav"
  2. A nav element
  3. An div with a id of "nav"

Q5. When adding transparency styles, what is the difference between using the opacity property versus the background property with an `rgba()` value?

[ ] Opacity specifies the level of transparency of the child elements. Background with an rgba() value applies transparency to the background color only.
[ ] Opacity applies transparency to the background color only. Background with an rgba() value specifies the level of transparency of an element, as a whole, including its content.
[x] Opacity specifies the level of transparency of an element, including its content. Background with an rgba() value applies transparency to the background color only.
[ ] Opacity applies transparency to the parent and child elements. Background with an rgba() value specifies the level of transparency of the parent element only.

Q6. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?)

[ ] By default, block elements are the same height and width as the content container between their tags; inline elements span the entire width of its container.
[x] By default, block elements span the entire width of its container; inline elements are the same height and width as the content contained between their tags.
[ ] A <nav> element is an example of an inline element. <header> is an example of a block element.
[ ] A <span> is an example of a block element. <div> is an example of an inline element.

Q7. CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?

.grid {
  display: grid;
  width: 500px;
  grid-template-columns: 50px 1fr 2fr;
}

[ ] The first column will have a width of 50px. The second column will be 50px wide and the third column will be 100px wide.
[x] The first column will have a width of 50px. The second column will be 150px wide and the third column will be 300px wide.
[ ] The first column will have a width of 50px. The second column will be 300px wide and the third column will be 150px wide.
[ ] The first column will have a width of 50px. The second column will be 500px wide and the third column will be 1000px wide.

Q8. What is the line-height property primarily used for?

[x] to control the height of the space between two lines of content
[ ] to control the height of the space between heading elements
[ ] to control the height of the character size
[ ] to control the width of the space between characters

Q9. Three of these choices are true about class selectors. Which is NOT true?

[ ] Multiple classes can be used within the same element.
[ ] The same class can be used multiple times per page.
[ ] Class selectors with a leading period
[x] Classes can be used multiple times per page but not within the same element.

Q10. There are many properties that can be used to align elements and create page layouts such as float, position, flexbox and grid. Of these four properties, which one should be used to align a global navigation bar which stays fixed at the top of the page?

[x] position
[ ] flexbox
[ ] grid
[ ] float

Q11. In the shorthand example below, which individual background properties are represented?

background: blue url(image.jpg) no-repeat scroll 0px 0px;

  background-color: blue;
  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0px 0px;

  background-color: blue;
  background-img: url(image.jpg);
  background-position: no-repeat;
  background-scroll: scroll;
  background-size: 0px 0px;

  background-color: blue;
  background-src: url(image.jpg);
  background-repeat: no-repeat;
  background-wrap: scroll;
  background-position: 0px 0px;

  background-color: blue;
  background-src: url(image.jpg);
  background-repeat: no-repeat;
  background-scroll: scroll;
  background-position: 0px 0px;

Q12. In the following example, according to cascading and specificity rules, what color will the link be?

.example {
  color: yellow;
}
ul li a {
  color: blue;
}
ul a {
  color: green;
}
a {
  color: red;
}

<ul>
  <li><a href="#" class="example">link</a></li>
  <li>list item</li>
  <li>list item</li>
</ul>

[ ] green
[x] yellow
[ ] blue
[ ] red

Q13. When elements overlap, they are ordered on the z-axis (i.e., which element covers another). The z-index property can be used to specify the z-order of overlapping elements. Which set of statements about the z-index property are true?

[x] Larger z-index values appear on top of elements with a lower z-index value. Negative and positive numbers can be used. z-index can only be used on positioned elements.
[ ] Smaller z-index values appear on top of elements with a larger z-index value. Negative and positive numbers can be used. z-index must also be used with positioned elements.
[ ] Larger z-index values appear on top of elements with a lower z-index value. Only positive numbers can be used. z-index must also be used with positioned elements.
[ ] Smaller z-index values appear on top of elements with a larger z-index value. Negative and positive numbers can be used. z-index can be used with or without positioned elements.

Q14. What is the difference between the following line-height settings?

line-height: 20px;
line-height: 2;

[x] The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to twice the size of the corresponding font-size value.
[ ] The value of 20px will set the line-height to 20px. The value of 2 is not valid.
[ ] The value of 20px will set the line-height to 20px. The value of 2 will default to a value of 2px.
[ ] The value of 20px will set the line-height to 20px. The value of 2 will set the line-height to 20% of the corresponding font-size value.

Q15. In the following example, what color will paragraph one and paragraph two be? (Alternative: In this example, what color will paragraphs one and two be?)

<section>
  <p>paragraph one</p>
</section>

<p>paragraph two</p>

section p {
  color: red;
}
section + p {
  color: blue;
}

[ ] Paragraph one will be blue, paragraph two will be red.
[ ] Both paragraphs will be blue.
[x] Paragraphs one will be red, paragraph two will be blue.
[ ] Both paragraphs will be red.

Q16.What are three valid ways of adding CSS to an HTML page?

  1. External; CSS is written in a separate file.
  2. Inline; CSS is added to the <head> of the HTML page.
  3. Internal; CSS is included within the HTML tags.

  1. External; CSS is written in a separate file and is linked within the <header> element of the HTML file.
  2. Inline; CSS is added to the HTML tag.
  3. Internal; CSS is included within the <header> element of the HTML file.

  1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
  2. Internal; CSS is included within the <header> element of the HTML file.
  3. Inline; CSS is added to the HTML tag.

  1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
  2. Inline; CSS is added to the HTML tag.
  3. Internal; CSS is included within the <head> element of the HTML file.

Q17. Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?)

[ ] CSS can be applied to SVGs but JavaScript cannot be.
[ ] SVGs work best for creating 3D graphics.
[x] SVGs can be created as a vector graphic or coded using SVG specific elements such as <svg>, <line>, and <ellipse>.
[ ] SVGs are a HAML-based markup language for creating vector graphics.

Q18. In the example below, when will the color pink be applied to the anchor element?

a:active {
  color: pink;
}

[ ] The color of the link will display as pink after its been clicked or if the mouse is hovering over the link.
[ ] The color of the link will display as pink on mouse hover.
[x] The color of the link will display as pink while the link is being clicked but before the mouse click is released.
[ ] The color of the link will display as pink before it has been clicked.

Q19. To change the color of an SVG using CSS, which property is used?

[ ] Use background-fill to set the color inside the object and stroke or border to set the color of the border.
[ ] The color cannot be changed with CSS.
[ ] Use fill or background to set the color inside the object and stroke to set the color of the border.
[x] Use fill to set the color inside the object and stroke to set the color of the border.

Q20. When using position: fixed, what will the element always be positioned relative to?

[ ] the closest element with position: relative
[x] the viewport
[ ] the parent element
[ ] the wrapper element

Q21. By default, a background image will repeat _

[ ] only if the background-repeat property is set to repeat
[x] indefinitely, vertically, and horizontally
[ ] indefinitely on the horizontal axis only
[ ] once, on the x and y axis

Q22. When using media queries, media types are used to target a device category. Which choice lists current valid media types?

[ ] print, screen, aural
[ ] print, screen, television
[x] print, screen, speech
[ ] print, speech, device

Q23. How would you make the first letter of every paragraph on the page red?

[x] p::first-letter { color: red; }
[ ] p:first-letter { color: red; }
[ ] first-letter::p { color: red; }
[ ] first-letter:p { color: red; }

Q24. In this example, what is the selector, property, and value?

p {
  color: #000000;
}

  "p" is the selector
  "#000000" is the property
  "color" is the value

  "p" is the selector
  "color" is the property
  "#000000" is the value

  "color" is the selector
  "#000000" is the property
  "#p" is the value

  "color" is the selector
  "p" is the property
  "#000000" is the value

Q25. What is the rem unit based on?

[ ] The rem unit is relative to the font-size of the p element.
[ ] You have to set the value for the rem unit by writing a declaration such as rem { font-size: 1 Spx; }
[ ] The rem unit is relative to the font-size of the containing (parent) element.
[x] The rem unit is relative to the font-size of the root element of the page.

Q26.Which of these would give a block element rounded corners?

[ ] corner-curve: 10px
[ ] border-corner: 10px
[x] border-radius: 10px
[ ] corner-radius: 10px

Official doc:

Q27. In the following media query example, what conditions are being targeted?

@media (min-width: 1024px), screen and (orientation: landscape) { … }

[x] The rule will apply to a device that has either a width of 1024px or wider, or is a screen device in landscape mode.
[ ] The rule will apply to a device that has a width of 1024px or narrower and is a screen device in landscape mode.
[ ] The rule will apply to a device that has a width of 1024px or wider and is a screen device in landscape mode.
[ ] The rule will apply to a device that has a width of 1024px or narrower, or is a screen device in landscape mode.

Q28. CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element's transformation origin. By default, what is the location of the origin?

[x] the top left corner of the element
[ ] the center of the element
[ ] the top right corner of the element
[ ] the bottom left of the element

Q29. Which of the following is not a valid color value? (Alternative: Which choice is not a valid color value?)

[ ] color: #000
[ ] color: rgb(0,0,0)
[ ] color: #000000
[x] color: 000000

Q30. What is the vertical gap between the two elements below?

<div style="margin-bottom: 2rem;">Div 1</div>
<div style="margin-top: 2rem;">Div 2</div>

[x] 2rem
[ ] 32px
[ ] 64px
[ ] 4rem

Reference MDN Webdocs

Q31. When using the Flexbox method, what property and value is used to display flex items in a column?

[x] flex-flow: column; or flex-direction: column
[ ] flex-flow: column;
[ ] flex-column: auto;
[ ] flex-direction: column;

Q32. Which type of declaration will take precedence?

[ ] any declarations in user-agent stylesheets
[x] important declarations in user stylesheets
[ ] normal declarations in author stylesheets
[ ] important declarations in author stylesheets

Q33. The flex-direction property is used to specify the direction that flex items are displayed. What are the values used to specify the direction of the items in the following examples?

[x]
- Example 1: flex-direction: row;
- Example 2: flex-direction: row-reverse;
- Example 3: flex-direction: column;
- Example 4: flex-direction: column-reverse;
[ ]
- Example 1: flex-direction: row-reverse;
- Example 2: flex-direction: row;
- Example 3: flex-direction: column-reverse;
- Example 4: flex-direction: column;
[ ]
- Example 1: flex-direction: row;
- Example 2: flex-direction: row-reverse;
- Example 3: flex-direction: column;
- Example 4: flex-direction: reverse-column;
[ ]
- Example 1: flex-direction: column;
- Example 2: flex-direction: column-reverse;
- Example 3: flex-direction: row;
- Example 4: flex-direction: row-reverse;

Note: Examples seem to be missing.

Q34. There are two sibling combinators that can be used to select elements contained within the same parent element; the general sibling combinator (~) and the adjacent sibling combinator (+). Referring to example below, which elements will the styles be applied to?

h2 ~ p {
  color: blue;
}
h2 + p {
  background: beige;
}

<section>
  <p>paragraph 1</p>
  <h2>Heading</h2>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
</section>

[ ] Paragraphs 2 and 3 will be blue. The h2 and paragraph 2 will have a beige background.
[x] Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background.
[ ] Paragraph 2 will be blue. Paragraphs 2 and 3 will have a beige background.

Q35. When using flexbox, the "justify-content" property can be used to distribute the space between the flex items along the main axis. Which value should be used to evenly distribute the flex items within the container shown below?

[x] justify-content: space-around;
[ ] justify-content: center;
[ ] justify-content: auto;
[ ] justify-content: space-between;

Q36. There are many advantages to using icon fonts. What is one of those advantages?

[ ] Icon fonts increase accessibility.
[ ] Icon fonts can be used to replace custom fonts.
[x] Icon fonts can be styled with typography related properties such as font-size and color.
[ ] Icon fonts are also web safe fonts.

Q37. What is the difference between `display:none` and `visibility:hidden`?

[ ] Both will hide the element on the page, but display:none has greater browser support. visibility:hidden is a new property and does not have the best browser support
[ ] display:none hides the elements but maintains the space it previously occupied. visibility:hidden will hide the element from view and remove it from the normal flow of the document
[x] display:none hides the element from view and removes it from the normal flow of the document. visibility:hidden will hide the element but maintains the space it previously occupied.
[ ] There is no difference; both will hide the element on the page

Q38. What selector and property would you use to scale an element to be 50% smaller on hover?

[ ] element:hover {scale: 0.5;}
[x] element:hover {transform: scale(0.5);}
[ ] element:hover {scale: 50%;}
[ ] element:hover {transform: scale(50%);}

Q39. Which statement regarding icon fonts is true?

[ ] Icon fonts can be inserted only using JavaScript.
[ ] Icon fonts are inserted as inline images.
[ ] Icon fonts require browser extensions.
[x] Icon fonts can be styled with typography-related properties such as font-size and color.

Q40. The values for the font-weight property can be keywords or numbers. For each numbered value below, what is the associated keyword?

font-weight: 400;
font-weight: 700;

[ ] bold; normal
[x] normal; bold
[ ] light; normal
[ ] normal; bolder

Q41. If the width of the container is 500 pixels, what would the width of the three columns be in this layout?

.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }

[x] 50px, 150px, 300px
[ ] 50px, 200px, 300px
[ ] 50px, 100px, 200px
[ ] 50px, 50px, 100px

Note: an alternative for Q7.

Q42. Using the :nth-child pseudo class, what would be the most efficient way to style every third item in a list, no matter how many items are present, starting with item 2?

  li:nth-child(3 + 2n) {
    margin: 0 5 px;
  }

  li:nth-child(3n + 2) {
    margin: 0 5 px;
  }

  li:nth-child(2),
  li:nth-child(5),
  li:nth-child(8) {
    margin: 0 5 px;
  }

  li:nth-child(2n + 3) {
    margin: 0 5 px;
  }

Q43. Which selector would select only internal links within the current page?

[ ] a[href="#"] {...}
[ ] a[href~="#"]
[ ] a[href^="#"]
[x] a[href="#"]

Q44. What is not true about class selectors?

[x] Only one class value can be assigned to an element.
[ ] An element can have multiple class value.
[ ] Class selectors are marked with a leading period.
[ ] More than one element can have the same class value.

Q45. What is the difference between the margin and padding properties?

[ ] Margin adds space around and inside of an element; padding adds space only inside of an element.
[x] Margin adds space around an element; padding adds space inside of an element.
[ ] Margin adds a line around an element, padding adds space inside of an element.
[ ] Margin adds space inside of an element, padding adds space around an element.

Q46. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

[x] padding: 10px 10px 0px 0px;
[ ] padding: 10px 0px;
[ ] padding: 10px 0;
[ ] padding: 10px 0px 10px 0px;

Q47. Is there an error in this code? If so, find the best description of the problem

@font-face {
  font-family: 'Avenir', sans-serif;
  src: url('avenir.woff2') format('woff2'), url('avenir.woff') format('woff');
}

[ ] The font file formats are not supported in modern browsers.
[ ] The src attribute requires a comma between the URL and format values.
[ ] There are no errors in the example.
[x] The sans-serif inclusion is problematic.

Q48. Which style places an element at a fixed location within its container?

[x] position: absolute;
[ ] display: flex;
[ ] display: block;
[ ] float: left;

Q49. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value?

.example {
  margin-left: calc(5% + 5px);
}

[x] The left margin value is equal to 5% of its parents element's width plus 5px
[ ] The left margin value is equal to 5% of the viewport width plus 5px
[ ] The left margin value is equal to 5% of the closest positioned element's width plus 5px
[ ] The left margin value is equal to 5% of the selected element's width (.example) plus 5px

Q50. What is the CSS selector for an `<a>` tag containing the title attribute?

[x] a[title]
[ ] a > title
[ ] a=title
[ ] a.title

Note: an alternative for Q2.

Q51. Which code would you use to absolutely position an element of the logo class?

[x] .logo { position: absolute; left: 100px; top: 150px; }
[ ] .logo { position: absolute; margin-left: 100px; margin-top: 150px; }
[ ] .logo { position: absolute; padding-left: 100px; padding-top: 150px; }
[ ] .logo { position: absolute; left-padding: 100px; top-padding: 150px; }

Q52. In this example, what color will Paragraph 1 be?

p:first-of-type {
  color: red;
}
p {
  color: blue;
}
.container {
  color: yellow;
}
p:first-child {
  color: green;
}

<div class="container">
  <h1>Heading</h1>
  <p>Paragraph1</p>
  <p>Paragraph2</p>
</div>

[ ] blue
[ ] green
[x] red
[ ] yellow

Q53. What is the `::placeholder pseudo-element` used for?

[x] It is used to format the appearance of placeholder text within a form control.
[ ] It specifies the default input text for a form control.
[ ] It writes text content into a hyperlink tooltip.
[ ] It writes text content into any page element.

Q54. Which statement is true of the single colon (`:`) or double colon (`::`) notations for pseudo-elements-for example, `::before` and `:before`?

[ ] All browsers support single and double colons for new and older pseudo-elements. So you can use either but it is convention to use single colons for consistency.
[ ] In CSS3, the double colon notation (::) was introduced to create a consistency between pseudo-elements from pseudo-classes. For newer browsers, use the double colon notation. For IE8 and below, using single colon notation (:).
[ ] Only the new CSS3 pseudo-elements require the double colon notation while the CSS2 pseudo-elements do not.
[x] In CSS3, the double colon notation (::) was introduced to differentiate pseudo-elements from pseudo-classes. However, modern browsers support both formats. Older browsers such as IE8 and below do not.

Q55. Which choice is not valid value for the font-style property?

[ ] normal
[ ] italic
[x] none
[ ] oblique

Q56. When would you use the @font-face method?

[ ] to set the font size of the text
[x] to load custom fonts into stylesheet
[ ] to change the name of the font declared in the font-family
[ ] to set the color of the text

Q57. When elements within a container overlap, the z-index property can be used to indicate how those items are stacked on top of each other. Which set of statements is true?

  1. Larger z-index values appear on top elements with a lower z-index value.
  2. Negative and positive number can be used.
  3. z-index can be used only on positioned elements.

  1. Smaller z-index values appear on top of elements with a larger z-index value.
  2. Negative and positive numbers can be used.
  3. z-index can be used with or without positioned elements.

  1. Smaller z-index values appear on top of elements with a larger z-index value.
  2. Negative and positive number can be used.
  3. z-index must also be used with positioned elements.

  1. Larger z-index values appear on top of elements with a lower z-index value.
  2. Only positive number can be used.
  3. z-index must also be used with positioned elements.

Note: an alternative for Q13.

Q58. You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to if your users are using Retina displays?

[ ] 2000 x 1400 pixels
[ ] 200 x 100 pixels
[x] 800 x 400 pixels
[ ] 400 x 200 pixels

Q59. In Chrome's Developer Tools view, where are the default styles listed?

[x] under the User Agent Stylesheet section on the right
[ ] in the third panel under the Layout tab
[ ] under the HTML view on the left
[ ] in the middle panel

Q60. While HTML controls document structure, CSS controls `___`.

[ ] semantic meaning
[ ] content meaning
[ ] document structure
[x] content appearance

Q61. What is the recommended name you should give the folder that holds your project's images?

[x] images
[ ] #images
[ ] Images
[ ] my images

Q62. What is an advantage of using inline CSS?

[ ] It is easier to manage.
[x] It is easier to add multiple styles through it.
[ ] It can be used to quickly test local CSS overrides.
[ ] It reduces conflict with other CSS definition methods.

Q63.Which W3C status code represents a CSS specification that is fully implemented by modern browsers?

[ ] Proposed Recommendation
[ ] Working Draft
[x] Recommendation
[ ] Candidate Recommendation

Q64. Are any of the following declarations invalid?

color: red; /* declaration A */
font-size: 1em; /* declaration B */
padding: 10px 0; /* declaration C */

[ ] Declaration A is invalid.
[ ] Declaration B is invalid.
[ ] Declaration C is invalid.
[x] All declarations are valid.

Q65. Which CSS will cause your links to have a solid blue background that changes to semitransparent on hover?

  a:link {
    background: #0000ff;
  }
  a:hover {
    background: rgba(0, 0, 255, 0.5);
  }

  a {
    color: blue;
  }
  a:hover {
    background: white;
  }

  a:link {
    background: blue;
  }
  a:hover {
    color: rgba(0, 0, 255, 0.5);
  }

  a:hover {
    background: rgba(blue, 50%);
  }
  a:link {
    background: rgba(blue);
  }

Q66. Which CSS rule takes precedence over the others listed?

[ ] div.sidebar {}
[ ] * {}
[x] div#sidebar2 p {}
[ ] .sidebar p {}

Q67. The body of your page includes some HTML sections. How will it look with the following CSS applied?

body {
  background: #ffffff; /* white */
}
section {
  background: #0000ff; /* blue */
  height: 200px;
}

[x] blue sections on a white background
[ ] Yellow sections on a blue background
[ ] Green sections on a white background
[ ] blue sections on a red background

Q68. Which CSS keyword can you use to override standard source order and specificity rules?

[ ] !elevate!
[ ] *prime
[ ] override
[x] !important

Q69. You can use the `___` pseudo-class to set a different color on a link if it was clicked on.

[x] a:visited
[ ] a:hover
[ ] a:link
[ ] a:focus

Q70. Which color will look the brightest on your screen, assuming the background is white?

[ ] background-color: #aaa;
[ ] background-color: #999999;
[ ] background-color: rgba(170,170,170,0.5);
[x] background-color: rgba(170,170,170,0.2);

Q71. Which CSS selector can you use to select all elements on your page associated with the two classes header and clear?

[ ] ."header clear" {}
[ ] header#clear {}
[x] .header.clear {}
[ ] .header clear {}

Q72. A universal selector is specified using a(n) `___`.

[ ] "h1" string
[ ] "a" character
[ ] "p" character
[x] "*" character

Q73. In the following CSS code, `'h1'` is the `_`, while `'color'` is the `_`.

h1 {
  color: red;
}

[ ] property; declaration
[ ] declaration; rule
[ ] "p" character
[x] selector; property

Q74. What is an alternate way to define the following CSS rule?

font-weight: bold;

[ ] font-weight: 400;
[ ] font-weight: medium;
[x] font-weight: 700;
[ ] font-weight: Black;

Q75. You want your styling to be based on a font stack consisting of three fonts. Where should the generic font for your font family be specified?

[ ] It should be the first one on the list.
[ ] Generic fonts are discouraged from this list.
[x] It should be the last one on the list.
[ ] It should be the second one on the list.

Q76. What is one disadvantage of using a web font service?

[ ] It requires you to host font files on your own server.
[ ] It uses more of your site's bandwidth.
[ ] It offers a narrow selection of custom fonts.
[x] It is not always a free service.

Q77. How do you add Google fonts to your project?

[x] by using an HTML link element referring to a Google-provided CSS
[ ] by embedding the font file directly into the project's master JavaScript
[ ] by using a Google-specific CSS syntax that directly links to the desired font file
[ ] by using a standard font-face CSS definition sourcing a font file on Google's servers

Q78. Using the following HTML and CSS example, what will equivalent pixel value be for .em and .rem elements?

html {
  font-size: 10px;
}
body {
  font-size: 2rem;
}
.rem {
  font-size: 1.5rem;
}
.em {
  font-size: 2em;
}

<body>
  <p class="rem"></p>
  <p class="em"></p>
</body>

[ ] The .rem will be equivalent to 25px; the .em value will be 20px.
[ ] The .rem will be equivalent to 15px; the .em value will be 20px.
[x] The .rem will be equivalent to 15px; the .em value will be 40px.
[ ] The .rem will be equivalent to 20px; the .em value will be 40px.

Q79. What property is used to adjust the space between text characters?

[ ] font-style
[ ] text-transform
[ ] font-variant
[x] letter-spacing

Q80. What is the correct syntax for changing the cursor from an arrow to a pointing hand when it interacts with a named element?

[x] .element {cursor: pointer;}
[ ] .element {cursor: hand;}
[ ] .element {cursor: move-hand;}
[ ] .element {cursor: pointer-hand;}

Q81. What is the effect of this style?

background-position: 10% 50%;

[x] The background image is placed 10% from the left and 50% from the top of its container
[ ] The background image is placed 10% from the bottom and 50% from the left of its container
[ ] The background image is placed 10% from the right and 50% from the bottom of its container
[ ] The background image is placed 10% from the top and 50% from the left of its container

Q82. How will the grid items display?

grid-template-columns: 2fr 1fr;

[ ] The first column is twice the height of the second column and will be as wide as the content
[ ] The first column is half the size of the container and the second column will absorb the remaining space
[x] The first column is twice as wide as the second column and will fit proportionally within the grid container
[ ] The first column is twice the width and height of the second column, and will fit proportionally within the grid container

Q83. Which style rule would make the image 50% smaller during a hover?

<img id="photo" alt="" src="..." />

[ ] img#photo:hover {scale: 0.5;}
[x] img#photo:hover {transform: scale(0.5);}
[ ] img#photo {hover-scale: 0.5;}
[ ] img#photo:hover {size: smaller;}

Q84. Which CSS properties can you use to create a rounded corner on just the top-left and top-right corners of an element?

A. border-radius: 10px 10px 0 0;
B. border-top-left-radius: 10px; and border-top-right-radius: 10px;
C. border-radius: 10px 0;
D. border-top-radius: 10px;

[ ] A and C
[ ] C and D
[ ] B and C
[x] A and B

Q85. Review the HTML example below. Then choose the list of selectors that select the <p>, from lowest to highest specificity.

<section>
  <p class="example">...</p>
</section>

  1. section \* {
    ...;
  }
  2. [class*='example'] {
    ...;
  }
  3. p.example {
    ...;
  }
  4. section p {
    ...;
  }

  1. p {
    ...;
  }
  2. p.example {
    ...;
  }
  3. section p {
    ...;
  }
  4. [class*='example'] {
    ...;
  }

  1. p.example {
    ...;
  }
  2. section p {
    ...;
  }
  3. [class*='example'] {
    ...;
  }
  4. section \* {
    ...;
  }

  1. p {
    ...;
  }
  2. section p {
    ...;
  }
  3. [class*='example'] {
    ...;
  }
  4. p.example {
    ...;
  }

Q86. Which property is used to create a drop shadow effect on an HTML element?

[ ] element-shadow
[ ] outer-shadow
[ ] dropbox-shadow
[x] box-shadow

Q87. What is the correct selector for targeting all text inputs that are not disabled?

[x] input[type="text"]:not([disabled]) {...}
[ ] input[type="text"]:not("disabled") {...}
[ ] input[type*="text"]:not([disabled="disabled"]) {...}
[ ] input[type="text"]:not([type="disabled"]) {...}

Explanation:

input[type="text"] selects all the input with type text, and :not([disabled]) selects all the elements not having the attribute "disabled". Combining both only selects all the input elements with type attribte as "text" and not having "disabled" attribute.`

Q88. How can you create a semi-transparent background color?

[ ] background-color: hsl(0, 0, 0, 0.5);
[ ] background-color: rgbx(0, 0, 0, 0.5);
[x] background-color: rgba(0, 0, 0, 0.5);
[ ] background-color: rgba(0, 0, 0, 1);

Explanation:
rgba is a funtion in css. rgba stands for red, green, blue and alpha. The value of alpha can be between 0 and 1 both inclusive with 0 being fully transparent and 1 being fully opaque.

Reference link-rgba

Q89. Using this HTML markup, how would you select only the headings contained within the `<header>` element?

`html

Heading 1

Heading 2

[x] header h1, header h2 {...}
[ ] header h1 + header h2 {...}
[ ] header h1, h2 {...}
[ ] h1, h2 {...}

Q90. Suppose you want to have a list of items (.item) displayed in a row and in reverse order using flexbox. What is the error in the CSS below?

css .container { display: flex; } .item { border: 1px solid red; flex-direction: row-reverse; }

[ ] The value for flex-direction should be reverse-row.
[ ] The .container element should have a property of flex: display.
[x] The flex-direction property should be declared in the container.
[ ] The display value should be flex-inline to display the items in a row.

Q91. Which choice is not a valid transition?

[x] transition: margin 1000ms ease-in-out;
[ ] transition: color 1.3s ease-in;
[ ] transition: position 400ms linear;
[ ] transition: opacity 1s ease-in;

Q92. In this example, what color will the paragraphs be and why?

css article p { color: blue; } article > p { color: green; }

`html

Paragraph 1

<p>Paragraph 2</p>

[ ] Paragraph 1 will be blue. Paragraph 2 will be green.
[ ] Both paragraphs will be green.
[x] Paragraph 1 will be green. Paragraph 2 will be blue.
[ ] Both paragraphs will be blue.

Q93. Review the declaration of border style shown below. What is the corresponding longhand syntax?

css border: 1px solid red;

[ ] css border-size: 1px; border-style: solid; border-color: red;
[ ] css border-size: 1px; border-type: solid; border-color: red;
[x] css border-width: 1px; border-style: solid; border-color: red;
[ ] css border-width: 1px; border-line: solid; border-color: red;

Q94. Pseudo-classes are used to `_`.

[x] style the state of the selected element
[ ] insert presentational content
[ ] style a specific part of the selected element
[ ] style the elements using class selectors

Q95. In this example, what styles will be applied to which elements?

css section { color: gray; }

`html

paragraph

link

[ ] The paragraph and link will be gray.
[ ] The background color of the section element will be gray.
[ ] The paragraph will be gray. The link will be the browser default, black.
[x] Only the paragraph will be gray.

Q96. Which answer is an example of a type selector (also sometimes referred to as an element selector)?

[ ] .header {...}
[x] header {...}
[ ] #header {...}
[ ] header > h1 {...}

Q97. What is the correct order for listing different link states in a website so those states display correctly on the page?

[ ] css a a:hover
[ ] css :link :visited :hover :active :focus
[ ] css :active :focus :hover :link :visited
[x] css :link :visited :focus :hover :active

Q98. Which selector is used to select the paragraph element that is a direct descendent of section?

[ ] section * p
[ ] section + p
[ ] section ~ p
[x] section > p

Reference: Child combinator

Q99. For this code, what is the font color of the hypertext link?

css ul { --color: red; } p { color: var(--color); } a { color: var(--color, orange); }

`html

Paragraph

list item a link
list item

[x] red
[ ] orange
[ ] blue
[ ] black

Reference

Q100. Which statement is not true?

[ ] Specificity determines which CSS rule is applied by the browsers.
[x] When two selectors apply to the same element, the one with lower specificity wins.
[ ] The last rule defined overrides all previous rules and even conflicting rules.
[ ] Rules with more specific selectors have greater specificity.

Reference

Q101. What is the output of the margin value when used within this context, assuming that its containing element is larger than 800px?

css .example { width: 800px; margin: 0 auto; }

[ ] The example element will have 0 margin space around the whole element. The auto value will center align the element horizontally and vertically within its container.
[ ] The example element will have 0 margin space on the left and right. It will be sized automatically on the top and bottom, which will center align the element within its container.
[x] The example element will have 0 margin space on the top and bottom. The margin will be sized automatically on the left and right, which may center align the element within its container.
[ ] The margin value is invalid because its missing a unit measurement after the 0.

Source: SOW

Q102. There are currently four viewport-percentage lengths that can be used to define the value relative to the viewport size: vw, vh, vmin, and vmax. If the current viewport size has a width of 800px and a height of 600px, what will these values be equivalent to in pixels?

css 10vw = ?px 10vh = ?px 10vmin = ?px 10vmax = ?px

[x] 10vw = 80px
10vh = 60px
10vmin = 60px
10vmax = 80px
[ ] 10vw = 60px
10vh = 80px
10vmin = 80px
10vmax = 60px
[ ] 10vw = 8px
10vh = 6px
10vmin = 6px
10vmax = 8px
[ ] 10vw = 6px
10vh = 8px
10vmin = 8px
10vmax = 6px

Q103. Which element(s) will be blue?

css h2 ~ p { color: blue; }

`html

H2

[ ] P3P3
[ ] P1P1
[ ] P1, P3, and P4P1, P3, and P4
[x] P3 and P4

Q104. Referring to the HTML markup and CSS example below, which element(s) will be targeted?

css p:first-of-type:first-letter { color: red; }

`html

Paragraph 1.

Paragraph 2.

Heading

Paragraph 3.

paragraph 4.

Paragraph 5.

Paragraph 6.

[ ] The first letter in all paragraphs will be red.
[ ] Only the first letter in paragraphs 1 and 5 will be red.
[x] The first letter in paragraphs 1, 3, and 5 will be red.
[ ] Only the first letter in paragraph 1 will be red.Only

Q105. Which five style features are associated with the box model?

[x] margin, padding, border, width, height
[ ] width, height, z-index, overflow, font size
[ ] margin, padding, font size, line height, border
[ ] font size, line height, letter spacing, width, height

Q106. Which choice will not set all links that include domain.com to pink?

`css
[] a[href$='domain.com'] {
color: pink;
}

[x] a[href='*domain.com'] {
color: pink;
}

[] a[href*='domain.com'] {
color: rgb(255, 155, 155);
}

[] a[href*='domain.com'] {
color: pink;
}
`

Reference

Q107. Which property and value pair could be used to apply a linear gradient effect?

`css
[x] background: linear-gradient(#648880, #293f50);

[ ] background-image: linear(#648880, #293f50);

[ ] background: gradient(linear, #648880, #293f50);

[ ] background-color: linear-gradient(#648880, #293f50);
`

Q108. You want to add a background circle behind an icon. Which style declaration is correct?

`css
[] .glyphicon-bgcircle {
circle-radius: 50%;
margins: 50px;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}

[] glyphicon-bgcircle {
border-circle: 50%;
padding: 50px;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}

[x] .glyphicon-bgcircle {
border-radius: 50%;
padding: 50px;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}

[] .glyphicon-bgcircle {
radius-rounded: 50%;
margins: auto;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}
`

Q109. When using a font stack to declare the font family, in what order should the values appear?

[x] The first value is the first choice, followed by alternative options, ordered by preference. The last option should be a generic font.
[ ] The first value is the first choice. The order of the alternative options does not matter. It depends on what is available on the user's computer.
[ ] The first value is the first choice, and must be followed by at least one alternative option before adding the generic font.
[ ] The first value is the first choice, followed by a maximum of three alternatives.

Q110. Which items are valid values for the font-size property?

css A. font-size: xsmall B. font-size: 50% C. font-size: 1em D. font-size: 20px

[ ] C, D
[x] B, C, D
[ ] A, C
[ ] A, B, C, D

Q111. In this image, the blue box and sample text are both contained within the same parent element. The blue box is floated on the left margin of the container. Why is it not contained with the container?

[ ] Floating the blue box increased its height.
[ ] Floating the blue box on the left also moves it down.
[ ] Floating the blue box actually shifts it to the right and down.
[x] Floating the blue box took it out of document flow and the container is sized only to the sample text.

Q112. Given this code, which CSS declaration of .overlay will span the entire width and height of its container? Given this code, which CSS declaration of .overlay will span the entire width and height of its container?

`css

.container {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}

<p>.container {<br>
position: relative;<br>
height: 200px;<br>
width: 200px;<br>
border: 1px solid black;<br>
}</p>

<p>

`

css .overlay { position: static; top: 200px; bottom: 200px; right: 200px; left: 200px; background-color: rgba(0, 0, 0, 0.5); }

css .overlay { position: absolute; top: 200px; bottom: 200px; right: 200px; left: 200px; background-color: rgba(0, 0, 0, 0.5); }

css .overlay { position: static; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); }

css .overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); }

Q113. Which missing line of code would place the text on top of the image? Which missing line of code would place the text on top of the image?

`js

The z-index property is cool!

css img { position: absolute; left: 0px; top: 0px; // Missing line }

`js

The z-index property is cool!

css img { position: absolute; left: 0px; top: 0px; // Missing line }

[ ] z-index: 1;z-index: 1;
[ ] z-index: -1;z-index: -1;
[ ] z-index: 0;z-index: 0;
[ ] z-index: true;z-index: true;

Q114. To make the font size of an element one size smaller than the font size of the element's container, which style property would you apply? To make the font size of an element one size smaller than the font size of the element's container, which style property would you apply?

[ ] font-size: reduce;
[ ] font-size: 8px;
[ ] font-size: -1em;
[ ] font-size: smaller;

Q115. Given this markup, which selector would result in the text being highlighted in yellow?

js <span class="highlight">#BLM</span>

css .highlight { background-color: yellow; }

`css

highlight {

background-color: yellow;
}
`

css .highlight { color: yellow; }

`css

highlight {

color: yellow;
}
`

Q116. To prevent a background image from tiling in any direction, which style property would you apply?

css background-repeat: no-repeat;

css background-repeat: fixed;

css background-repeat: none;

css background-tile: none;

Q117. To rotate an object 30 degrees counterclockwise, which style property would you apply?

[X] transform: rotate(-30deg);
[ ] transform: rotate(30deg);
[ ] rotate: 30deg;
[ ] spin: 30deg;

Q118. Which style rule would you apply to set the background image to display the contents of the wood.png file?

[ ] background-image: file(wood.png);
[X] background-image: url(wood.png);
[ ] background-image: wood.png;
[ ] image: wood.png

Q119. What style rule would set the font color of only paragraph two to blue?

js <section><p>paragraph one</p></section><p>paragraph two</p>

css section > p { color: blue; }

css p { color: blue; }

css section + p { color: blue; }

css p + section { color: blue; }

Q120. You want to move an element up 100px. Which CSS property would you use?

[ ] transform: translateX(-100px)
[ ] transform: translateY(-100px)
[ ] transform: translateY(100px)
[ ] transform: translateX(100px)

Q121. Which style will horizontally center the inner <div> within the outer <div>?

js <div id="outer"><div id="inner">Center Me!</div></div><div id="outer">

`css

inner {

width: 50%;
}

outer {

width: 100%;
}
`

`css

inner {

left: 0;
right: 0;
position: center;
}
`

`css

inner {

text-align: center;
}
`

`css

inner {

width: 50%;
margin: 0 auto;
}
`

Wordle 🧩🎲

CodeWithYaku — Sun, 30 Jan 2022 00:30:43 +0000

The word game has gone from dozens of players to hundreds of thousands in a few months. It was created by a software engineer in Brooklyn for his partner.

Today we going to replicate the UI and add some little animations :)

<div id="container"></div>
<div id="restart">
  <div class="restart-letter">S</div>
  <div class="restart-letter">T</div>
  <div class="restart-letter">A</div>
  <div class="restart-letter">R</div>
  <div class="restart-letter">T</div>
</div>

The above HTML code contains a div with an id of "container" and another div with an id of "restart". Within the "restart" div are four more divs, each with a class of "restart-letter".


body,
html {
  background-color: #333;
  margin: 0px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#container {
  font-size: 30px;
}

#restart {
  padding-top: 10px;
  display: none;
}

#restart:hover .restart-letter{
  border: 2px solid #565758;
}

.restart-letter {
  background: #121213;
  border: 0px solid #565758;
  color: #d7dadc;
  font-family: "Clear Sans", Sans-Serif;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}

.cell {
  display: inline-block;
}

The background-color and margin properties are applied to the body and html elements to create a solid black background and remove all margins. The height property is set to 100% to ensure that the background covers the entire page, and the overflow-* properties are used to hide any overflow content.

The display property is set to flex on the body element, which will cause all child elements to be displayed in a flexible grid. The align-items and justify-content properties are set to center to evenly distribute the items in the grid. The flex-direction property is set to column, which will cause the grid to be displayed in a vertical column.

The #container element has a font-size of 30px and is displayed inline-flex. This will cause its children to be displayed in a single row, and the justify-content and align-items properties will be applied to them.

The .restart-letter element is given a background and border color, font family, and width. It is also set to display: inline-flex which will cause it to be displayed in a single row with the other elements. The justify-content and align-items properties are also set to center.

import animationManager from "https://assets.codepen.io/278239/animationManager.js";
import animationData from "https://assets.codepen.io/278239/sparta.js";

const container = document.getElementById('container');
const restart = document.getElementById('restart');

animationManager.initialize(container, 6, 5);
animationManager.start(animationData.frames, animationData.animation);
animationManager.onComplete = function() {
  restart.style.display = 'block';
}
restart.addEventListener('click', function() {
  animationManager.restart();
  restart.style.display = 'none';
})

This code imports a few files - the first being https://assets.codepen.io/278239/animationManager.js, which contains the animationManagerfunction. This function is then used to initialize, start, and complete animations. The second file imported is https://assets.codepen.io/278239/sparta.js, which contains the animationData. Finally, a few elements are defined - container and restart. The container is used to hold the animation, and the restart button is used to restart the animation.

See the Pen
Wordle Animations by Brian Lemba (@yakumwamba)
on CodePen.

If you want to follow me you can do so on git here

Thanks

11 Layout and Design Tips for HTML and CSS 🛬Landing Pages that will accelarate 🚀 your career

CodeWithYaku — Sat, 29 Jan 2022 23:50:20 +0000

This post is for beginners. If you are not a beginner, you can still read it, but you may not find it as helpful.

In the world of web development, there are a few different languages you can use to create your websites: HTML, CSS, and JavaScript. In this blog post, we will be focusing on HTML and CSS.

HTML, or HyperText Markup Language, is the language that is used to create the structure of a website. This includes the headings, paragraphs, and images.

CSS, or Cascading Style Sheets, is the language that is used to style the HTML. This includes the font, color, and size of the text, as well as the layout of the website.

Together, HTML and CSS create a static website. This means that the website will not change unless you edit the code yourself. If you want to create a website that is interactive and changes based on user input, you will need to learn JavaScript.

But don’t worry, we will cover JavaScript in a future blog post! For now, let’s focus on learning HTML and CSS.

1. Use a clear and concise headline.

Your headline is one of the most important elements of your landing page. It is the first thing that people will see, and it needs to be clear and concise. It should also accurately reflect the content of the page.

2. Use high-quality images.

Images are a critical part of any landing page. They help to break up the text and add visual interest. Make sure to use high-quality images that are consistent with your branding.

3. Use typography to your advantage.

Fonts can be used to create a visual hierarchy and to add interest to your page. Choose fonts that are easy to read and that match your branding.

4. Use color to your advantage.

Color can be used to create a visual hierarchy and to add interest to your page. Choose colors that are consistent with your branding and that will appeal to your target audience.

5. Use layout to your advantage.

Layout can be used to help guide the visitor’s eye and to make the page easier to scan. Use layout to highlight the most important elements of your page.

6. Use whitespace.

Whitespace can be used to add visual interest and to make the page easier to read. Make sure to leave plenty of whitespace between elements to make them stand out.

7. Use buttons .

Buttons can be used to create a visual hierarchy and to make the page easier to navigate. Make sure to use buttons that are consistent with your branding and that are easy to click.

8. Use social media icons to your advantage.

Social media icons can be used to encourage visitors to share your content. Make sure to use icons that are consistent with your branding and that are easy to click.

9. Use a CTA.

A CTA is a critical part of any landing page. It encourages visitors to take action and it can be used to drive conversions. Make sure your CTA is clear and concise and that it stands out from the rest of the page.

10. Use testimonials.

Testimonials can be used to build trust with potential customers. Make sure to use testimonials from satisfied customers and to list their credentials.

11. Use a lead capture form.

A lead capture form is a critical part of any landing page. It allows you to collect contact information from potential customers. Make sure your form is easy to fill out and that it asks for only the information you need.

Conclusion

CSS and HTML are both essential for creating beautiful and effective websites. However, they are also quite different. CSS is used to style the look and feel of a website, while HTML is used to define the structure and content. By understanding the basics of both CSS and HTML, you can create stunning websites that are both pleasing to the eye and easy to use.

Thanks for reading

If you are a beginner and would like to learn more about CSS and HTML, I'd recommend you take more hands on example projects also you can check out this repo here which has good resources for learning CSS

If you would like to follow my GitHub repository, you can do so by clicking this link: follow me

CVE-2021-4034: The new vulnerability everyone has been talking about - PoC 🙄

CodeWithYaku — Fri, 28 Jan 2022 16:15:05 +0000

CVE-2021-4034

While the vulnerability is not exploitable remotely and doesn’t, in itself, allow arbitrary code execution, it can be used by attackers that have already gained a foothold on a vulnerable host to escalate their privileges and achieve that capability.

https://seclists.org/oss-sec/2022/q1/80 https://blog.qualys.com/vulnerabilities-threat-research/2022/01/25/pwnkit-local-privilege-escalation-vulnerability-discovered-in-polkits-pkexec-cve-2021-4034

PoC

Verified on Debian 10 and CentOS 7.

You can find the repo at this link here → https://github.com/Yakumwamba/POC-CVE-2021-4034.git

yaku@debian:~$ grep PRETTY /etc/os-release
PRETTY_NAME="Debian GNU/Linux 10 (buster)"
yaku@debian:~$ id
uid=1000(user) gid=1000(yaku) groups=1000(user),24(cdrom),25(floppy),29(audio),30(dip),44(video),46(plugdev),109(netdev)
yaku@debian:~$ gcc cve-2021-4034-poc.c -o cve-2021-4034-poc
yaku@debian:~$ ./cve-2021-4034-poc
# id
uid=0(root) gid=0(root) groups=0(root),24(cdrom),25(floppy),29(audio),30(dip),44(video),46(plugdev),109(netdev),1000(yaku)

[yaku@centos ~]$ grep PRETTY /etc/os-release
PRETTY_NAME="CentOS Linux 7 (Core)"
[yaku@centos ~]$ id
uid=11000(yaku) gid=11000(yaku) groups=11000(user) context=unconfined_u:unconfined_r:unconfined_t:s0-s0:c0.c1023
[yaku@centos ~]$ gcc cve-2021-4034-poc.c -o cve-2021-4034-poc
[yaku@centos ~]$ ./cve-2021-4034-poc
sh-4.2# id
uid=0(root) gid=0(root) groups=0(root),11000(user) context=unconfined_u:unconfined_r:unconfined_t:s0-s0:c0.c1023
sh-4.2# exit

What is polkit?

Polkit is a daemon that manages system processes and policies. It is used by system administrators to control which users and applications can have access to certain system resources.

*whoami? *
YAkU

Which is Faster: Tailwind or Pure CSS?

CodeWithYaku — Tue, 25 Jan 2022 18:44:59 +0000

When it comes to learning CSS, there are a few different options available. One option is to learn TailwindCSS, which is a popular and well-maintained CSS framework. On the other hand, you could also learn plain CSS without any frameworks.

Here are some of the pros and cons of each approach:

*Pros of using TailwindCSS: *

1) TailwindCSS is widely used and well-maintained.
2) It has a lot of features built in, so you don't have to worry about adding custom code or struggling with complex syntax.
3) It's easy to use because it includes premade components for common tasks like layouting pages and creating forms.
4) There are plenty of tutorials available online if you need help getting started. Cons of using TailwindCSS:

1) Although it's comprehensive, TailwindCSS can be difficult to understand at first glance due to its dense syntax (especially compared to plain CSS).
2) Because it's a framework, you may not be able to customize certain aspects as easily as with standalone codebase files.
3) TailwindCSS is not available in every language, so you may have to use a different editor or compiler if you want to use it on your own website.

*Pros of learning plain CSS: *

1) Plain CSS is simpler than TailwindCSS and doesn't require any special syntax.

2) It's easy to learn because all you need are basic rules for formatting text and elements, no matter what language you're using.

3) There are plenty of tutorials available online if you need help getting started. Cons of learning plain CSS:
1) Plain CSS isn't as widely used as TailwindCSS, so chances are there aren't many resources out there specifically designed for beginners.

2) Because it's less complex, plain CSS can be more difficult to understand at first glance than TailwindCSS – especially if you're not familiar with web development terminology.
3) Plain CSS is not available in every language, so you may have to use a different editor or compiler if you want to use it on your own website.

Ultimately, it depends on your needs which approach is best for you. If you're just starting out and want a comprehensive framework to help you build more complex websites, TailwindCSS is a good option. On the other hand, if you're comfortable working with basic rules and don't need all the bells and whistles that TailwindCSS offers, learning plain CSS may be a better choice. I have another article about 15 basics of CSS which you can read here.

3 Incredible CSS Animations tips You Have to See

CodeWithYaku — Tue, 25 Jan 2022 18:41:49 +0000

CSS animation is a powerful tool that you can use to make your web pages more interesting and engaging. With CSS animation, you can create simple animations that are easy to control, or complex animations that are difficult to create with other methods. In this article, we'll explore the basics of CSS animation and show you how to use it in your own projects.

The first thing you need to know about CSS animation is that it works by animating properties of elements on the page. These properties can be anything from the position of an element on the page to its color or size. You can animate any property that you want, as long as there is a way to change it over time.

Once you've decided which property you want to animate, you need to set up a keyframe rule for it. A keyframe rule defines what the property will look like at different points in time during the animation. To create a keyframe rule, you start by specifying the name of the property that you want to animate followed by a colon (:). After that, you specify two values: one for when the animation starts and one for when it ends. Here's an example:

div { width: 100px; height: 100px; background-color: blue; }
 @keyframes myAnimation { 0% { width: 100px; height: 50px; 
background-color: red;} 50% { width: 200px; height: 150px; 
background-color: green;} 100% { width: 100px; height: 50px;
 background-color: red;} }

This example, we're animating the width and height of a div element. We've defined three keyframes called "0%" , "50%" , and "100%" . The "0%" keyframe sets the element's width and height back to their original values (100 pixels wide and tall), while the "50%" and "100%" keyframes set them both to 200 pixels wide and 150 pixels tall respectively. As each keyframe is reached during playback, the browser will apply whatever styles are defined within it until it reaches either another keyframe or the end of the animation sequence.

You can also add multiple properties into a single keyframe rule if needed. For example, if you wanted to animate both an element's width and its color at once, you could do something like this:

@keyframes myAnimation { 0% {width : 100px ; color : black;} 
50%{width : 200px ; color : white;} 100%{width : 100px ; 
color : black;} }

In this example, the element's width will change from 100 pixels to 200 pixels at the 50% mark, and its color will change from black to white.

Once you've created your keyframe rule, you need to add it to your HTML document. To do this, you use the animation property. The animation property takes two values: the name of the keyframe rule that you want to use and how long you want the animation to run for. Here's an example:

div { width: 100px; height: 100px; background-color: blue; } 
@keyframes myAnimation { 0% {width: 100px; height: 50px; 
background-color: red;} 50% {width: 200px; height: 150px; 
background-color: green;} 100% {width: 100px; height: 50px; 
background-color: red;} } div{animation : myAnimation 2s;}

In this example, we're using our "myAnimation" keyframe rule on a div element. We're telling the browser that we want the animation to last for 2 seconds (2000 milliseconds). You can also specify fractions of a second if needed. For example, "0.5s" would mean 500 milliseconds.

That's all there is to basic CSS animations! With just a few lines of code, you can create simple or complex animations that will add interest and interactivity to your web pages.

Please kindly follow for more mini articles on front-end development.

or contact me via email brianlemba2@gmail.com

Thanks ❤️

Make money as a frontend Developer 🤑

CodeWithYaku — Tue, 25 Jan 2022 02:15:57 +0000

My name is Brian and I am a frontend Developer I'm currently working as a freelancer and today I would like to share with you about the opportunity of being a frontend engineer.

As a frontend developer, you have a unique opportunity to make a lot of money. There are many companies that are looking for talented frontend developers, and they are willing to pay top dollar for the best talent.

If you are a frontend developer, you can make a good living by working for a company or by starting your own business. There are many opportunities for frontend developers, and the demand for their skills is high.

In order to make money as a frontend developer, you need to be skilled in HTML, CSS, and JavaScript. These are the three main technologies that frontend developers use. You also need to be familiar with web browsers and how they work.

In addition to these skills, you should also be familiar with design principles. This will help you to create attractive and user-friendly interfaces.

If you want to make money as a frontend developer, you need to be able to work independently. You also need to be able to work with a team of developers.

If you are a freelance developer, you can make a good living by charging a high hourly rate. If you are working for a company, you may be able to negotiate a higher salary.

The demand for frontend developers is high, and the pay is good. If you are skilled in HTML, CSS, and JavaScript, you can make a lot of money as a frontend developer.

Thanks for reading my article if you have any tips on how to make money as a frontend Developer please leave a comment. Feel free to contact me on brianlemba2@gmail.com
Or you can follow me on GitHub follow

Thanks 😊

15 CSS basics that will 🚀 boost your designing confidence as a frontend developer by 10x🦄🎉

CodeWithYaku — Tue, 25 Jan 2022 02:02:02 +0000

1. Use CSS Grid for Better Layouts

CSS Grid Layout is a new way to create layouts on the web. It provides a more efficient way to layout your content than using floats or positioning.

2. Use Media Queries to Target Different Devices

Media queries allow you to target different devices with different CSS properties. This is a great way to make your site look great on all devices.

3. Use CSS Animations for Eye-Catching Effects

CSS Animations allow you to create eye-catching effects that can really make your site stand out.

4. Use Pseudo-Classes to Add More Style to Your Links

Pseudo-classes allow you to add more style to your links, making them more visually appealing.

5. Use the :before and :after Pseudo-Elements to Add Content to Your Pages

:before and :after pseudo-elements allow you to add content to your pages, which can be used to create interesting effects.

6. Use the transform Property to Transform Your Elements

The transform property allows you to transform your elements, which can create some cool effects.

7. Use the transition Property to Create Smooth Animations

The transition property allows you to create smooth animations between CSS properties.

8. Use the opacity Property to Create Transparent Elements

The opacity property allows you to create transparent elements, which can be used to create interesting effects.

9. Use the box-shadow Property to Add Shadows to Your Elements

The box-shadow property allows you to add shadows to your elements, which can give them a more polished look.

10. Use the border-radius Property to Add Curved Borders to Your Elements

The border-radius property allows you to add curved borders to your elements, which can give them a more polished look.

11. Use the font-family Property to Choose the Fonts for Your Pages

The font-family property allows you to choose the fonts for your pages, which can help to create a more unified look.

12. Use the font-size Property to Control the Size of Your Fonts

The font-size property allows you to control the size of your fonts, which can help to create a more unified look.

13. Use the color Property to Control the Color of Your Text

The color property allows you to control the color of your text, which can be used to create a more unified look.

14. Use the background-color Property to Control the Background Color of Your Pages

The background-color property allows you to control the background color of your pages, which can be used to create a more unified look.

15. Use the margin and padding Properties to Control the Space Around Your Elements

The margin and padding properties allow you to control the space around your elements, which can help to create a more polished look.

Thanks for reading through I hope this article helps you in anyway.

Please comment any other trick that I may have missed out.

Thanks.

Kindly follow me on git

Forem: CodeWithYaku

AI DeepSeek: The Developer’s Secret Weapon to Revolutionize Your Workflow 🚀

Unleash the Power of LangChain 🦜️🔗: 10 Cool Use Cases You Can Build.

Understanding APIs: Comparing REST, SOAP, GraphQL, and gRPC:

7 tips on how to optimize your Frontend workflow efficiency

121 CSS Quiz Questions that will refresh your knowledge of CSS in style 😎

CSS

Q1. In the following example, which selector has the highest specificity ranking for selecting the anchor link element?

Q2. Using an attribute selector, how would you select an <a> element with a "title" attribute?

Q3. CSS grid and flexbox are now becoming a more popular way to create page layouts. However, floats are still commonly used, especially when working with an older code base, or if you need to support older browser version. What are two valid techniques used to clear floats?

Q4. What element(s) do the following selectors match to?

Q5. When adding transparency styles, what is the difference between using the opacity property versus the background property with an rgba() value?

Q6. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?)

Q7. CSS grid introduced a new length unit, fr, to create flexible grid tracks. Referring to the code sample below, what will the widths of the three columns be?

Q8. What is the line-height property primarily used for?

Q9. Three of these choices are true about class selectors. Which is NOT true?

Q10. There are many properties that can be used to align elements and create page layouts such as float, position, flexbox and grid. Of these four properties, which one should be used to align a global navigation bar which stays fixed at the top of the page?

Q11. In the shorthand example below, which individual background properties are represented?

Q12. In the following example, according to cascading and specificity rules, what color will the link be?

Q13. When elements overlap, they are ordered on the z-axis (i.e., which element covers another). The z-index property can be used to specify the z-order of overlapping elements. Which set of statements about the z-index property are true?

Q14. What is the difference between the following line-height settings?

Q15. In the following example, what color will paragraph one and paragraph two be? (Alternative: In this example, what color will paragraphs one and two be?)

Q16.What are three valid ways of adding CSS to an HTML page?

Q17. Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?)

Q18. In the example below, when will the color pink be applied to the anchor element?

Q19. To change the color of an SVG using CSS, which property is used?

Q20. When using position: fixed, what will the element always be positioned relative to?

Q21. By default, a background image will repeat _

Q22. When using media queries, media types are used to target a device category. Which choice lists current valid media types?

Q23. How would you make the first letter of every paragraph on the page red?

Q24. In this example, what is the selector, property, and value?

Q25. What is the rem unit based on?

Q26.Which of these would give a block element rounded corners?

Q27. In the following media query example, what conditions are being targeted?

Q28. CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element's transformation origin. By default, what is the location of the origin?

Q29. Which of the following is not a valid color value? (Alternative: Which choice is not a valid color value?)

Q30. What is the vertical gap between the two elements below?

Q31. When using the Flexbox method, what property and value is used to display flex items in a column?

Q32. Which type of declaration will take precedence?

Q33. The flex-direction property is used to specify the direction that flex items are displayed. What are the values used to specify the direction of the items in the following examples?

Q34. There are two sibling combinators that can be used to select elements contained within the same parent element; the general sibling combinator (~) and the adjacent sibling combinator (+). Referring to example below, which elements will the styles be applied to?

Q35. When using flexbox, the "justify-content" property can be used to distribute the space between the flex items along the main axis. Which value should be used to evenly distribute the flex items within the container shown below?

Q36. There are many advantages to using icon fonts. What is one of those advantages?

Q37. What is the difference between display:none and visibility:hidden?

Q38. What selector and property would you use to scale an element to be 50% smaller on hover?

Q39. Which statement regarding icon fonts is true?

Q40. The values for the font-weight property can be keywords or numbers. For each numbered value below, what is the associated keyword?

Q41. If the width of the container is 500 pixels, what would the width of the three columns be in this layout?

Q42. Using the :nth-child pseudo class, what would be the most efficient way to style every third item in a list, no matter how many items are present, starting with item 2?

Q43. Which selector would select only internal links within the current page?

Q44. What is not true about class selectors?

Q45. What is the difference between the margin and padding properties?

Q46. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

Q47. Is there an error in this code? If so, find the best description of the problem

Q48. Which style places an element at a fixed location within its container?

Q49. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value?

Q50. What is the CSS selector for an <a> tag containing the title attribute?

Q51. Which code would you use to absolutely position an element of the logo class?

Q52. In this example, what color will Paragraph 1 be?

Q53. What is the ::placeholder pseudo-element used for?

Q54. Which statement is true of the single colon (:) or double colon (::) notations for pseudo-elements-for example, ::before and :before?

Q55. Which choice is not valid value for the font-style property?

Q56. When would you use the @font-face method?

Q57. When elements within a container overlap, the z-index property can be used to indicate how those items are stacked on top of each other. Which set of statements is true?

Q58. You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to if your users are using Retina displays?

Q59. In Chrome's Developer Tools view, where are the default styles listed?

Q60. While HTML controls document structure, CSS controls ___.

Q61. What is the recommended name you should give the folder that holds your project's images?

Q62. What is an advantage of using inline CSS?

Q63.Which W3C status code represents a CSS specification that is fully implemented by modern browsers?

Q64. Are any of the following declarations invalid?

Q65. Which CSS will cause your links to have a solid blue background that changes to semitransparent on hover?

Q66. Which CSS rule takes precedence over the others listed?

Q67. The body of your page includes some HTML sections. How will it look with the following CSS applied?

Q68. Which CSS keyword can you use to override standard source order and specificity rules?

Q69. You can use the ___ pseudo-class to set a different color on a link if it was clicked on.

Q70. Which color will look the brightest on your screen, assuming the background is white?

Q71. Which CSS selector can you use to select all elements on your page associated with the two classes header and clear?

Q72. A universal selector is specified using a(n) ___.

Q73. In the following CSS code, 'h1' is the ___, while 'color' is the ___.

Q2. Using an attribute selector, how would you select an `<a>` element with a "title" attribute?

Q5. When adding transparency styles, what is the difference between using the opacity property versus the background property with an `rgba()` value?

Q37. What is the difference between `display:none` and `visibility:hidden`?

Q50. What is the CSS selector for an `<a>` tag containing the title attribute?

Q53. What is the `::placeholder pseudo-element` used for?

Q54. Which statement is true of the single colon (`:`) or double colon (`::`) notations for pseudo-elements-for example, `::before` and `:before`?

Q60. While HTML controls document structure, CSS controls `___`.

Q69. You can use the `___` pseudo-class to set a different color on a link if it was clicked on.

Q72. A universal selector is specified using a(n) `___`.

Q73. In the following CSS code, `'h1'` is the `_`, while `'color'` is the `_`.

Q89. Using this HTML markup, how would you select only the headings contained within the `<header>` element?

Q94. Pseudo-classes are used to `_`.