探索前端 Web 开发的职业生涯 - 完整 10 门课程
Explore a Career in Front-End Web Development - Complete 10 Courses
- 1. Introduction to Web Design and Development
- 1. Web design and development in the code and no-code era
- 1. Understanding clients and servers
- 2. Understanding the cloud vs. a website
- 3. Understanding native apps vs. web apps
- 4. Understanding web browsers
- 1. Understanding user experience (UX) and website planning
- 2. Understanding user interface (UI) design
- 3. Prototyping tools
- 4. Graphic design tools
- 1. Understanding HTML
- 2. Understanding CSS
- 3. Understanding JavaScript
- 4. What is a framework
- 1. Introducing writing code using CodePen
- 2. Writing HTML
- 3. Writing CSS
- 4. Writing JavaScript
- 5. Challenge Write HTML and CSS
- 6. Solution Write HTML and CSS
- 1. Choosing an editor for writing code
- 2. Keeping files organized with GitHub
- 3. Choosing a web host
- 4. Registering a domain name
- 1. What is the no-code movement
- 2. All-in-one solutions Content management systems
- 3. Selling things online Shopping cart solutions
- 4. Simple website builders for small sites
- 5. Complex website builders with fine-grained control
- 6. Dashboards and databases
- 7. Web app and native app development
- 1. Learn more with learning paths
- 2. HTML Essential Training
- 1. What is HTML
- 1. The role of HTML
- 1. The syntax of HTML elements
- 2. Paragraphs
- 3. Headlines
- 4. Bold and italics
- 5. Lists
- 6. Quotes
- 7. Dates and times
- 8. Code, pre, and br
- 9. Superscripts, subscripts, and small text
- 1. Debugging HTML
- 2. HTML attributes
- 3. ARIA roles
- 4. Formatting HTML
- 5. Weird characters
- 1. Links
- 2. URL paths
- 3. Navigation
- 1. Images
- 2. Image formats
- 3. Responsive images
- 4. Responsive width
- 5. Responsive pictures
- 6. Figure and figcaption
- 1. Audio
- 2. Video
- 3. Captions and subtitles
- 4. Embedding other media through iframes
- 1. Supporting languages
- 2. Generic elements div and span
- 1. The HTML page
- 2. Document head
- 3. Structuring content
- 4. Examples of putting it all together
- 1. HTML form basics
- 2. More on forms
- 3. Additional form element types
- 1. When to use tables
- 2. Building table rows
- 1. How to keep learning and HTML specifications
- 3. CSS Essential Training onehack.us
- 1. Getting started with CSS
- 2. What you should know
- 3. How to complete the exercises
- 1. HTML and CSS
- 2. Working with website files
- 3. Writing code with a text editor
- 4. Customizing your text editor
- 5. Project Overview and setup
- 6. Where to find images
- 7. Optimizing images for the web
- 8. Relative and absolute paths
- 9. Project Adding images and icons
- 10. Referencing CSS
- 11. Project Creating a CSS file
- 1. CSS specifications and the W3C
- 2. CSS syntax and terminology
- 3. CSS values and units
- 4. JavaScript Essential Training
- 1. JavaScript The soil from which the modern web grows
- 2. How to use the exercise files
- 3. Exploring the lab environment
- 1. JavaScript First contact
- 2. Navigating the JS landscape
- 3. Tools for working with JavaScript
- 5. Search Techniques for Web Developers
- 1. Finding what you're looking for
- 1. Where to find reliable information
- 2. Straight from the source
- 3. Platform resources
- 6. Web Programming Foundations
- 1. Welcome
- 1. From URL to website
- 2. The web, in a browser
- 3. The structure of a web document visualized
- 4. The node tree How the browser sees a web document
- 5. HTML The source code of the web
- 6. The web document is a document with superpowers
- 1. The dual purpose of web code
- 2. Content and structure
- 3. Metadata and purpose
- 4. Accessibility
- 1. The web browser of today and of tomorrow
- 2. What is a code editor
- 3. Developer tools
- 1. HTML
- 2. CSS
- 3. JavaScript
- 4. The Document Object Model (DOM)
- 5. Events
- 6. Putting it all together
- 1. Next steps
- 7. Simplifying Web Development with Accessibility Best Practices
- 1. Simplifying web development with accessibility
- 1. Overcomplicating things that already work
- 2. The purpose of the web
- 3. Why accessibility breaks
- 1. Designing an accessible color palette
- 2. Designing accessible typography
- 3. Designing accessible content hierarchies and flows
- 1. Is hiding or showing content a good idea
- 2. How to hide visual content
- 3. How to hide content from screen readers
- 1. The role of semantic elements
- 2. Elements with purpose
- 3. Link and button basics
- 4. Links
- 5. Buttons
- 6. Screen reader–friendly links and buttons
- 7. Icon links and buttons with SVG
- 1. Images, graphics, and media basics
- 2. The img element
- 3. The figure and figcaption elements
- 4. Accessible SVG
- 5. Making embedded videos more accessible
- 6. Adding transcripts
- 1. Mobile-friendly navigation menu
- 2. Multilevel navigation menu
- 3. Basic card
- 4. Card with internal links
- 5. Date picker
- 1. Simplifying web development with accessibility best practices
- 2. Where to find more information
- 3. Tools for manually testing sites
- 4. Lighthouse score and similar
- 1. Accessibility mindset
- 8. React.js Essential Training
- 1. Building modern user interfaces with React
- 2. What you should know before watching this course
- 1. What is React
- 2. Setting up Chrome tools for React
- 3. Setting up Firefox DevTools for React
- 4. Working with Visual Studio Code
- 1. Adding React to your project
- 2. Creating React elements
- 3. Refactoring elements using JSX
- 4. Incorporating Babel
- 5. Working with JSX syntax
- 1. Creating a React component
- 2. Adding component properties
- 3. Working with lists
- 4. Adding keys to list items
- 5. Displaying images with React
- 6. Using fragments
- 1. Generating a project with Create React App
- 2. Touring a Create React App project
- 3. Destructuring arrays and objects
- 4. Understanding the useState Hook
- 5. Working with useEffect
- 6. Understanding the dependency array
- 7. Incorporating useReducer
- 1. Working with uncontrolled components
- 2. Creating controlled form elements
- 3. Building a custom Hook
- 4. Choosing a form library
- 1. Fetching data with Hooks
- 2. Displaying data from an API
- 3. Handling loading states
- 4. Fetching data with GraphQL
- 5. Working with render props
- 1. Installing React Router v6
- 2. Configuring the Router
- 3. Incorporating the Link component
- 4. Nesting links with React Router v6
- 1. Using Create React App as a testing platform
- 2. Testing small functions with Jest
- 3. Introducing React Testing Library
- 4. Testing events with React Testing Library
- 5. Deploying to Netlify
- 1. Next steps
- 9. React.js Building an Interface
- 1. Why React is so important
- 2. Exercise files
- 1. Installing requirements
- 2. React installation
- 3. Customizing your installs
- 4. Using React icon components
- 5. Installing Tailwind CSS in React
- 1. Your first component
- 2. Creating a sub-component Hooks
- 3. Getting appointments and debugging
- 4. Importing JSON data as a variable
- 1. Passing data to a component
- 2. The useState Hook and conditional classes
- 3. Passing state and hiding components
- 1. useEffect and useCallback Hooks
- 2. Deleting records
- 3. Searching with a filtered array
- 4. Setting up a sort
- 5. Programming the sorting interface
- 6. Adding a new appointment
- 1. Next steps
- 10. JavaScript Modern Browser APIs
- 1. Building apps with modern JavaScript
- 2. What you should know
- 3. Set up the development environment
- 1. Smoother animation with requestAnimationFrame()
- 2. Faster navigation with prefetch
- 3. Prioritized loading with preload
- 4. Server communication with Beacon API
- 5. Element visibility with Intersection Observer
- 1. Overview of data handling
- 2. Easier Ajax with the Fetch API
- 3. Simplified IndexedDB with localForage
- 4. localForage and multiple instances
- 5. Caching data with the Cache API
- 6. Making storage persistent
- 7. Getting device memory information
- 1. Native overlays with the Dialog API
- 2. Integrating with native notifications
- 3. Detecting network conditions
- 4. Using page visibility
- 5. Going full screen with content
- 6. Using full-screen events and styling
- 7. Dynamic images with CSS Paint API
- 8. Parameters with CSS Paint API
- 1. Next steps