--- title: "How to solve common problems - Learn web development | MDN" chunk: 1/1 source: "https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto" category: "reference" tags: "web, html, css, javascript, documentation" date_saved: "2026-05-05T06:04:09.997823+00:00" instance: "kb-cron" --- * [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides") Web API guides * [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) * [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) * [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API) * [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) * [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) All [All web technology](https://developer.mozilla.org/en-US/docs/Web) Technologies * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) * [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) * [URI](https://developer.mozilla.org/en-US/docs/Web/URI) * [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) * [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) * [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver) * [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references") Topics * [Media](https://developer.mozilla.org/en-US/docs/Web/Media) * [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) * [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy) * [Security](https://developer.mozilla.org/en-US/docs/Web/Security) * [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) Learn [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) Frontend developer course * [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) * [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/) * [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar) Learn HTML * [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) Learn CSS * [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) * [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout) Learn JavaScript * [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting) Tools Discover our tools * [Playground](https://developer.mozilla.org/en-US/play) * [HTTP Observatory](https://developer.mozilla.org/en-US/observatory) * [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator) * [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator) * [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator) * [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter) * [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer) * [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator) About Get to know MDN better * [About MDN](https://developer.mozilla.org/en-US/about) * [Advertise with us](https://developer.mozilla.org/en-US/advertising) * [Community](https://developer.mozilla.org/en-US/community) * [MDN on GitHub](https://github.com/mdn) [Blog](https://developer.mozilla.org/en-US/blog/) 1. [Learn](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [How to solve common problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto) # How to solve common problems This section provides solutions to common front-end problems and answers to common questions. [Design and accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility) This section lists questions related to aesthetics, page structure, accessibility techniques, etc. [Solve common CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems) This page rounds up questions and answers, and other material on the MDN site that can help you to solve common CSS problems. [Solve common HTML problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems) The following links point to solutions to common everyday problems you'll need to solve with HTML. [Solve common JavaScript problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems) The following links point to solutions to common problems you may encounter when writing JavaScript. [Tools and setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup) This section lists questions related to the tools/software you can use to build websites. [Web mechanics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics) This section covers questions relating to general knowledge of the web ecosystem and how it works. ## In this article * [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto#see_also) ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto#see_also) * [HTML Cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 29, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/howto/index.md?plain=1 "Folder: en-us/learn_web_development/howto \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FHowto&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fhowto%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FHowto%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fhowto%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F479ea4c8bff4b900a7968413287c77dde2b0c20f%0A*+Document+last+modified%3A+2025-04-29T15%3A21%3A21.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. _[How to](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto)_ 3. [Web mechanics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics) 1. [How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work) 2. [What are hyperlinks?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_are_hyperlinks) 3. [What is a Domain Name?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name) 4. [What is a URL?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL) 5. [What is a web server?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_web_server) 6. [When and how to file bugs with browsers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/File_browser_bugs) 4. [Design and accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility) 1. [How can we design for all types of users?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Design_for_all_types_of_users) 2. [How do I start to design my website?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Thinking_before_coding) 3. [What do common web layouts contain?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Common_web_layouts) 4. [What HTML features promote accessibility?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/HTML_features_for_accessibility) 5. [What is accessibility?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/What_is_accessibility) 5. [Tools and setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup) 1. [How do I use GitHub Pages?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages) 2. [How do you make sure your website works properly?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Checking_that_your_web_site_is_working_properly) 3. [How do you set up a local testing server?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/set_up_a_local_testing_server) 4. [How do you upload your files to a web server?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server) 5. [How much does it cost to do something on the Web?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost) 6. [What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) 7. [What software do I need to build a website?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_software_do_I_need) 8. [What text editors are available?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Available_text_editors) 6. [Common CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems) 1. [Add a shadow to an element](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Add_a_shadow) 2. [Add a shadow to text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Add_a_text_shadow) 3. [Center an item](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Center_an_item) 4. [Create fancy boxes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Create_fancy_boxes) 5. [Fade a button on hover](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Transition_button) 6. [FAQ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ) 7. [Fill a box with an image](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Fill_a_box_with_an_image) 8. [Highlight a paragraph after a heading](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Highlight_para_after_h1) 9. [Highlight the first line of a paragraph](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Highlight_first_line) 10. [Highlight the first paragraph](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Highlight_first_para) 11. [Make a box semi-transparent](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Make_box_transparent) 12. [Use generated content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content) 7. [Common HTML problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems) 8. [Common JavaScript problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems) [MDN](https://developer.mozilla.org/) Your blueprint for a better internet. * [](https://github.com/mdn/) * [](https://bsky.app/profile/developer.mozilla.org) * [](https://x.com/mozdevnet) * [](https://mastodon.social/@mdn) * [](https://developer.mozilla.org/en-US/blog/rss.xml) MDN * [ About ](https://developer.mozilla.org/en-US/about) * [ Blog ](https://developer.mozilla.org/en-US/blog/) * [ Mozilla careers ](https://www.mozilla.org/en-US/careers/listings/) * [ Advertise with us ](https://developer.mozilla.org/en-US/advertising) * [ MDN Plus ](https://developer.mozilla.org/en-US/plus) * [ Product help ](https://support.mozilla.org/products/mdn-plus) Contribute * [ MDN Community ](https://developer.mozilla.org/en-US/community) * [ Community resources ](https://developer.mozilla.org/en-US/docs/MDN/Community) * [ Writing guidelines ](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines) * [ MDN Discord ](https://developer.mozilla.org/discord) * [ MDN on GitHub ](https://github.com/mdn) Developers * [ Web technologies ](https://developer.mozilla.org/en-US/docs/Web) * [ Learn web development ](https://developer.mozilla.org/en-US/docs/Learn_web_development) * [ Guides ](https://developer.mozilla.org/en-US/docs/MDN/Guides) * [ Tutorials ](https://developer.mozilla.org/en-US/docs/MDN/Tutorials) * [ Glossary ](https://developer.mozilla.org/en-US/docs/Glossary) * [ Hacks blog ](https://hacks.mozilla.org/) [Mozilla](https://www.mozilla.org/) * [Website Privacy Notice](https://www.mozilla.org/privacy/websites/) * [Telemetry Settings](https://www.mozilla.org/en-US/privacy/websites/data-preferences/) * [Legal](https://www.mozilla.org/about/legal/terms/mozilla) * [Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/) Visit [Mozilla Corporation’s](https://www.mozilla.org/) not-for-profit parent, the [Mozilla Foundation](https://foundation.mozilla.org/). Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under [a Creative Commons license](https://developer.mozilla.org/docs/MDN/Writing_guidelines/Attrib_copyright_license).