HTML/CSS EXERCISES, EXAMPLES, PRACTICE PROJECTS, INTERVIEW QUESTIONS…
1) Land of code
- 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)
- 90 HTML Exercises: headings, paragraphs, styles, formatting, comments, images, scripts, table, lists, forms.
- 9 Exercises: create web pages that look like different image samples.
4) Html is easy
- 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.
- 18 Examples: headers, images, lists, tables, selectors, colors, text, margins.
- Beginner – intermediate
- 1600 test questions.
7) Test Dome
- Beginner – intermediate
- HTML/CSS online test
8) Geospatial training (HTML/CSS)
- 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
- 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.
- 2 Exercises: create web tables.
11) Flexbox Froggy (Kids web app)
- Beginner – Intermediate
- 24 exercises: online game to write CSS code.
13) 100 Days CSS (Online terminal)
- 100 Projects: 100 images in grid format to reproduce with CSS code.
- 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)
- 2 projects: reproduce an example as a website (article on a blog).
- 10 interview questions: explain if featured markup is valid, Describe when it’s appropriate to use the
smallelement and provide an example, Is the
altattribute mandatory on
imgelements?, difference between meter element and progress and so on.
17) Natural Programming (PDF)
- 20 design projects: HTML/CSS files of different sample websites. Reproduce them.
19) Lemond Stand (HTML)
- 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)
- 12 Exercises: CSS flexbox
21) Andre Restivo (CSS)
- 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.
- 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.
- 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.
- 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)
- 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
- 2 Projects, 20 exercises: develop a basic web page using the HTML tags, replicate website using HTML coding.
27) Codex (Github)
- 1 Project: Facebook view
28) University of Maryland (HTML/CSS)
- 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.
- 1 Exercise: links, lists.
30) Learning Web Design (ZIP)
- 18 Exercises: Learning web design book.
31) Greg J. Vogl (CSS)
- 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)
- 180 Examples: build 180 websites in 180 days.
33) Open Classrooms
- 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.
- 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)
- 5 Challenges
- 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.
- 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.
- 4 Exercises: replicate webs following sample.
39) Fortboise (CSS)
- 1 Exercise: tennis court
- 1 Challenge
- 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.
- 4 Exercises: CSS. Recreate the featured patterns using HTML and CSS only, replicate CSS gradients.
44) The Odin Project
- 1 Project: embedding images and video.
- 1 Challenge: reproduce animated gif in HTML.
46) Reddit- Traversy (YouTube)
- Beginner – Intermediate – Advanced
- Compilation of videos with HTML CSS projects.
RECOMENDED COURSES .- BEGINNER
1) COURSERA (10 videos, 5 min)
3) Envato (32 videos, 7 min)
3) Quentin Watt (44 videos, 8 min)
5) EJ Media (30 videos, 4 min)
6) Jake Wright (92 videos, 12 min)
RECOMENDED COURSES .- ADVANCED
1) Coding Rails (17 videos, 15 min)
If you know a web or blog with proper HTML/CSS exercises, challenges or projects, please share with us!