2

html

  • 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

    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.

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

    • Advanced
    • 4 Exercises: CSS. Recreate the featured patterns using HTML and CSS only, replicate CSS gradients.

    44) The Odin Project

    • Advanced
    • 1 Project: embedding images and video.

    45) SitePoint

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

    46) Reddit- Traversy (YouTube)

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

    What is your current programming level?
    VOTE

     

    What are you looking for?
    VOTE

     

    What is your current employment status?
    VOTE

     

    How did you learn to code?
    VOTE

     

     

     

     

  • RECOMENDED COURSES .- BEGINNER

    1) COURSERA (10 videos, 5 min)

    2) MDN.Mozilla

    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!

    Please complete the required fields.

2 thoughts on “html”

Leave a Reply

Your email address will not be published.