2) W3schools (Online terminal)

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


    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.


    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.


    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.


    27) Codex (Github)

        • Intermediate
        • 1 Project: Facebook view

    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.

    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) (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

    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) ProjectLearn

        • Intermediate
        • 4 Projects: links to blog and articles with HTML/CSS project ideas.

    44) Codier

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


    45) 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.

    48) SitePoint

        • Advanced
        • 1 Challenge: reproduce animated gif in HTML.


    46) Reddit- Traversy (YouTube)

        • Beginner – Intermediate – Advanced
        • Compilation of videos with HTML CSS projects.


    49) Code in the Dark (Programming Contest)

        • Each contestant receives a screenshot. They build the page using HTML/CSS. 15 min rounds.



    Python and Excel Projects for practice
    Register New Account
    Shopping cart