This article explains how to achieve responsive design by calculating viewport heights for various desktop and mobile resolutions, using CSS viewport units (vh, vw) and rem together with media queries and JavaScript to dynamically switch scaling modes for consistent UI across devices.
This guide offers a step‑by‑step roadmap for aspiring front‑end developers, covering essential JavaScript fundamentals, DOM mastery, UI design, client‑server communication, and framework selection, while emphasizing practice, side projects, and continuous learning.
This article explains how the CSS content property works with ::before and ::after pseudo‑elements, demonstrates which values are accepted or rejected—including numeric and calc() values—shows how to use counters and images, and highlights common pitfalls such as treating numbers as strings.
This guide explains Huawei's iStack and CSS technologies for stacking low‑end and high‑end switches, covering roles, stack IDs, priorities, physical and logical ports, connection methods, detailed configuration commands, and direct‑link detection (DAD) to ensure reliable network operation.
This article explains how to adapt web pages for iPhone X's bottom home indicator by using the viewport‑fit meta tag, the CSS env() and constant() functions, and various padding or margin techniques to ensure fixed elements stay within the safe area, with practical code examples.
This guide introduces Emmet, the powerful IDE plugin that transforms short CSS‑style abbreviations into full HTML or CSS code, explains how to enable it in IntelliJ IDEA, and provides concrete syntax examples such as descendant, sibling, parent, multiplication, and ID/attribute shortcuts to dramatically speed up front‑end development.
This article explains how browsers parse HTML, build the DOM and CSSOM, create the render tree, and perform layout and paint, highlighting why understanding CSS's role in the critical rendering path is essential for improving page load speed and user experience.
The article explores how front‑end typography standards—covering base font size, font‑scale formulas, and line‑height rules—can be derived from visual ergonomics, mathematical ratios, and practical engineering constraints, ultimately recommending 16 px as the optimal base size and a line‑height of font‑size + 8.
This weekly newsletter curates nine insightful articles covering Google’s Guess.js toolkit, I/O 2018 web highlights, front‑end AR techniques, Chrome’s autoplay restrictions, a deep dive into Redux, WebAssembly versus JavaScript performance, comprehensive CSS line‑break methods, ten common software architecture patterns, and guidance on front‑end engineer career advancement.
An engineer from Tencent shows how to recreate Peppa Pig entirely with pure CSS by exploiting the border‑radius property to craft ellipses, rotate them, layer colors, and mask gaps, providing step‑by‑step code for each body part and a complete, animated illustration.
This tutorial walks you through creating a Chrome extension—from understanding what extensions are, setting up the manifest and HTML files, testing in developer mode, adding movie‑background features with the TMDb API, to publishing the finished extension on the Chrome Web Store.
An insider recounts a mid‑autumn phone interview at a major tech firm, detailing the nervous preparation, the unexpected direct jump to technical questions on JavaScript, cross‑origin issues, event handling, and HTML/CSS, and concludes with the surprising early offer and reflections on the experience.
This article explains why simple HTML/CSS solutions are often preferable to JavaScript, and demonstrates seven practical techniques—including navigation highlighting, hover‑based menus, custom form controls, equal‑height columns, dynamic item layouts, form submission, and automatic Enter‑key handling—each with clean code examples.
This article compares four Python web‑scraping selectors—regular expressions, BeautifulSoup, lxml/XPath, and CSS—detailing their strengths, weaknesses, performance, and installation difficulty to help developers choose the most suitable tool for extracting data from sites like JD.com.
This article explores how to create a flexible overflow effect using pure CSS—leveraging flex‑wrap, @supports, and container queries—to display different text snippets based on container size, while providing fallbacks for browsers that lack modern features.
This tutorial demonstrates how to use CSS background-blend-mode with the lighten blend mode to recolor black‑on‑white images, explains the difference from mix-blend-mode, shows code examples, discusses limitations with transparent backgrounds, and outlines compatibility and further possibilities.
This guide outlines the essential skills—from HTML/CSS and JavaScript to backend languages, databases, HTTP/REST, architecture, Git, and core algorithms—needed to become a full‑stack web developer in 2017 and land your first job.
This guide explains how to obtain an element's CSS background‑color value using Nightwatch's getCssProperty method, wrap it in a custom command, and compare the retrieved RGBA color with the expected RGB value in automated UI tests.
This article curates the 18 most popular Chinese front‑end open‑source projects—covering UI frameworks, chart libraries, responsive grids, animation tools and more—detailing their ratings, star counts, licenses, primary languages, platforms and key features to help developers choose effective learning resources.
This article explains how to identify, extract, and inline critical CSS using the Critical Node.js module and a custom Webpack plugin, while deferring non‑critical CSS loading to improve first meaningful paint and overall page performance.
This article explains how applying CSS3 transform—even with neutral values like scale(1) or translate(0,0)—can unexpectedly change element stacking order, break fixed positioning, modify overflow handling for absolute elements, and affect 100% width calculations across browsers, illustrated with code samples and screenshots.
This article explores why many front‑end developers hit learning bottlenecks with CSS, illustrates the stages of skill progression using analogies, and offers practical strategies—including deeper detail mastery, mechanism understanding, sharing, and mindset shifts—to overcome those limits.
This article explains why inline‑block elements create spacing gaps, demonstrates the issue with examples, and presents nine practical CSS methods—including removing whitespace, using negative margins, font-size tricks, and advanced grid hacks—to reliably eliminate those gaps across browsers.
This article introduces five relatively new CSS properties—font-display, write-mode, contain, will-change, and clip-path—explaining their values, practical use‑cases, browser support, and providing code examples to help developers improve performance and design flexibility.
This article explains why pure CSS wave effects are challenging, demonstrates how to achieve them using SVG and Canvas, and then provides a step‑by‑step pure‑CSS technique—including border‑radius tricks, animations, and SCSS code—to build wave backgrounds and progress charts.
This guide explains how to uniformly scale backend‑provided images of varying dimensions to fit an 80×80 container by proportionally resizing based on the shorter side and then cropping the central area, with a simple CSS solution using background‑size and background‑position, including a cover shortcut.
This article summarizes frequent CSS rendering inconsistencies across Android and iOS webviews, covering line‑height quirks, multiline ellipsis, badge implementation, image‑text layouts, adaptive width handling, inline‑block behavior, and simulated scrolling, while offering concrete code snippets and visual examples.
This article explores a scrolling issue caused by a CSS ::after‑generated line that creates an unexpected rendering layer, explains how will‑change and transform can influence layer creation, and documents the puzzling paint/composite behavior observed during debugging.
Explore the CSS conic-gradient function in depth—its syntax, differences from linear and radial gradients, practical examples like color wheels, pie charts, animated backgrounds, and polyfill support—while learning how to combine percentages, background-size, and blend modes to create dynamic, cross-browser visual designs.
This article explains how to level up your CSS skills by using proper semantic markup, modular component structures, a unified naming system like BEM, and the single‑responsibility principle, providing practical code examples and visual illustrations for robust, maintainable front‑end styling.
A comprehensive front‑end interview guide covering HTML/CSS fundamentals, HTML5 nuances, JavaScript core concepts, Ajax techniques, jQuery usage, and miscellaneous web topics, presented as concise questions and answers to help developers prepare for technical interviews.
This article compiles a comprehensive set of front‑end interview questions and answers covering HTML attributes, CSS concepts, JavaScript fundamentals, DOM manipulation, browser behavior, performance optimization, and related web technologies, providing concise explanations and practical code examples for each topic.
A global survey of 5,254 front‑end developers reveals experience levels, CSS knowledge, popular preprocessors, naming conventions, JavaScript frameworks, task runners, bundlers, testing tools, and offers practical recommendations for the tools to adopt in 2017.
This article shares practical CSS techniques—from using currentColor and creating 1 px borders on retina screens to vertically centering icons, applying multi‑line ellipsis, and drawing triangle arrows with borders—helping front‑end developers write cleaner, more adaptable code.
This article showcases six practical front‑end techniques—including negative‑margin edge‑to‑edge layouts, ellipsis text truncation with persistent icons, padding‑top placeholders, custom file‑upload styling, an IE9 opacity media‑query hack, and flex‑based mobile centering—to help developers build responsive, polished web pages.
This article provides concise explanations for sixteen common front‑end interview topics, covering inline vs. block elements, clearing floats, box‑sizing, CSS imports, progressive enhancement vs. graceful degradation, margin collapse, preprocessors, positioning, display types, centering techniques, CSS specificity, new CSS3 selectors and features, Flexbox, browser compatibility hacks, and media queries.
This article shares a practical self‑study roadmap for front‑end development, outlining four progressive steps with recommended books, timelines, key concepts, and useful online resources to help beginners become competent front‑end engineers.
This tutorial walks you through analyzing the page structure, designing start, game, and end screens, and implementing the bird, obstacles, scoring, and game‑over logic using HTML, CSS, and JavaScript, complete with code snippets and visual illustrations.
This tutorial walks beginners through creating a basic JavaScript calculator with addition, subtraction, multiplication, division, clear (AC), and delete (DEL) functions, explaining the HTML structure, CSS styling, and step‑by‑step JavaScript logic to implement the three core parts of the app.
This comprehensive guide walks beginners through essential HTML and CSS learning resources, practical experiments, and best‑practice techniques—covering semantics, naming conventions, resets, cross‑browser support, preprocessors, grid systems, and portfolio building—to accelerate front‑end development skills.
This article presents a comprehensive guide to front‑end performance optimization, covering reduction of HTTP requests, proper handling of repaint/reflow, minimizing DOM operations, using JSON, efficient HTML/CSS, CDN acceleration, external resource loading, minification, image compression, and cookie management.
This guide revisits essential HTML structure, common tags, CSS selectors and properties, and demonstrates practical techniques like creating tables, forms, floats, positioning, overflow, and a charming border‑radius penguin illustration, using clear mind‑map images to help beginners quickly refresh and deepen their front‑end fundamentals.
Learn how the CSS position property controls element layout, covering static, relative, absolute, fixed, and the modern sticky positioning, their behaviors, usage rules, and browser support, so you can apply the right positioning technique for smooth scrolling effects across browsers.
This article presents a comprehensive guide to front‑end performance optimization, covering how to prioritize bottlenecks, use debounce/throttle, reduce DOM reflows, optimize rendering, leverage requestAnimationFrame and Web Workers, and apply efficient CSS and script loading strategies, all illustrated with practical code examples.
This article explains why images that load after the DOM cause noticeable layout jumps on mobile pages and presents four CSS‑based solutions—media queries with pixels, rem units, viewport‑based vm units, and percentage padding—along with a complete example that eliminates the shift.
This article explains three methods to provide visual touch feedback on mobile web pages—using the :active pseudo‑class with a touchstart handler, the non‑standard -webkit‑tap‑highlight‑color property, and custom touch event listeners that add and remove an active class, plus tips for handling the 300 ms delay.
The article explains how CSS preprocessors like Stylus give developers file splitting, modular architecture, selector nesting, variables, calculations, functions, mixins, and build‑time optimizations, showing concrete code examples that illustrate each feature and why they make complex web styling more maintainable and scalable.
This article presents a comprehensive guide to front‑end performance optimization, covering ten practical techniques such as reducing HTTP requests, mastering repaint/reflow, minimizing DOM operations, using JSON, streamlining HTML/CSS, leveraging CDNs, externalizing assets, compressing resources, and managing cookies to improve page load speed and user experience.
This sixth installment of the Quick Q&A column answers common front‑end questions about CSS vertical‑align, equal‑height columns, JavaScript learning resources, code‑review feedback, and provides practical career guidance for aspiring web developers.
In this fifth Quick Q&A episode, the author answers several front‑end questions covering how to make a background image adapt to a container, CSS animation compatibility across browsers, clearfix techniques, learning resources for JavaScript, choosing a Vue.js framework, and practical career advice for aspiring developers.
This article explains how to create a "show more" effect without JavaScript by leveraging CSS pseudo‑classes like :target and :checked, detailing the required HTML structure, CSS rules, code examples, and the advantages and drawbacks of each approach.
Based on a recent survey, the most widely used JavaScript libraries like jQuery, React, and lodash dominate front‑end development, while emerging frameworks such as Vue.js gain attention; module bundlers, linting tools, unit testing frameworks, and CSS processors show growing adoption and shifting popularity trends.
This article presents a 20‑question front‑end interview test compiled in 2013, covering HTML, CSS, JavaScript, HTTP and related topics, with scoring guidelines, answer intentions, solution outlines and reference answers to help assess candidates quickly.
This article explains what design patterns are, why they matter for CSS, and provides practical guidance on structuring, naming, and organizing styles—including recommendations on nesting, selector usage, file ordering, and an overview of popular patterns such as OOCSS, SMACSS, Meta CSS, and BEM—to help front‑end developers write maintainable, scalable code.
Learn how to create responsive, full‑screen mobile event promotion pages by mastering background‑size techniques, viewport ratios, CSS positioning, animation integration, and handling special cases like transform conflicts and viewport‑height units, ensuring consistent layouts across diverse devices.
This article answers common front‑end questions, covering clear class‑naming practices, how to associate labels with form controls, why Gulp and Webpack are preferred over FIS, recommended JavaScript and mobile‑web books, CSS framework trade‑offs, and career advice for beginners.
This article compiles essential frontend interview questions, key knowledge areas, and detailed explanations covering HTML, CSS, JavaScript, browser engines, storage APIs, and best practices, helping beginners build a solid foundation and prepare effectively for technical interviews.
In this second‑edition Quick Q&A, the author answers practical CSS questions about choosing a build setup, customizing radio button colors, using Flexbox for responsive layouts, and selecting useful books and resources for front‑end developers.
This tutorial explains how to implement enter and exit animations using Sandal's SCSS mixins and an ES6 JavaScript class, covering mixin usage, generated CSS, customizable parameters, and practical usage examples for seamless UI effects.
This article explores the challenges of CSS class naming, traces its evolution from chaotic practices through atomic and modular approaches to the widely adopted BEM methodology, and provides practical rules, keyword lists, and code examples for creating clear, maintainable, and conflict‑free class structures.
This tutorial explains how to create equal‑width and equal‑spacing layouts using Sass mixins from the sandal library, covering flex, table, and float techniques for both single‑line and multi‑line scenarios, with complete code examples and practical guidance for mobile front‑end development.
This tutorial explores advanced console.log techniques—including format specifiers, CSS styling, image rendering, and creating ASCII art—while detailing browser compatibility, practical code examples, and useful tools for front‑end developers seeking more expressive debugging output.
The article presents a curated list of front‑end interview questions spanning HTML, CSS, JavaScript, and related topics, offering concise prompts on standards, browser behavior, performance, security, and development practices for candidates and interviewers alike.
This article explains Bootstrap 4's Sass architecture, shows how to use and customize its styles non‑destructively, and offers practical suggestions for reorganizing and enhancing the framework's Sass design for cleaner, more maintainable front‑end development.
This guide covers essential front‑end techniques—from using ::before and ::after pseudo‑elements and optimizing fonts, images, and SVGs, to mastering CSS3 animations, responsive breakpoints, reflow/repaint performance, and effective class‑naming conventions—providing practical resources and best‑practice tips for modern web development.
This article explains how to maintain correct aspect ratios for images and videos in responsive layouts by setting only one dimension for images and using an intrinsic‑ratio container with padding‑bottom for videos, complete with practical CSS code examples.
The article explains why CSS fallback styles should be written before ideal styles, shows the pitfalls of using IE‑specific hacks, and demonstrates a forward‑compatible ordering that works across browsers that lack RGBA support while preserving the intended translucent effect.
This article explains how CSS selector specificity is calculated using a four‑digit weighting system, shows the numeric values assigned to different selector types, and demonstrates how to determine which of two conflicting rules will actually style an element.
The front‑end ecosystem is growing at breakneck speed, with core concepts, languages, rendering and script engines, build tools, libraries, frameworks, UI kits, testing utilities, and mobile solutions all listed to illustrate the increasing complexity and breadth of modern web development.
This article explains the internal architecture of modern browsers, describing their main components, high‑level structure, communication mechanisms, rendering engine workflow, HTML/CSS/JavaScript parsing, error‑tolerance strategies, and style computation, using examples from Firefox, Chrome, and Safari.
This article explains what CSS preprocessors and postprocessors are, how they add programming features and compatibility handling to CSS, provides LESS and Autoprefixer examples, and outlines their implementation principles, advantages, and drawbacks, helping developers improve large-scale front-end workflows.
This article outlines ten frequent web developer pitfalls—from outdated HTML and browser‑specific code to slow performance and excessive page reloads—explaining their impacts and offering practical solutions such as modern semantic markup, cross‑browser testing, image optimization, responsive design, and automated tooling.
This article ranks CSS selectors by speed, explains the browser's right‑to‑left matching rule, and shows examples of inefficient versus efficient selector patterns for better front‑end performance.
The Baidu Technical Salon article traces 25 years of web‑design evolution—from text‑only Unix browsers in 1989, through Mosaic’s image tables, JavaScript and Flash, the rise of CSS, the iPhone‑driven shift to responsive and flat design, and looks ahead to tools that will finally free designers from cross‑browser hassles.
This article curates a collection of impressive pure‑CSS examples, tutorials, and libraries—including menus, 3D clouds, logos, animations, flexbox guides, and more—showcasing the limitless possibilities of modern CSS for web designers and developers.
Programmers can boost their design abilities by regularly studying inspiring sites, allocating as much time to design as coding, emulating strong visuals, coding directly in the browser, mastering CSS and front‑end frameworks, using quality icons and images, iterating relentlessly, prioritizing usability, typography, feedback, and simple, whitespace‑rich layouts.
This article outlines nine practical design strategies—ranging from subtle shadows and hover effects to responsive layouts and purposeful animations—that help modern web pages look polished, user‑friendly, and fully compatible with today’s mobile devices.
Effective hyperlink design—using clear visual cues, appropriate colors, and thoughtful CSS—enhances user experience, accessibility for color‑blind or low‑vision users, and SEO performance, while avoiding readability issues caused by underlines and overly small link areas.
