10 TOOLS

Best Web-Design Apps and Websites for Students

Help students understand how the web works with these web design and development tools. Are your students interested in learning HTML, CSS, PHP, and the nuts-and-bolts of how websites get designed, built, and maintained? Maybe they just want to brush up on the basics of coding so that they can better understand their increasingly web-filled world. Or, perhaps they're just looking to launch a personal site or publish content with a WYSIWYG tool like Squarespace or Wordpress. On this list, we've assembled a nice mix of tools for each scenario.

 

Codemoji

Emoji-based coding tool demystifies web design and animation

Bottom Line: Emoji-based lessons engage and empower kids to explore web design and animation, with instant website creation.

Grades: 2–8
Price:
Free to try

Lucidchart

Intuitive editor helps users create and share dynamic visual diagrams

Bottom Line: Students and teachers can use this tool alone or collaboratively to build and share stunning, effective visuals that stretch thinking.

Grades: 4–12
Price:
Free, Paid

Weebly

Easy-to-use website design tool lets teachers monitor kids' creations

Bottom Line: Teacher-monitored sites and drag-and-drop elements make attractive website design safe and accessible for students.

Grades: 6–12
Price:
Free

Codecademy

Excellent text-based coding site a great way to learn real-world skills

Bottom Line: For both introductory and higher skill levels, it teaches the breadth and depth of skills for programming careers.

Grades: 7–12
Price:
Free to try

Adobe Express

Enjoyable and practical design tool supports creators of all ages

Bottom Line: Beautiful templates and user-friendly tools empower students to turn their creative ideas into professional-looking media.

Grades: 2–12
Price:
Free

CodeHS

Computer science curriculum offers great feedback, fun challenges

Bottom Line: Effective tools and clear lessons teach real programming, but you'll have to spend some cash to help kids master it.

Grades: 6–12
Price:
Free to try, Paid

Google Sites

Make your own website with easy, intuitive drag-and-drop features

Bottom Line: With a few clicks, students can design a basic but custom, responsive website that allows for easy collaboration with their peers.

Grades: 6–12
Price:
Free

Grafio 3 - Diagram Maker

Flexible app transforms sketches into pro-level designs and diagrams

Bottom Line: A terrific choice for creating simple diagrams or presentations on iOS.

Grades: 9–12
Price:
Paid

Treehouse

Fun, self-paced web development and coding lessons offer high value

Bottom Line: A solid learning solution for self-starting students who want to grasp the wide array of programming topics.

Grades: 9–12
Price:
Free to try, Paid

WordPress.com

Solid blogging tool and content management system offers DIY blogs

Bottom Line: This is a great tool to get kids blogging and creating online content.

Grades: 9–12
Price:
Free, Paid

Related Content

Video
How to Introduce Students to Coding with Mozilla's X-Ray Goggles
Video
3 Great Ways to Get Students Coding in the Classroom
Resource
Tip Sheet: Get Started with Coding