Fledge
Daily practice for the aspiring web developer
Write HTML, CSS, and JavaScript code to test your front-end knowledge.
See your code output as you write in real time.
Get instant, automatically graded feedback.
Create your own questions to challenge yourself or other front-end developers.
Editor is loading...
Task:
Add an h1 with the word 'Hello' inside (without the quotes).
Feedback:
Preview:
Hints
HTML
Known Testing Capabilities
- Test for matching textContent within a specific element with the 'text' type.
- Test for matching children and textContent with the 'children' type
- Check for multiple children by providing comma separated elements.
Known Restrictions
- Order matters when using the 'children' testing type. When creating a question, the child elements you expect should be written in the exact order that you expect them to be in.
Editor is loading...
Editor is loading...
Task:
Write CSS to give only square number 2 a green background.
Feedback:
Preview:
Hints
HTML + CSS
Known Testing Capabilities
- pixels
- colors
- rgb, hex, and keyword
- display values
- flex, grid, center, space-between, space-around, etc.
- position values
- relative, inline, inline-block, etc.
- fonts
- available options are shown when viewing the autofill option for the font-family property
CSS Values
- color
- background-color
- margin*
- padding*
- font-size
- font-family
- position
- display
- justify-content
- align-items
- place-items
- width
- height
- box-shadow*
CSS Properties
Known Restrictions
- If you are using padding and margin, and the values for top and bottom are different from the values for left and right, use
‑inlinefor left and right and‑blockfor top and bottom. Feel free to be more specific if necessary. - The testing that happens behind the scenes will return true if, for example, the solution margin should be:
#selector { margin: 16px 32px; }and the submitted code has those values swapped:#selector { margin: 32px 16px; }this will result in a correct submission even though it is wrong. However, if the solution was instead written as:#selector { margin-block: 16px; margin-inline: 32px; }then the previously submitted answer would instead be marked as incorrect, but this:#selector { margin: 16px 32px; }would register as a correct answer. - The
box-shadowproperty has a similar restriction as padding and margin for the individual properties. This only works if both the solution and the person answering the question use all four pixel properties.
Editor is loading...
Task:
Change the code on line 1 so that the carrot emoji is printed to the console.