validate your css codes LIVE without auto-completion

   ✔️ write css code manually!
   ✔️ copy & paste may not work!
   ✔️ hover or click HTML element on each question to see what CSS selector to use!
   ✔️ on typing a correct answer, the editor will be refreshed, and just move to the next question then!


Q2: Set the following flex elements in opposite direction

current order: 1. Heading Left2. Heading Middle3. HEADING

desired order: 3. HEADING2. Heading Middle1. Heading Left

Live CSS trainer v2.0: question-solved-image


Q3: Apply visual effects to <img> elements

There are many different ways for image/picture styling by accessing attributes such as class, id, etc.
This time, let's set some visual effect to the following <img>s only using custom attribute.
Each <img> has a custom attribute as a css selector one through seven without value.

For example, the first <img> is the original image with the custom attribute one.
You can test to select the element using CSS selector e.g., #img img[one] {} or img[one] {}

Custom attribute in HTML is not new stuff and can be used to css-select HTML element in addition to tags, id, class, :nth-child, or :nth-of-type().

● You are required to apply a visual effect to each <img> using the CSS property filter from the second <img> to the last one whose attribute name go two, three, and so forth respectively in order.

● To check what css value to apply, refer to the caption at bottom-right corner on each image. They are NOT valid syntax, but are enough to get what to do!

● On writing a valid css code, you will see the change applied. Just move to next one then!

convert your manuscript to epub (fiverr gig @whatthehekkist) convert your manuscript to epub (fiverr gig @whatthehekkist) dedicated assistance to your jekyll website, blog, portfolio, or project (fiverr gig @whatthehekkist) dedicated assistance to your jekyll website, blog, portfolio, or project (fiverr gig @whatthehekkist)



What The Hekk is HTML/CSS/JS? a complete guide to creating a web app in 5 min from scratch!

Kindle Edition

What The Hekk is HTML/CSS/JS? a complete guide to creating a web app in 5 min from scratch!

PDF






You May Also Enjoy

  • Web Dev

    what is if-else statement?

    2023-05-14

    if-else statement is one of the most widely used conditional statements in most programming languages to execute a certain action in (a task of) a program. # what is if statement? In JS, you can do a conditional test...

  • Web Dev

    [JS variables] what is var, let, and const?

    2023-04-08

    In any script/programming language, variable is a logical storage where you can assign value into, and JS has three types of variables; var, let, and const. Let's get familiar with some of the variable-related terms first. * Declaration is...

  • Web Dev

    What are domain, nameserver, and DNS?

    2023-04-12

    # domain, nameserver, and DNS When you visit a website, there's a lot going on behind your computer until you actually view the website. In this post, you will learn the process of DNS resolution in detail and will...

  • Network

    [Packet Tracer] Configuring a DHCPv4 Server and a Relay Agent

    2022-07-14

    Cisco Network Academy provides plenty of learning resources in networking. I will cover how to configure basic DHCPv4 on a router and a DHCPv4 Server, and a DHCP relay agent using Packet Tracer where you can simulate network...

  • Web Dev

    [Gitpod] 웹에서 코딩하기

    2022-07-12

    Gitpod은 오픈소스 원격 개발 플랫폼이다. 이미 굉장히 많은 사용자들이 있고, 이 블로그 또한 처음부터 Gitpod 사용했다. 개인적으로 생각하는 Gitpod의 가장 큰 장점은 사용자가 본인 컴퓨터에 로컬 개발환경 세팅에 시간을 너무 많이 투자해야 할 필요가 없고, 모든 걸 Gitpod이 제공하는...

  • Web Dev

    what is web and HTML/CSS/JS ?

    2023-04-19

    # What is Web? Web (World Wide Web; WWW) is a vast online information system you can write, read, watch, or consume resources such as documents, media, etc accessed by web browser on the Internet. You can think like the...

  • Web Dev

    how to use git

    2023-04-09

    Git is a version control system where you can upload, update, and track the source code of your project. Also, you can easily deploy codes in your Git repository to a deployment/hosting platform. There are so many benefits...