Are you looking to improve your web design and web development skills? The Photics Web Guide is a way to learn from someone that has been professionally creating websites for over 30 years. Michael Garofalo leads you through many of the troublesome spots of learning HTML, CSS, and JavaScript.
By using useful web projects as examples, meant for beginners and professionals alike, a tremendous amount of practical information can be learned. During the journey, a historical perspective is conveyed. Gain insight on how the creation of websites has changed over the decades.
The book moves linearly towards the ultimate goal of turning a web project into a Progressive Web App. The instructions are explained with significant detail. The end result is a web project that can reach the computers and mobile phones used by people all around the world. This is accomplished by showing how to launch a project on GitHub — with or without using Git directly.
Along the way, an array of topics are covered — including arrays! Some other topics are building responsive webpages with Flexbox / Grid / Columns, adding CSS Transitions / Animations, and using Media Queries.
Design and programming are not separated in this book. Learning to code and learning to create are combined, along with encouragement. The aim is to bring joy and fun back to the Internet, by documenting the wisdom that was gained over a career of making websites.
If you love building websites, then you’re more likely to build websites that people love.
Table of Contents:
- Section I — The Basics (10)
- Chapter #1 — Software You’ll Need (11)
- Chapter #2 — Creating an HTML File (17)
- Chapter #3 — Basic HTML (25)
- Headings: <h1> <h2> <h3> <h4> <h5> <h6> (26)
- Hyperlinks: <a> (27)
- Anchor Links & Element ID Names (29)
- Text Formatting Elements (30)
- Getting Technical & Historical (33)
- Trouble With Tags: <q> (34)
- A New Line: <br> vs <p> (35)
- Grouping Elements (38)
- Table Elements (42)
- Section Elements (47)
- Monospaced Text: <pre> vs <code> (51)
- Images: <img> (53)
- Video & Audio Elements (69)
- Chapter #4 — Basic CSS (80)
- Borders & Colors (85)
- Units of Measurement (92)
- Summary / Details (97)
- Managing Problems (101)
- Advanced Targeting (105)
- Pseudo-Classes, Pseudo-Elements, & Combinators (109)
- Selector Specificity (129)
- CSS Variables & Calculations (133)
- More Mathematical Functions (141)
- CSS Animation (155)
- Flexbox / Grid / Columns (163)
- Media Queries (182)
- Dark Mode (194)
- Filter Effects (198)
- Transforms (205)
- The “@property” Rule (216)
- Newer Techniques: has(), attr(), & random() (223)
- CSS Review (232)
- Chapter #5 — Basic JavaScript (234)
- Adding JavaScript (237)
- The Console: Better Messaging (240)
- Variables & Functions (244)
- Conditionals & Block Scope (253)
- Good To Know: Comments, Semicolons, & Strict Mode (261)
- Modifying Elements (268)
- JavaScript Events (286)
- Looking Around (CSS Math vs JavaScript Math) (290)
- Section II — Web Projects (302)
- JavaScript Time — Dates, Clocks, & Time Zones (303)
- Periodic Table Data — Multidimensional Array (338)
- Alternate Solution — Search (373)
- Weather Alerts — Working With JSON (384)
- Section III — Progressive Web App (398)
- Making A Plan (399)
- Minimum Ingredients (402)
- The Downsides (407)
- Testing A Theory — Typed Arrays (414)
- Building The Bible Web App — The Wireframes (421)
- Styling The Scrollbars (428)
- Where To Put The Data? (432)
- The Custom Functions / Dynamic Features (435)
- Elements, Event Listeners, and Functions (440)
- Highlighting (450)
- Publishing / Git (463)
- Launching The Website (484)
- So, Now What?! (485)
- Section IV — Resources (486)
- Browsers (487)
- Feeds (487)
- Photics Links (487)
- System Status (488)
- JavaScript Libraries (488)
- Tools (488)
- YouTube Web Development Channels (489)
- Miscellaneous (489)
- Is The Era Search Engine Optimization Over? (SEO) (496)
- Conclusion (498)