Foundations
of
Web Design

Foundations of Web Design

by FreeCodingLessons.com
Welcome
Part 1
1.1 HTML Basics
1.2 Tags and Styles
1.3 Lab: Single Page Projects
Part 2
2.1 Multipage Sites
2.2 ◑ Flex Layout
2.3 ◑ Lab: Multi-Page Projects
Part 3
3.1 ◕ Tailwind
3.2 ◑ Forms Introduction Activity 1 Activity 2 Activity 3 Activity 4
3.3 ◔ Lab: Forms and Frameworks
Part 4
4.1 ◔ Web Components
4.2 ◔ Modulo Layouts
4.3 ◔ Lab: JAMStack Apps with Modulo

3.2 - Forms

Activity 1

3.2 - Activity 1 - HTML form tags

This activity is incomplete. Until then, follow this guide:

https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form

View Activity 1 Slides

Open Activity 1 instructions (raw markdown, GitHub) »
View Activity 1 code files (GitHub) »

Activity 2

3.2 - Activity 2 - Tailwind-styled Forms

Examine the solution.

Can you use Tailwind documentation to build it?

View Activity 2 Slides

Open Activity 2 instructions (raw markdown, GitHub) »
View Activity 2 code files (GitHub) »

Activity 3

3.2 - Activity 3 - Tooling: Launching to Netlify

This documentation is in progress. For now, follow this:

https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/

View Activity 3 Slides

Open Activity 3 instructions (raw markdown, GitHub) »
View Activity 3 code files (GitHub) »

Activity 4

3.2 - Activity 4 - Tooling: Netlify Forms

This documentation is in progress. For now, follow this:

https://docs.netlify.com/forms/setup/

View Activity 4 Slides

Open Activity 4 instructions (raw markdown, GitHub) »
View Activity 4 code files (GitHub) »

Early Access

© 2023 Michael Bethencourt % A Modulo.js Course % In-person sessions by Kickstart Coding