Intro to Web Design

Copyleft Games

Experienced web developers are a vital part of all FOSS projects. This beginner task assumes experience in HTML and CSS and introduces a new tool you're unlikely to have much experience in: Scalable Vector Graphics (SVG).

SVG is an XML-based format for drawings, used by popular graphic design software such as Inkscape and Adobe Illustrator. It can also be embedded in HTML5 to add curved lines, circles, doodles, icons, or other shapes inline with HTML text and markup.

Using any online resources or help you can find, create a properly formatted HTML5 document containing a giant SVG smiley face (circle outline, two eyes, and mouth) while keeping the document size (in bytes) small. The entire page must load from this single html file without external CSS or images.

When you're done, upload your .html file to this task.

Task tags

design

Students who completed this task

Carmen Popa, Sanjay Tharagesh .R.S, Anish M., Ankit Kundra, SashankS, Harshvardhan Jha SPV, Skylar, VldFr, yoloduck, Albert Zhang, JoshSanch, rushilk, allergo, Dhaval Gujar, Dwij, Jie Qi Boh, timtim17, tcehcrhistie, Somya, Benson, Annie L, Prosthemadera novaeseelandiae, Ajay Kumar, AC_Q, z4chB, ssun, utkarsh_23, MayankJ, Compeador, Enfys, EX, MrMelon, Ramin, Shyamasis Sarangi, Baidya, ethoshansen, nitezaw, Ana Aldea, JamMurz, john.garbi, Nigel, ng.xingyu, Kimberlydo, vic0502, Logesh, Omar Ibrahim, Marius Garbea, Firstof5, YZ, Ivan, cthbst, Rudra Garg, Nalin Bhardwaj, Václav Šraier

Task type

Outreach / Research

Level

Beginner