Skip to content

Exercises

Jump to bottom
Tomasz Borek edited this page Jan 19, 2017 · 13 revisions

This page is born to keep track of what needs to be done.

⚓ 🔖
Clear condition?

all pages required.

  1. Fork this repo, so I can keep track of you.

  2. Do HTML 4 exercises

  3. Do HTML 5 exercises

  4. Do CSS exercises

  5. Create layouts greater pages from HTML 4 and 5

🌋 💥
 dummy text or lorem ipsum are frowned upon. Use content generators.
Content Generator

is able to rapidly generate large blocks of text. Most common (and to some - way too common) is Lorem Ipsum.

Lorem Ipsum

opening words of a famous poem by Horatio, which is too frequently used as content generator.

Branch HTML4

Upon covering basics, move to page creation. I want you to have multiple pages with different layouts. Consider this as laying ground-works for later.

Order: simple HTML4 exercises, then simple pages, then greater pages.

🎱 🎐
Git info:

  1. Branch: html4 | HTML4

  2. Tagging: will make our lifes easier.

🍄 🔥
 Please use same tags for HTML4 and HTML5.

REQUIRED tags:

  1. Basics - for all simple exercise completed

  2. November - for monthly calendar

  3. Login - for login form

  4. AboutMe - about me page

  5. Review - after review task is ready for, well, review

  6. SimplePagesDone - after all simple pages are done

  7. Frames - for framed page

  8. RegistrationForm - user registration form

  9. SPA - eponymous

  10. GreaterPagesDone - after all greater pages are done

🍄 🔥
 all tags are Uppercased and Camelized, SoEachWordAfterWordBeginsWithUpperCase.

After all my remarks are done and you know I passed your X exercise, use tag: XAfterReview, where X is the previous tag name, so November becomes NovemberAfterReview.

Simple exercises

  1. write a simple Hello World page

  2. Hello World Arabic-style (left to right)

  3. provide graceful degradation of the page in case of NoScript being turned on

  4. use span with title to mark something up and provide "additional info" on hover

  5. demonstrate differences between two main out of three HTML4 doctypes (skip frame one)

  6. create a page with a good header. Prepare to answer questions why is it good?

Simple pages

  1. Monthly calendar for November using table with "new" elements

  2. Login form with "new" elements , login field is a user email address, form should send a proper POST.

  3. About me: gives short info about someone. Mandatory: 3 paragraphs, name, surname, tagline. Optional: favourite quote, picture, list of front-end technologies one knows.

  4. Review: write a review about latest book you read (are reading). Structure it properly (both text-wise and HTML-wise). Make it attractive using images, quotations, acronyms and abbreviations. Mark some text as deleted or inserted.

Greater pages

  • A framed page - it’s a frame-using page, example of such page on the web would be Oracle JavaDoc

  • User registration form - email, phone, country, shipping and billing address, personal data, login and password. Make it full-blown, use everything that HTML4 gives you when it comes to forms.

  • SPA - please create a HTML4 structure for a new SPA. Use a different content generator than Lorem Ipsum.

Branch HTML5

Take all HTML4 pages and simplify them with HTML5 (with sole exception being frame page). When all is rewritten, I want to see expanded form (or several forms) showing all HTML5 form capabilities.

Order: as with HTML4. Then create expanded form (or forms).

🎱 🎐
Git info:

  1. Branch: html4 | HTML4

  2. Tagging: will make our lifes easier.

🍄 🔥
 Please use same tags for HTML4 and HTML5. Same names and rules apply here.
⚓ 🔖
Advanced HTML5 is missing?

True. Except for form support and semantic tags these exercises give you little playground. Don’t worry. Once you learn JS, we’ll revisit.

CSS

🍀 🎁
 http://learnlayout.com/toc.html - thank me through Thank You badge for this :-), esp. the Russian version ;-D

If you’re after recommended books, read this SO thread through

🌋 💥
Git commit or I won’t review!

No need for new branch. Do it in HTML4 and HTML5 branches. However! I can’t review CSS automatically (creativity and the like) but if you go crazy I’ll never be able to review this! So, every new change must happen in new commit!! New rule for XYZ - new commit. Be warned, I’ll tell you to reset and redo!

Employ inline-block and other display values, `float`s, `position`s (various), elements sizing, resets, typography and animations!

  1. Be ready to come up with three good-enough resets on your own. Without Internet. :-)

  2. Use normalize.css instead of reset.

  3. Offer basic styling to all simple pages from HTML 4 and 5

  4. Offer three noticeably different layouts to About me and Review pages

  5. Offer three noticeably different layouts to all greater pages from HTML 4 and 5

Revisited HTML5

🍀 🎁
 Now you can use https://html5boilerplate.com/ :-)

Please write an app for each of the following:

  1. Detecting that each major feature is supported and offering graceful degradation

  2. Same, but with Modernizr

  3. Local storage

  4. Geolocation

  5. History

  6. Microdata

  7. Offline app

  8. Canvas

  9. Audio

  10. Video

  11. Analyze this article, find three small mistakes and larger problems and improve them

🍀 🎁
 Handy pointers

JS components building

Write a few components in all the DHTML frameworks (Moo, jQuery, Prototype etc.):

1) A table with sorting, filtering, headers, odd and even rows marking 2) A double linked list component, where you have target and source list and you may transfer fields between them 3) An accordion menu (for navigation or frames)

Modularize an application

Using Pure JS, Require.js and Node.js, create few simple apps that are encapsulated and usable from elsewhere.

Testing

Test-drive a simple game with various frameworks.

JavaScript larger task

Test Drive the old and known game of maritime war - the battleships. Aside from testing and linting / hinting, PURE JS, but use functions, closures and modules well.

Ships: 1 4-mast ship; 2 3-mast ships; 3 2-mast ships; 4 1-mast ships. Players first place their ships in a fighting area, then take turns to shoot. Shots can only land within a fighting area (10x10). Ships cannot be placed adjacently (no matter if it’s vertical, horizontal or diagonal).

Extra features: 1) Shots will be repeated if they hit, if they missed, control passes to another player. 2) Once a game, 4mast ship can fire a salvo which counts as three shots (but uses only one turn). Each hit decreases salvo capability. 3) Once a game, 3mast ship can fire a salvo which counts as two shots (but uses only one turn). Each hit decreases salvo capability. 4) Once a game, 2mast ship can move by two places (vertically or horizontally only). Move does NOT use turn. 5) Once a game, 1mast ship can fire a torpedo, which goes through 3 fields, exploding only on impact (meaning, player specifies three subsequent field (vertically or horizontally) and earliest that has a ship is hit. If no field contains a ship, all are considered clean and torpedo missed. 6) Sinking a ship makes area next to it unusable (it becomes marked, 2mast ship can’t move there, no ship can be there, etc.).

Finally - rework the game using one JS framework. Keep the tests working! (Why did you chose this particular framework?

REST and AJAX

Using existing REST API, display it’s result creating two different pages (characters and ships), where only parts are reloaded.

JS in the front and in the back

Using Node.js and jQuery, write a simple server-side JS program, which reads questions from JSON files and feeds them to nicely styled and animated cards in the front-end. In other words: trivia game! Of course, about front-end development.

HTML -> CSS -> JS; only then we move on to apps and frameworks. Always remember to pace yourself.

Clone this wiki locally