HTML/CSS EXERCISES, EXAMPLES, PRACTICE PROJECTS, INTERVIEW QUESTIONS…

1) Land of code

Beginner
- 30 Exercises: basics, text formatting, links, images.
- Create a webpage that prints your name to the screen, print your name in Tahoma font, print a definition list with 5 items, Create links to five different pages, etc.

2) W3schools (Online terminal)

Beginner
- 90 HTML Exercises: headings, paragraphs, styles, formatting, comments, images, scripts, table, lists, forms.

3) Coredogs

Beginner
- 9 Exercises: create web pages that look like different image samples.

4) Html is easy

Beginner
- 20 Exercises: make a page and upload it to a free web host, make a page with a large, bold, italic header, add link to a page, add a hit counter, post an online resumé, insert table with stock prices data in 6 columns, build puzzle looking thing, Make a simple page and put two text inputs and a Submit button, etc.

5) Github

Beginner
- 18 Examples: headers, images, lists, tables, selectors, colors, text, margins.

6) Smarter way to learn

Beginner – intermediate
- 1600 test questions.

7) Test Dome

Beginner – intermediate
- HTML/CSS online test

7) 100 Forms (HTML)

Beginner
- Build 100 already made forms: church donation forms, hotel reservations, product review, sign up form, trip registration, etc

8) Geospatial training (HTML/CSS)

Beginner
- 10 Exercises:tags, embedding, selectors, properties, grouping, layout, positioning: add tags to webpage so that it looks like a screenshot below, create a webpage with many embedded elements, selectors, add property value pairs to CSS rules, etc.

9) Code with me

Beginner
- 10 Exercises: format, page, CSS classes, Project, box model, CSS layout, interactive.Use the inspector, build a page using the <html>, <head>, <title>, <body> tags, fix a HTML page, write CSS classes, design a twitter style page, create box model pages, create a before and after graphic, etc.

10) University of Illinois

Beginner
- 2 Exercises: create web tables.

11) Flexbox Froggy (Kids web app)

Beginner – Intermediate
- 24 exercises: online game to write CSS code.

12) Grok learning

Beginner – Intermediate
- HTML & CCS competition (students only).

13) 100 Days CSS (Online terminal)

Intermediate
- 100 Projects: 100 images in grid format to reproduce with CSS code.

14) Github

Intermediate
- 6 Projects: fonts & colors, split profile informations into different <div> (box model), build layout with sidebar, Use advanced selectors (id, class, grouping, descendant selectors) to fine-tune webpage, etc.

15) How to code in HTML (Theory&Exercises)

Intermediate
- 2 projects: reproduce an example as a website (article on a blog).

16) Sitepoint

Intermediate
- 10 interview questions: explain if featured markup is valid, Describe when it’s appropriate to use the small element and provide an example, Is the alt attribute mandatory on img elements?, difference between meter element and progress and so on.

17) Natural Programming (PDF)

Intermediate
- 60 Exercises: Add an unordered list and an image to your web page, Create a html file that contains a heading and a couple of paragraphs, modify a button with which it is possible to change the text that is shown on the screen, add buttons to enlarge or shrink featured images, Modify the CSS style definition so that the initial width of a rectangle border is 6 pixels, Improve the Guess-A-Word game, Object Oriented Programming with JavaScript, Add CSS definitions so that <td> elements that represent days of the previous month will have a different color, improve webpage so that you draw a brick-wall behind the picture shown, draw_on_canvas () function, etc.

18) Mezzoblue

Intermediate
- 20 design projects: HTML/CSS files of different sample websites. Reproduce them.

19) Lemond Stand (HTML)

Intermediate
- 21 Projects: Filter Menu turns the hamburger menu into a hidden controls panel, Responsive Sidebar Revealed on Click, add cart animation, etc.

20) Flexbox Defense (online webapp)

Interemdiate
- 12 Exercises: CSS flexbox

21) Andre Restivo (CSS)

Intermediate
- 10 Exercises: positioning, responsive design, comments, forms, grid, blocks. Recreate an online newspaper design, main style, responsive, comments, login, reproduce designs using flexbox and grid layouts, etc.

22) YouTube

Intermediate
- 20 Exercises: comment out HTML, fill in the blank, delete HTML elements, change color of text, CSS class/selectors to style elements, change Font size, import Google font, etc.

23) CODEOPEN

Intermediate
- 5 projects: Create a page with a single background image occupying the entire window, Make a timer similar to a featured animated gif, Modify the timer in order to apply the “edit in place” technique, etc.

24) MIT

Intermediate
- 1 Project (6 exercises): create sample website, Link Bootstrap, add a contact form, set up the “about me” section.

25) University of Nottingham-CS (PDF)

Intermediate
- 2 Projects (Second exercise: type in browser bar “…/Exercise2.pdf”: create webpage as shown in featured image, use markup, headers and hyperlinks.

26) Theresa B.Clarke

Intermediate
- 2 Projects, 20 exercises: develop a basic web page using the HTML tags, replicate website using HTML coding.

27) Codex (Github)

Intermediate
- 1 Project: Facebook view

28) University of Maryland (HTML/CSS)

Intemediate
- 1 Project: create a webpage about your major. Use image for background, include photos, certain items must be centered, page resizing, validators, indentation, tested in Chrome and so on.

29) Portland Comunity College

Intermediate
- 1 Exercise: links, lists.

30) Learning Web Design (ZIP)

Intermediate
- 18 Exercises: Learning web design book.

31) Greg J. Vogl (CSS)

Intermediate
- 40 Exercises: styles, text formatting, page layout. Apply an existing class to an HTML tag, Apply an existing ID to an HTML tag, create an external stylesheet from a template, tyle from inline to internal, Format links and create rollover effects using pseudo-classes, Add a print stylesheet, Group multiple selectors to reduce repetitive code, etc.

32) Jennifer Dewalt (Blog)

Intermediate
- 180 Examples: build 180 websites in 180 days.

33) Open Classrooms

Intermediate
- 1 Project, replicate sample website: distinguish the main blocks on the mockup, use HTML tags, format the design in CSS, define the page’s main style, banner, footer, define a default background image, font and text color, browsing links, absolute positioning, etc.

34) Wikiversity

Intermediate
- 8 challenges: CSS. Change fonts and colours, use magins and padding, column layout, whitespace, replicate a design from “open designs”, etc.

35) Repl.it (Online console)

Intermediate
- 5 Challenges

36) 101 Computing (JavaScript required)

Intermediate
- 40 Projects: reecreate the crafting table in Minecraft, complete Othello game for two players, add a button to allow the user to change the background colour of the both sections of the London Tube logo, complete the featured snowman, transition effects, add a favicon, format text, complete drag and drop activity, etc.

37) Github-DevMountain

Intermediate
- 1 Project/ 9 Problems: relocate elements to the left side, footer and right side of the screen, assign a width and height, assign a display that will allow menu, logo and sign in to appear on the same line, link the src path to menu, add background colour, etc.

38) Universidad de Alicante

Intermediate
- 4 Exercises: replicate webs following sample.

39) Fortboise (CSS)

Intermediate
- 1 Exercise: tennis court

40) Scotch

Intermediate
- 1 Challenge

41) Wikiversity

Intermediate
- 1 Project: desgin website. Use CSS for your presentation (background images, all aspects of fonts, colors and, where possible, layout, 2-column layout on at least one page, a table used to display tabular data, etc.

42) Playto

Intermediate – Advanced
- 2 projects: build a Snap game appliction and a multi-platform app that lets you set quizzes. Set up the CSS, design the user interface, use JS to to dinamically change the app, social sharing, interacting, etc.

42) Codier

Intermediate – Advanced
- 30 Challenges (solutions submitted): national flags icons, flash message, game menu design, command line interface, form validation, appealing search bar, etc.

42) Rutgers University

Advanced
- 5 projects: create wikipage and widgets, identify RSS feed, Create 1min Screencast about Image Detail using Jing, create survey, create web pages that contain text, images and hyperlinks, validate all pages using HTML validator, Enhance Information Resource with CSS & Multimedia, DIVs to control presentation, identify and evaluate open-source info tech tool that can be used in libraries, Cascading Style Sheet, Create Dynamic Website using HTML, CSS, JavaScript, PHP and MySQL, etc.

43) Draftin