[{"data":1,"prerenderedAt":4344},["ShallowReactive",2],{"/writing":3,"content-query-AAlsctJ5SK":43,"articles":65},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":7,"description":5,"body":8,"_type":37,"_id":38,"_source":39,"_file":40,"_stem":41,"_extension":42},"/writing","",false,"Writing",{"type":9,"children":10,"toc":34},"root",[11],{"type":12,"tag":13,"props":14,"children":15},"element","writing",{},[16,26],{"type":12,"tag":17,"props":18,"children":19},"template",{"v-slot:title":5},[20],{"type":12,"tag":21,"props":22,"children":23},"p",{},[24],{"type":25,"value":7},"text",{"type":12,"tag":17,"props":27,"children":28},{"v-slot:subtitle":5},[29],{"type":12,"tag":21,"props":30,"children":31},{},[32],{"type":25,"value":33},"Some writings on topics that are close to my heart",{"title":5,"searchDepth":35,"depth":35,"links":36},2,[],"markdown","content:3.writing.md","content","3.writing.md","3.writing","md",{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":7,"description":5,"body":44,"_type":37,"_id":38,"_source":39,"_file":40,"_stem":41,"_extension":42},{"type":9,"children":45,"toc":63},[46],{"type":12,"tag":13,"props":47,"children":48},{},[49,56],{"type":12,"tag":17,"props":50,"children":51},{"v-slot:title":5},[52],{"type":12,"tag":21,"props":53,"children":54},{},[55],{"type":25,"value":7},{"type":12,"tag":17,"props":57,"children":58},{"v-slot:subtitle":5},[59],{"type":12,"tag":21,"props":60,"children":61},{},[62],{"type":25,"value":33},{"title":5,"searchDepth":35,"depth":35,"links":64},[],[66,574,943,1839,3054,3487,3878],{"_path":67,"_dir":68,"_draft":6,"_partial":6,"_locale":5,"title":69,"description":70,"date":71,"tags":72,"image":76,"readingTime":77,"body":78,"_type":37,"_id":571,"_source":39,"_file":572,"_stem":573,"_extension":42},"/articles/understanding-the-web-design-process","articles","Understanding the Web Design Process","A comprehensive guide to the web design process that ensures effective communication and client satisfaction. Discover the key stages from defining goals to final client feedback.","20/09/2024",[73,74,75],"Web Design","Process","Client","https://portfolio-hughherschell.vercel.app/articles/web-design-process.webp","7",{"type":9,"children":79,"toc":559},[80,87,92,101,107,159,165,230,236,284,290,343,349,397,403,449,455,496,502,548,554],{"type":12,"tag":81,"props":82,"children":84},"h2",{"id":83},"introduction",[85],{"type":25,"value":86},"Introduction",{"type":12,"tag":21,"props":88,"children":89},{},[90],{"type":25,"value":91},"The web design process is a structured approach that guides freelancers and agencies in creating effective, visually appealing websites. This article outlines the essential stages of the web design process, ensuring that client needs are met and expectations are managed effectively.",{"type":12,"tag":21,"props":93,"children":94},{},[95],{"type":12,"tag":96,"props":97,"children":100},"img",{"alt":98,"src":99},"preview","/articles/web-design-process.webp",[],{"type":12,"tag":81,"props":102,"children":104},{"id":103},"_1-define-website-goals-and-purpose",[105],{"type":25,"value":106},"1. Define Website Goals and Purpose",{"type":12,"tag":108,"props":109,"children":110},"ul",{},[111,123,149],{"type":12,"tag":112,"props":113,"children":114},"li",{},[115,121],{"type":12,"tag":116,"props":117,"children":118},"strong",{},[119],{"type":25,"value":120},"Objective:",{"type":25,"value":122}," Understand what the client wants to achieve with the website.",{"type":12,"tag":112,"props":124,"children":125},{},[126,131],{"type":12,"tag":116,"props":127,"children":128},{},[129],{"type":25,"value":130},"Client Questions:",{"type":12,"tag":108,"props":132,"children":133},{},[134,139,144],{"type":12,"tag":112,"props":135,"children":136},{},[137],{"type":25,"value":138},"What are the main goals of the website (e.g., lead generation, brand differentiation)?",{"type":12,"tag":112,"props":140,"children":141},{},[142],{"type":25,"value":143},"Who is the target audience?",{"type":12,"tag":112,"props":145,"children":146},{},[147],{"type":25,"value":148},"Are there competitors to be aware of? What do they do well that you’d like to improve on?",{"type":12,"tag":112,"props":150,"children":151},{},[152,157],{"type":12,"tag":116,"props":153,"children":154},{},[155],{"type":25,"value":156},"Deliverable:",{"type":25,"value":158}," Documented list of goals, user personas, and primary calls to action (CTAs).",{"type":12,"tag":81,"props":160,"children":162},{"id":161},"_2-create-a-mood-board",[163],{"type":25,"value":164},"2. Create a Mood Board",{"type":12,"tag":108,"props":166,"children":167},{},[168,177,221],{"type":12,"tag":112,"props":169,"children":170},{},[171,175],{"type":12,"tag":116,"props":172,"children":173},{},[174],{"type":25,"value":120},{"type":25,"value":176}," Establish a visual and emotional direction.",{"type":12,"tag":112,"props":178,"children":179},{},[180,185,187,196,198],{"type":12,"tag":116,"props":181,"children":182},{},[183],{"type":25,"value":184},"Action:",{"type":25,"value":186}," Use tools like ",{"type":12,"tag":188,"props":189,"children":193},"a",{"href":190,"rel":191},"http://playbook.com/",[192],"nofollow",[194],{"type":25,"value":195},"Playbook.com",{"type":25,"value":197}," to compile design inspirations, including:\n",{"type":12,"tag":108,"props":199,"children":200},{},[201,206,211,216],{"type":12,"tag":112,"props":202,"children":203},{},[204],{"type":25,"value":205},"Colors",{"type":12,"tag":112,"props":207,"children":208},{},[209],{"type":25,"value":210},"Fonts",{"type":12,"tag":112,"props":212,"children":213},{},[214],{"type":25,"value":215},"Imagery styles",{"type":12,"tag":112,"props":217,"children":218},{},[219],{"type":25,"value":220},"Website layouts",{"type":12,"tag":112,"props":222,"children":223},{},[224,228],{"type":12,"tag":116,"props":225,"children":226},{},[227],{"type":25,"value":156},{"type":25,"value":229}," A collaborative mood board that the client approves, ensuring alignment before moving further.",{"type":12,"tag":81,"props":231,"children":233},{"id":232},"_3-develop-sitemap",[234],{"type":25,"value":235},"3. Develop Sitemap",{"type":12,"tag":108,"props":237,"children":238},{},[239,248,275],{"type":12,"tag":112,"props":240,"children":241},{},[242,246],{"type":12,"tag":116,"props":243,"children":244},{},[245],{"type":25,"value":120},{"type":25,"value":247}," Lay out the website’s architecture.",{"type":12,"tag":112,"props":249,"children":250},{},[251,255,257],{"type":12,"tag":116,"props":252,"children":253},{},[254],{"type":25,"value":184},{"type":25,"value":256}," Outline key pages and their hierarchical relationship, focusing on:\n",{"type":12,"tag":108,"props":258,"children":259},{},[260,265,270],{"type":12,"tag":112,"props":261,"children":262},{},[263],{"type":25,"value":264},"User flow: How will users navigate the site?",{"type":12,"tag":112,"props":266,"children":267},{},[268],{"type":25,"value":269},"Key landing pages (Home, Services, Contact, etc.)",{"type":12,"tag":112,"props":271,"children":272},{},[273],{"type":25,"value":274},"CTA locations",{"type":12,"tag":112,"props":276,"children":277},{},[278,282],{"type":12,"tag":116,"props":279,"children":280},{},[281],{"type":25,"value":156},{"type":25,"value":283}," A sitemap with an overview of the entire website’s structure.",{"type":12,"tag":81,"props":285,"children":287},{"id":286},"_4-wireframes",[288],{"type":25,"value":289},"4. Wireframes",{"type":12,"tag":108,"props":291,"children":292},{},[293,302,329],{"type":12,"tag":112,"props":294,"children":295},{},[296,300],{"type":12,"tag":116,"props":297,"children":298},{},[299],{"type":25,"value":120},{"type":25,"value":301}," Visualize the page structure without distractions.",{"type":12,"tag":112,"props":303,"children":304},{},[305,309,311],{"type":12,"tag":116,"props":306,"children":307},{},[308],{"type":25,"value":184},{"type":25,"value":310}," Create low-fidelity wireframes that map out:\n",{"type":12,"tag":108,"props":312,"children":313},{},[314,319,324],{"type":12,"tag":112,"props":315,"children":316},{},[317],{"type":25,"value":318},"General layout (placeholders for text, images, and buttons)",{"type":12,"tag":112,"props":320,"children":321},{},[322],{"type":25,"value":323},"Functional elements (forms, navigation, etc.)",{"type":12,"tag":112,"props":325,"children":326},{},[327],{"type":25,"value":328},"Different sections and their purpose (hero, features, testimonials)",{"type":12,"tag":112,"props":330,"children":331},{},[332,336,338],{"type":12,"tag":116,"props":333,"children":334},{},[335],{"type":25,"value":156},{"type":25,"value":337}," Basic wireframes for each page, approved by the client to avoid major revisions later.\n",{"type":12,"tag":96,"props":339,"children":342},{"alt":340,"src":341},"wireframe-example","/articles/wireframe.png",[],{"type":12,"tag":81,"props":344,"children":346},{"id":345},"_5-mockups",[347],{"type":25,"value":348},"5. Mockups",{"type":12,"tag":108,"props":350,"children":351},{},[352,361,388],{"type":12,"tag":112,"props":353,"children":354},{},[355,359],{"type":12,"tag":116,"props":356,"children":357},{},[358],{"type":25,"value":120},{"type":25,"value":360}," Develop high-fidelity designs based on wireframes.",{"type":12,"tag":112,"props":362,"children":363},{},[364,368,370],{"type":12,"tag":116,"props":365,"children":366},{},[367],{"type":25,"value":184},{"type":25,"value":369}," Apply color schemes, typography, imagery, and branding elements from the mood board. Use tools like Figma or Adobe XD to create visual designs that:\n",{"type":12,"tag":108,"props":371,"children":372},{},[373,378,383],{"type":12,"tag":112,"props":374,"children":375},{},[376],{"type":25,"value":377},"Show the actual look and feel",{"type":12,"tag":112,"props":379,"children":380},{},[381],{"type":25,"value":382},"Represent final typography, colors, and imagery",{"type":12,"tag":112,"props":384,"children":385},{},[386],{"type":25,"value":387},"Maintain the structure approved in the wireframes",{"type":12,"tag":112,"props":389,"children":390},{},[391,395],{"type":12,"tag":116,"props":392,"children":393},{},[394],{"type":25,"value":156},{"type":25,"value":396}," High-fidelity designs of key pages, shared and revised based on client feedback.",{"type":12,"tag":81,"props":398,"children":400},{"id":399},"_6-feedback-and-revisions",[401],{"type":25,"value":402},"6. Feedback and Revisions",{"type":12,"tag":108,"props":404,"children":405},{},[406,415,440],{"type":12,"tag":112,"props":407,"children":408},{},[409,413],{"type":12,"tag":116,"props":410,"children":411},{},[412],{"type":25,"value":120},{"type":25,"value":414}," Implement an organized revision process to refine the designs.",{"type":12,"tag":112,"props":416,"children":417},{},[418,422],{"type":12,"tag":116,"props":419,"children":420},{},[421],{"type":25,"value":184},{"type":12,"tag":108,"props":423,"children":424},{},[425,430,435],{"type":12,"tag":112,"props":426,"children":427},{},[428],{"type":25,"value":429},"Schedule a meeting to present designs and explain key decisions.",{"type":12,"tag":112,"props":431,"children":432},{},[433],{"type":25,"value":434},"Use tools like Playbook for collaborative, clear feedback.",{"type":12,"tag":112,"props":436,"children":437},{},[438],{"type":25,"value":439},"Limit revisions to 1-2 rounds per project phase, ensuring comprehensive feedback on the entire design.",{"type":12,"tag":112,"props":441,"children":442},{},[443,447],{"type":12,"tag":116,"props":444,"children":445},{},[446],{"type":25,"value":156},{"type":25,"value":448}," Final, revised mockups based on client input.",{"type":12,"tag":81,"props":450,"children":452},{"id":451},"_7-pre-launch-design-review",[453],{"type":25,"value":454},"7. Pre-Launch Design Review",{"type":12,"tag":108,"props":456,"children":457},{},[458,467,487],{"type":12,"tag":112,"props":459,"children":460},{},[461,465],{"type":12,"tag":116,"props":462,"children":463},{},[464],{"type":25,"value":120},{"type":25,"value":466}," Ensure final design readiness.",{"type":12,"tag":112,"props":468,"children":469},{},[470,474],{"type":12,"tag":116,"props":471,"children":472},{},[473],{"type":25,"value":184},{"type":12,"tag":108,"props":475,"children":476},{},[477,482],{"type":12,"tag":112,"props":478,"children":479},{},[480],{"type":25,"value":481},"Review the final designs against the initial goals and wireframes.",{"type":12,"tag":112,"props":483,"children":484},{},[485],{"type":25,"value":486},"Conduct a final client review to confirm that all changes have been implemented.",{"type":12,"tag":112,"props":488,"children":489},{},[490,494],{"type":12,"tag":116,"props":491,"children":492},{},[493],{"type":25,"value":156},{"type":25,"value":495}," Signed-off designs that meet the project objectives, ready for the development phase.",{"type":12,"tag":81,"props":497,"children":499},{"id":498},"_8-client-off-boarding-and-feedback",[500],{"type":25,"value":501},"8. Client Off-Boarding and Feedback",{"type":12,"tag":108,"props":503,"children":504},{},[505,514,539],{"type":12,"tag":112,"props":506,"children":507},{},[508,512],{"type":12,"tag":116,"props":509,"children":510},{},[511],{"type":25,"value":120},{"type":25,"value":513}," Refine the process for future projects.",{"type":12,"tag":112,"props":515,"children":516},{},[517,521],{"type":12,"tag":116,"props":518,"children":519},{},[520],{"type":25,"value":184},{"type":12,"tag":108,"props":522,"children":523},{},[524,529,534],{"type":12,"tag":112,"props":525,"children":526},{},[527],{"type":25,"value":528},"Ask the client for feedback on the design process.",{"type":12,"tag":112,"props":530,"children":531},{},[532],{"type":25,"value":533},"Provide any final documentation, design files, or visual assets.",{"type":12,"tag":112,"props":535,"children":536},{},[537],{"type":25,"value":538},"Collect testimonials if the client is satisfied.",{"type":12,"tag":112,"props":540,"children":541},{},[542,546],{"type":12,"tag":116,"props":543,"children":544},{},[545],{"type":25,"value":156},{"type":25,"value":547}," A completed post-project review and client testimonial.",{"type":12,"tag":81,"props":549,"children":551},{"id":550},"conclusion",[552],{"type":25,"value":553},"Conclusion",{"type":12,"tag":21,"props":555,"children":556},{},[557],{"type":25,"value":558},"By adhering to these steps, web designers can ensure a streamlined process that minimizes revisions, maximizes client satisfaction, and successfully meets the project’s goals. Each stage builds upon the previous one, creating a solid foundation for effective communication and collaboration throughout the design journey.",{"title":5,"searchDepth":35,"depth":35,"links":560},[561,562,563,564,565,566,567,568,569,570],{"id":83,"depth":35,"text":86},{"id":103,"depth":35,"text":106},{"id":161,"depth":35,"text":164},{"id":232,"depth":35,"text":235},{"id":286,"depth":35,"text":289},{"id":345,"depth":35,"text":348},{"id":399,"depth":35,"text":402},{"id":451,"depth":35,"text":454},{"id":498,"depth":35,"text":501},{"id":550,"depth":35,"text":553},"content:articles:understanding-the-web-design-process.md","articles/understanding-the-web-design-process.md","articles/understanding-the-web-design-process",{"_path":575,"_dir":68,"_draft":6,"_partial":6,"_locale":5,"title":576,"description":577,"date":578,"tags":579,"image":584,"readingTime":585,"body":586,"_type":37,"_id":940,"_source":39,"_file":941,"_stem":942,"_extension":42},"/articles/vs-code-extensions","Must-Have VS Code Extensions for Web Developers","Enhance your coding experience with these essential Visual Studio Code extensions for web development.","20/07/2023",[580,581,582,583],"VS Code","Extensions","Web Development","Programming","https://portfolio-hughherschell.vercel.app/articles/vs-code-extensions.png","4",{"type":9,"children":587,"toc":915},[588,592,597,604,618,628,638,651,660,669,682,691,700,713,722,731,744,753,762,775,784,793,806,815,824,837,846,855,868,877,886,890,895,901],{"type":12,"tag":81,"props":589,"children":590},{"id":83},[591],{"type":25,"value":86},{"type":12,"tag":21,"props":593,"children":594},{},[595],{"type":25,"value":596},"Visual Studio Code (VS Code) is one of the most popular Integrated Development Environments (IDEs) among web developers, thanks to its lightweight nature, extensive features, and vibrant ecosystem of extensions. Extensions can significantly enhance your productivity, streamline your workflow, and provide powerful tools for various programming tasks. Here’s a curated list of must-have VS Code extensions for web development.",{"type":12,"tag":21,"props":598,"children":599},{},[600],{"type":12,"tag":96,"props":601,"children":603},{"alt":98,"src":602},"/articles/vs-code-extensions.png",[],{"type":12,"tag":605,"props":606,"children":608},"h3",{"id":607},"_1-night-owl",[609,611],{"type":25,"value":610},"1. ",{"type":12,"tag":188,"props":612,"children":615},{"href":613,"rel":614},"https://marketplace.visualstudio.com/items?itemName=sdras.night-owl",[192],[616],{"type":25,"value":617},"Night Owl",{"type":12,"tag":21,"props":619,"children":620},{},[621,626],{"type":12,"tag":116,"props":622,"children":623},{},[624],{"type":25,"value":625},"Description",{"type":25,"value":627},": Night Owl is a beautifully crafted theme that is easy on the eyes, especially for night owls who work late into the evening. Its cool color palette provides excellent contrast for readability without straining your eyes.",{"type":12,"tag":21,"props":629,"children":630},{},[631,636],{"type":12,"tag":116,"props":632,"children":633},{},[634],{"type":25,"value":635},"Why You Need It",{"type":25,"value":637},": A comfortable theme helps reduce eye strain during long coding sessions, improving focus and productivity.",{"type":12,"tag":605,"props":639,"children":641},{"id":640},"_2-auto-rename-tag",[642,644],{"type":25,"value":643},"2. ",{"type":12,"tag":188,"props":645,"children":648},{"href":646,"rel":647},"https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag",[192],[649],{"type":25,"value":650},"Auto Rename Tag",{"type":12,"tag":21,"props":652,"children":653},{},[654,658],{"type":12,"tag":116,"props":655,"children":656},{},[657],{"type":25,"value":625},{"type":25,"value":659},": This extension automatically renames paired HTML and XML tags, making it easier to maintain code.",{"type":12,"tag":21,"props":661,"children":662},{},[663,667],{"type":12,"tag":116,"props":664,"children":665},{},[666],{"type":25,"value":635},{"type":25,"value":668},": It saves time and reduces errors by ensuring that when you change one tag, the corresponding tag is updated automatically.",{"type":12,"tag":605,"props":670,"children":672},{"id":671},"_3-bracket-pair-colorizer",[673,675],{"type":25,"value":674},"3. ",{"type":12,"tag":188,"props":676,"children":679},{"href":677,"rel":678},"https://marketplace.visualstudio.com/items?itemName=BracketPairColorDLW.bracket-pair-color-dlw",[192],[680],{"type":25,"value":681},"Bracket Pair Colorizer",{"type":12,"tag":21,"props":683,"children":684},{},[685,689],{"type":12,"tag":116,"props":686,"children":687},{},[688],{"type":25,"value":625},{"type":25,"value":690},": This extension allows you to colorize matching brackets, making it easier to visualize code structure.",{"type":12,"tag":21,"props":692,"children":693},{},[694,698],{"type":12,"tag":116,"props":695,"children":696},{},[697],{"type":25,"value":635},{"type":25,"value":699},": It helps you quickly identify nested code blocks, improving readability and making it easier to debug complex code.",{"type":12,"tag":605,"props":701,"children":703},{"id":702},"_4-indent-rainbow",[704,706],{"type":25,"value":705},"4. ",{"type":12,"tag":188,"props":707,"children":710},{"href":708,"rel":709},"https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow",[192],[711],{"type":25,"value":712},"Indent Rainbow",{"type":12,"tag":21,"props":714,"children":715},{},[716,720],{"type":12,"tag":116,"props":717,"children":718},{},[719],{"type":25,"value":625},{"type":25,"value":721},": Indent Rainbow colorizes indentation levels, helping you visualize the structure of your code at a glance.",{"type":12,"tag":21,"props":723,"children":724},{},[725,729],{"type":12,"tag":116,"props":726,"children":727},{},[728],{"type":25,"value":635},{"type":25,"value":730},": It’s particularly useful for languages like JavaScript and Python, where indentation is crucial for structure and readability.",{"type":12,"tag":605,"props":732,"children":734},{"id":733},"_5-live-server",[735,737],{"type":25,"value":736},"5. ",{"type":12,"tag":188,"props":738,"children":741},{"href":739,"rel":740},"https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer",[192],[742],{"type":25,"value":743},"Live Server",{"type":12,"tag":21,"props":745,"children":746},{},[747,751],{"type":12,"tag":116,"props":748,"children":749},{},[750],{"type":25,"value":625},{"type":25,"value":752},": Live Server launches a local development server with live reload capability for static and dynamic pages.",{"type":12,"tag":21,"props":754,"children":755},{},[756,760],{"type":12,"tag":116,"props":757,"children":758},{},[759],{"type":25,"value":635},{"type":25,"value":761},": It allows you to see changes in real-time as you code, making the development process faster and more efficient.",{"type":12,"tag":605,"props":763,"children":765},{"id":764},"_6-multiple-cursor-case-preserve",[766,768],{"type":25,"value":767},"6. ",{"type":12,"tag":188,"props":769,"children":772},{"href":770,"rel":771},"https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve",[192],[773],{"type":25,"value":774},"Multiple Cursor Case Preserve",{"type":12,"tag":21,"props":776,"children":777},{},[778,782],{"type":12,"tag":116,"props":779,"children":780},{},[781],{"type":25,"value":625},{"type":25,"value":783},": This extension allows you to preserve the case of text when using multiple cursors.",{"type":12,"tag":21,"props":785,"children":786},{},[787,791],{"type":12,"tag":116,"props":788,"children":789},{},[790],{"type":25,"value":635},{"type":25,"value":792},": It enhances productivity by enabling you to edit multiple lines simultaneously while maintaining the original text case.",{"type":12,"tag":605,"props":794,"children":796},{"id":795},"_7-path-intellisense",[797,799],{"type":25,"value":798},"7. ",{"type":12,"tag":188,"props":800,"children":803},{"href":801,"rel":802},"https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense",[192],[804],{"type":25,"value":805},"Path Intellisense",{"type":12,"tag":21,"props":807,"children":808},{},[809,813],{"type":12,"tag":116,"props":810,"children":811},{},[812],{"type":25,"value":625},{"type":25,"value":814},": Path Intellisense provides autocompletion for file paths, making it easier to navigate your project structure.",{"type":12,"tag":21,"props":816,"children":817},{},[818,822],{"type":12,"tag":116,"props":819,"children":820},{},[821],{"type":25,"value":635},{"type":25,"value":823},": It saves time and reduces errors when linking files and resources in your code.",{"type":12,"tag":605,"props":825,"children":827},{"id":826},"_8-prettier-code-formatter",[828,830],{"type":25,"value":829},"8. ",{"type":12,"tag":188,"props":831,"children":834},{"href":832,"rel":833},"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode",[192],[835],{"type":25,"value":836},"Prettier - Code Formatter",{"type":12,"tag":21,"props":838,"children":839},{},[840,844],{"type":12,"tag":116,"props":841,"children":842},{},[843],{"type":25,"value":625},{"type":25,"value":845},": Prettier is an opinionated code formatter that supports many languages and formats code according to specified rules.",{"type":12,"tag":21,"props":847,"children":848},{},[849,853],{"type":12,"tag":116,"props":850,"children":851},{},[852],{"type":25,"value":635},{"type":25,"value":854},": It helps maintain consistent code style across your projects, improving readability and maintainability.",{"type":12,"tag":605,"props":856,"children":858},{"id":857},"_9-material-icon-theme",[859,861],{"type":25,"value":860},"9. ",{"type":12,"tag":188,"props":862,"children":865},{"href":863,"rel":864},"https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme",[192],[866],{"type":25,"value":867},"Material Icon Theme",{"type":12,"tag":21,"props":869,"children":870},{},[871,875],{"type":12,"tag":116,"props":872,"children":873},{},[874],{"type":25,"value":625},{"type":25,"value":876},": This extension changes the default file icons to a Material Design style, making it visually appealing and easier to identify file types.",{"type":12,"tag":21,"props":878,"children":879},{},[880,884],{"type":12,"tag":116,"props":881,"children":882},{},[883],{"type":25,"value":635},{"type":25,"value":885},": A visually organized project structure aids in quickly locating files, enhancing your overall coding experience.",{"type":12,"tag":605,"props":887,"children":888},{"id":550},[889],{"type":25,"value":553},{"type":12,"tag":21,"props":891,"children":892},{},[893],{"type":25,"value":894},"Integrating these must-have extensions into your Visual Studio Code setup can greatly enhance your web development workflow. From improving code readability to streamlining the coding process, these tools are essential for any developer looking to optimize their productivity. Happy coding! 😊",{"type":12,"tag":605,"props":896,"children":898},{"id":897},"additional-resources",[899],{"type":25,"value":900},"Additional Resources",{"type":12,"tag":21,"props":902,"children":903},{},[904,906,913],{"type":25,"value":905},"For more information and to explore other extensions, visit the ",{"type":12,"tag":188,"props":907,"children":910},{"href":908,"rel":909},"https://marketplace.visualstudio.com/vscode",[192],[911],{"type":25,"value":912},"Visual Studio Code Marketplace",{"type":25,"value":914},".",{"title":5,"searchDepth":35,"depth":35,"links":916},[917],{"id":83,"depth":35,"text":86,"children":918},[919,922,924,926,928,930,932,934,936,938,939],{"id":607,"depth":920,"text":921},3,"1. Night Owl",{"id":640,"depth":920,"text":923},"2. Auto Rename Tag",{"id":671,"depth":920,"text":925},"3. Bracket Pair Colorizer",{"id":702,"depth":920,"text":927},"4. Indent Rainbow",{"id":733,"depth":920,"text":929},"5. Live Server",{"id":764,"depth":920,"text":931},"6. Multiple Cursor Case Preserve",{"id":795,"depth":920,"text":933},"7. Path Intellisense",{"id":826,"depth":920,"text":935},"8. Prettier - Code Formatter",{"id":857,"depth":920,"text":937},"9. Material Icon Theme",{"id":550,"depth":920,"text":553},{"id":897,"depth":920,"text":900},"content:articles:vs-code-extensions.md","articles/vs-code-extensions.md","articles/vs-code-extensions",{"_path":944,"_dir":68,"_draft":6,"_partial":6,"_locale":5,"title":945,"description":946,"date":947,"tags":948,"image":951,"readingTime":77,"body":952,"_type":37,"_id":1836,"_source":39,"_file":1837,"_stem":1838,"_extension":42},"/articles/web-development-roadmap","Your Ultimate Web Development Roadmap","Web development is a dynamic field that requires a combination of technical skills and knowledge. Here’s a roadmap to guide you through the stages of becoming a proficient web developer.","17/07/2023",[582,583,949,950],"Learning","Roadmap","https://portfolio-hughherschell.vercel.app/articles/web-development-roadmap.png",{"type":9,"children":953,"toc":1819},[954,958,963,970,976,982,1001,1007,1019,1025,1051,1057,1088,1094,1133,1139,1158,1164,1183,1189,1194,1200,1205,1211,1216,1220,1225,1232,1251,1324,1334,1455,1461,1473,1506,1512,1530,1539,1567,1573,1631,1636,1641,1650,1698,1704,1725,1733,1756,1760,1765,1770,1776],{"type":12,"tag":81,"props":955,"children":956},{"id":83},[957],{"type":25,"value":86},{"type":12,"tag":21,"props":959,"children":960},{},[961],{"type":25,"value":962},"Web development is a dynamic field that requires a combination of technical skills and knowledge. As you embark on your journey to becoming a proficient web developer, it’s essential to understand the various stages and technologies involved. Here’s a roadmap that can guide you through the essential skills and tools you need to succeed in web development.",{"type":12,"tag":21,"props":964,"children":965},{},[966],{"type":12,"tag":96,"props":967,"children":969},{"alt":98,"src":968},"/articles/web-development-roadmap.png",[],{"type":12,"tag":971,"props":972,"children":973},"aside",{},[974],{"type":25,"value":975}," 💬 Web development is a dynamic field that requires a combination of technical skills and knowledge. Here is a roadmap that can guide you through the various stages of becoming a web developer.",{"type":12,"tag":605,"props":977,"children":979},{"id":978},"_1-html-and-css",[980],{"type":25,"value":981},"1. HTML and CSS",{"type":12,"tag":21,"props":983,"children":984},{},[985,987,992,994,999],{"type":25,"value":986},"Start by learning the basics of ",{"type":12,"tag":116,"props":988,"children":989},{},[990],{"type":25,"value":991},"HTML",{"type":25,"value":993}," (Hypertext Markup Language) and ",{"type":12,"tag":116,"props":995,"children":996},{},[997],{"type":25,"value":998},"CSS",{"type":25,"value":1000}," (Cascading Style Sheets). HTML is used to structure the content of a web page, while CSS is used to style and layout the web page. Mastering these foundational technologies will provide you with a strong understanding of how web pages are built and styled.",{"type":12,"tag":605,"props":1002,"children":1004},{"id":1003},"_2-javascript",[1005],{"type":25,"value":1006},"2. JavaScript",{"type":12,"tag":21,"props":1008,"children":1009},{},[1010,1012,1017],{"type":25,"value":1011},"Next, dive into ",{"type":12,"tag":116,"props":1013,"children":1014},{},[1015],{"type":25,"value":1016},"JavaScript",{"type":25,"value":1018},", the programming language of the web. Learn the fundamentals, including variables, data types, functions, and control flow. Mastering JavaScript will allow you to add interactivity and dynamic functionality to your websites, opening up many opportunities in web development.",{"type":12,"tag":605,"props":1020,"children":1022},{"id":1021},"_3-front-end-frameworks",[1023],{"type":25,"value":1024},"3. Front-End Frameworks",{"type":12,"tag":21,"props":1026,"children":1027},{},[1028,1030,1035,1037,1042,1044,1049],{"type":25,"value":1029},"Once you have a good grasp of HTML, CSS, and JavaScript, explore popular front-end frameworks such as ",{"type":12,"tag":116,"props":1031,"children":1032},{},[1033],{"type":25,"value":1034},"React",{"type":25,"value":1036},", ",{"type":12,"tag":116,"props":1038,"children":1039},{},[1040],{"type":25,"value":1041},"Angular",{"type":25,"value":1043},", or ",{"type":12,"tag":116,"props":1045,"children":1046},{},[1047],{"type":25,"value":1048},"Vue.js",{"type":25,"value":1050},". These frameworks provide a structured way to build complex web applications and make development more efficient. By learning a front-end framework, you'll be able to create interactive and responsive user interfaces and work effectively on larger projects.",{"type":12,"tag":605,"props":1052,"children":1054},{"id":1053},"_4-back-end-development",[1055],{"type":25,"value":1056},"4. Back-End Development",{"type":12,"tag":21,"props":1058,"children":1059},{},[1060,1062,1067,1069,1074,1075,1080,1081,1086],{"type":25,"value":1061},"While front-end development focuses on user interface and experience, ",{"type":12,"tag":116,"props":1063,"children":1064},{},[1065],{"type":25,"value":1066},"back-end development",{"type":25,"value":1068}," deals with server-side logic and data processing. Gain knowledge in back-end development by learning a server-side language like ",{"type":12,"tag":116,"props":1070,"children":1071},{},[1072],{"type":25,"value":1073},"Node.js",{"type":25,"value":1036},{"type":12,"tag":116,"props":1076,"children":1077},{},[1078],{"type":25,"value":1079},"PHP",{"type":25,"value":1043},{"type":12,"tag":116,"props":1082,"children":1083},{},[1084],{"type":25,"value":1085},"Python",{"type":25,"value":1087},". Understand concepts such as server-side programming, databases, and RESTful APIs to create dynamic, data-driven web applications.",{"type":12,"tag":605,"props":1089,"children":1091},{"id":1090},"_5-databases",[1092],{"type":25,"value":1093},"5. Databases",{"type":12,"tag":21,"props":1095,"children":1096},{},[1097,1099,1104,1106,1111,1113,1118,1120,1125,1126,1131],{"type":25,"value":1098},"To effectively manage and store data in your web applications, it’s essential to learn about ",{"type":12,"tag":116,"props":1100,"children":1101},{},[1102],{"type":25,"value":1103},"databases",{"type":25,"value":1105},". Explore both SQL (Structured Query Language) databases like ",{"type":12,"tag":116,"props":1107,"children":1108},{},[1109],{"type":25,"value":1110},"MySQL",{"type":25,"value":1112}," and ",{"type":12,"tag":116,"props":1114,"children":1115},{},[1116],{"type":25,"value":1117},"PostgreSQL",{"type":25,"value":1119},", as well as NoSQL databases like ",{"type":12,"tag":116,"props":1121,"children":1122},{},[1123],{"type":25,"value":1124},"MongoDB",{"type":25,"value":1112},{"type":12,"tag":116,"props":1127,"children":1128},{},[1129],{"type":25,"value":1130},"Firebase",{"type":25,"value":1132},". Understanding how to design and query databases is crucial for building efficient web applications.",{"type":12,"tag":605,"props":1134,"children":1136},{"id":1135},"_6-version-control",[1137],{"type":25,"value":1138},"6. Version Control",{"type":12,"tag":21,"props":1140,"children":1141},{},[1142,1144,1149,1151,1156],{"type":25,"value":1143},"Having a solid understanding of ",{"type":12,"tag":116,"props":1145,"children":1146},{},[1147],{"type":25,"value":1148},"version control",{"type":25,"value":1150}," systems like ",{"type":12,"tag":116,"props":1152,"children":1153},{},[1154],{"type":25,"value":1155},"Git",{"type":25,"value":1157}," is vital for web developers. Version control allows you to track changes in your codebase, collaborate with others, and manage different versions of your projects. Familiarize yourself with Git to streamline your development workflow and ensure code stability.",{"type":12,"tag":605,"props":1159,"children":1161},{"id":1160},"_7-deployment-and-hosting",[1162],{"type":25,"value":1163},"7. Deployment and Hosting",{"type":12,"tag":21,"props":1165,"children":1166},{},[1167,1169,1174,1176,1181],{"type":25,"value":1168},"Learn about deploying and hosting your web applications. Understand concepts such as domain names, web servers, and cloud platforms like ",{"type":12,"tag":116,"props":1170,"children":1171},{},[1172],{"type":25,"value":1173},"AWS",{"type":25,"value":1175}," (Amazon Web Services) or ",{"type":12,"tag":116,"props":1177,"children":1178},{},[1179],{"type":25,"value":1180},"Heroku",{"type":25,"value":1182},". Knowing how to deploy and host your applications is crucial for making them accessible to users.",{"type":12,"tag":605,"props":1184,"children":1186},{"id":1185},"_8-security-and-performance-optimization",[1187],{"type":25,"value":1188},"8. Security and Performance Optimization",{"type":12,"tag":21,"props":1190,"children":1191},{},[1192],{"type":25,"value":1193},"Web security is a critical aspect of web development. Understand the importance of web security and learn best practices to protect your applications from common vulnerabilities. Additionally, optimize your web applications for performance to ensure fast and efficient user experiences.",{"type":12,"tag":605,"props":1195,"children":1197},{"id":1196},"_9-continuous-learning",[1198],{"type":25,"value":1199},"9. Continuous Learning",{"type":12,"tag":21,"props":1201,"children":1202},{},[1203],{"type":25,"value":1204},"Web development is ever-evolving, so it’s crucial to stay up to date with the latest trends and technologies. Continuously learn and explore new frameworks, libraries, and tools to enhance your skills. Embrace a growth mindset and be open to learning new technologies throughout your career.",{"type":12,"tag":81,"props":1206,"children":1208},{"id":1207},"my-specialized-roadmap",[1209],{"type":25,"value":1210},"My Specialized Roadmap",{"type":12,"tag":21,"props":1212,"children":1213},{},[1214],{"type":25,"value":1215},"Curated by Hugh Herschell",{"type":12,"tag":1217,"props":1218,"children":1219},"hr",{},[],{"type":12,"tag":971,"props":1221,"children":1222},{},[1223],{"type":25,"value":1224}," 🚧 Before we get started, there are a few things you gotta have and I’m sure all developers will agree on this: a good editor (IDE), a really good playlist (follow me on Spotify and check out my playlist 😁), and snacks.",{"type":12,"tag":1226,"props":1227,"children":1229},"h4",{"id":1228},"_1-the-perfect-ide-and-settings",[1230],{"type":25,"value":1231},"1. The Perfect IDE and Settings",{"type":12,"tag":21,"props":1233,"children":1234},{},[1235,1237,1242,1244,1249],{"type":25,"value":1236},"When it comes to choosing an ",{"type":12,"tag":116,"props":1238,"children":1239},{},[1240],{"type":25,"value":1241},"IDE",{"type":25,"value":1243}," (Integrated Development Environment) for web development, ",{"type":12,"tag":116,"props":1245,"children":1246},{},[1247],{"type":25,"value":1248},"Visual Studio Code (VS Code)",{"type":25,"value":1250}," is widely regarded as one of the best options. Here are some reasons why:",{"type":12,"tag":108,"props":1252,"children":1253},{},[1254,1264,1274,1284,1294,1304,1314],{"type":12,"tag":112,"props":1255,"children":1256},{},[1257,1262],{"type":12,"tag":116,"props":1258,"children":1259},{},[1260],{"type":25,"value":1261},"Lightweight and Fast",{"type":25,"value":1263},": VS Code is built on the Electron framework, allowing it to be lightweight and fast while providing a rich set of features.",{"type":12,"tag":112,"props":1265,"children":1266},{},[1267,1272],{"type":12,"tag":116,"props":1268,"children":1269},{},[1270],{"type":25,"value":1271},"Wide Language Support",{"type":25,"value":1273},": It supports a wide range of programming languages, making it suitable for various web development tasks.",{"type":12,"tag":112,"props":1275,"children":1276},{},[1277,1282],{"type":12,"tag":116,"props":1278,"children":1279},{},[1280],{"type":25,"value":1281},"Extensions Ecosystem",{"type":25,"value":1283},": The vast ecosystem of extensions enhances functionality, allowing developers to customize their coding experience.",{"type":12,"tag":112,"props":1285,"children":1286},{},[1287,1292],{"type":12,"tag":116,"props":1288,"children":1289},{},[1290],{"type":25,"value":1291},"Integrated Terminal",{"type":25,"value":1293},": An integrated terminal allows you to execute commands and run scripts without leaving the IDE.",{"type":12,"tag":112,"props":1295,"children":1296},{},[1297,1302],{"type":12,"tag":116,"props":1298,"children":1299},{},[1300],{"type":25,"value":1301},"Git Integration",{"type":25,"value":1303},": Built-in Git integration simplifies version control and collaboration.",{"type":12,"tag":112,"props":1305,"children":1306},{},[1307,1312],{"type":12,"tag":116,"props":1308,"children":1309},{},[1310],{"type":25,"value":1311},"Debugging Capabilities",{"type":25,"value":1313},": VS Code offers robust debugging capabilities for various programming languages.",{"type":12,"tag":112,"props":1315,"children":1316},{},[1317,1322],{"type":12,"tag":116,"props":1318,"children":1319},{},[1320],{"type":25,"value":1321},"Active Community and Support",{"type":25,"value":1323},": A large community of developers contributes to its development and creates helpful resources.",{"type":12,"tag":21,"props":1325,"children":1326},{},[1327,1332],{"type":12,"tag":116,"props":1328,"children":1329},{},[1330],{"type":25,"value":1331},"Things to Do After Installing VS Code",{"type":25,"value":1333},":",{"type":12,"tag":108,"props":1335,"children":1338},{"className":1336},[1337],"contains-task-list",[1339,1352,1361],{"type":12,"tag":112,"props":1340,"children":1343},{"className":1341},[1342],"task-list-item",[1344,1350],{"type":12,"tag":1345,"props":1346,"children":1349},"input",{"disabled":1347,"type":1348},true,"checkbox",[],{"type":25,"value":1351}," Turn on dark mode (My preference: Night Owl theme).",{"type":12,"tag":112,"props":1353,"children":1355},{"className":1354},[1342],[1356,1359],{"type":12,"tag":1345,"props":1357,"children":1358},{"disabled":1347,"type":1348},[],{"type":25,"value":1360}," Turn on autosave, located under File.",{"type":12,"tag":112,"props":1362,"children":1364},{"className":1363},[1342],[1365,1368,1370],{"type":12,"tag":1345,"props":1366,"children":1367},{"disabled":1347,"type":1348},[],{"type":25,"value":1369}," Install the following extensions to help you work with ease:\n",{"type":12,"tag":108,"props":1371,"children":1373},{"className":1372},[1337],[1374,1383,1392,1401,1410,1419,1428,1437,1446],{"type":12,"tag":112,"props":1375,"children":1377},{"className":1376},[1342],[1378,1381],{"type":12,"tag":1345,"props":1379,"children":1380},{"disabled":1347,"type":1348},[],{"type":25,"value":1382}," Night Owl",{"type":12,"tag":112,"props":1384,"children":1386},{"className":1385},[1342],[1387,1390],{"type":12,"tag":1345,"props":1388,"children":1389},{"disabled":1347,"type":1348},[],{"type":25,"value":1391}," Auto Rename Tag",{"type":12,"tag":112,"props":1393,"children":1395},{"className":1394},[1342],[1396,1399],{"type":12,"tag":1345,"props":1397,"children":1398},{"disabled":1347,"type":1348},[],{"type":25,"value":1400}," Bracket Pair Colorizer",{"type":12,"tag":112,"props":1402,"children":1404},{"className":1403},[1342],[1405,1408],{"type":12,"tag":1345,"props":1406,"children":1407},{"disabled":1347,"type":1348},[],{"type":25,"value":1409}," Indent Rainbow",{"type":12,"tag":112,"props":1411,"children":1413},{"className":1412},[1342],[1414,1417],{"type":12,"tag":1345,"props":1415,"children":1416},{"disabled":1347,"type":1348},[],{"type":25,"value":1418}," Live Server",{"type":12,"tag":112,"props":1420,"children":1422},{"className":1421},[1342],[1423,1426],{"type":12,"tag":1345,"props":1424,"children":1425},{"disabled":1347,"type":1348},[],{"type":25,"value":1427}," Multiple Cursor Case Preserve",{"type":12,"tag":112,"props":1429,"children":1431},{"className":1430},[1342],[1432,1435],{"type":12,"tag":1345,"props":1433,"children":1434},{"disabled":1347,"type":1348},[],{"type":25,"value":1436}," Path Intellisense",{"type":12,"tag":112,"props":1438,"children":1440},{"className":1439},[1342],[1441,1444],{"type":12,"tag":1345,"props":1442,"children":1443},{"disabled":1347,"type":1348},[],{"type":25,"value":1445}," Prettier - Code Formatter",{"type":12,"tag":112,"props":1447,"children":1449},{"className":1448},[1342],[1450,1453],{"type":12,"tag":1345,"props":1451,"children":1452},{"disabled":1347,"type":1348},[],{"type":25,"value":1454}," Material Icon Theme",{"type":12,"tag":1226,"props":1456,"children":1458},{"id":1457},"_2-html-css-js",[1459],{"type":25,"value":1460},"2. HTML, CSS, JS",{"type":12,"tag":21,"props":1462,"children":1463},{},[1464,1466,1471],{"type":25,"value":1465},"For learning these languages in the correct order, check out ",{"type":12,"tag":116,"props":1467,"children":1468},{},[1469],{"type":25,"value":1470},"Net Ninja",{"type":25,"value":1472}," on YouTube. Here are the playlists to watch:",{"type":12,"tag":1474,"props":1475,"children":1476},"ol",{},[1477,1487,1496],{"type":12,"tag":112,"props":1478,"children":1479},{},[1480],{"type":12,"tag":188,"props":1481,"children":1484},{"href":1482,"rel":1483},"https://www.youtube.com/playlist?list=PL4cUxeGkcC9gK7Fj4yT2T9A6Z8I1z0O2F",[192],[1485],{"type":25,"value":1486},"HTML & CSS",{"type":12,"tag":112,"props":1488,"children":1489},{},[1490],{"type":12,"tag":188,"props":1491,"children":1494},{"href":1492,"rel":1493},"https://www.youtube.com/playlist?list=PL4cUxeGkcC9g2c4g3d1sZw6jQR7G4m76Q",[192],[1495],{"type":25,"value":1016},{"type":12,"tag":112,"props":1497,"children":1498},{},[1499],{"type":12,"tag":188,"props":1500,"children":1503},{"href":1501,"rel":1502},"https://www.youtube.com/playlist?list=PL4cUxeGkcC9j4bN6Fj2W0g4B8H15n-WfL",[192],[1504],{"type":25,"value":1505},"Asynchronous JavaScript",{"type":12,"tag":1226,"props":1507,"children":1509},{"id":1508},"_3-version-control",[1510],{"type":25,"value":1511},"3. Version Control",{"type":12,"tag":21,"props":1513,"children":1514},{},[1515,1517,1521,1523,1528],{"type":25,"value":1516},"Version control is essential for managing and tracking changes in your codebase. ",{"type":12,"tag":116,"props":1518,"children":1519},{},[1520],{"type":25,"value":1155},{"type":25,"value":1522}," is the most popular version control system, and ",{"type":12,"tag":116,"props":1524,"children":1525},{},[1526],{"type":25,"value":1527},"GitHub",{"type":25,"value":1529}," is a web-based hosting service for Git repositories. By using Git and GitHub, web developers can effectively manage their codebase, collaborate, and contribute to the development community.",{"type":12,"tag":21,"props":1531,"children":1532},{},[1533,1538],{"type":12,"tag":116,"props":1534,"children":1535},{},[1536],{"type":25,"value":1537},"Resources",{"type":25,"value":1333},{"type":12,"tag":108,"props":1540,"children":1541},{},[1542,1552,1562],{"type":12,"tag":112,"props":1543,"children":1544},{},[1545],{"type":12,"tag":188,"props":1546,"children":1549},{"href":1547,"rel":1548},"https://git-scm.com/doc",[192],[1550],{"type":25,"value":1551},"Git Official Documentation",{"type":12,"tag":112,"props":1553,"children":1554},{},[1555],{"type":12,"tag":188,"props":1556,"children":1559},{"href":1557,"rel":1558},"https://www.youtube.com/playlist?list=PL4cUxeGkcC9g_6wO3K_e5E4aJgF3wEDYO",[192],[1560],{"type":25,"value":1561},"YouTube: The Net Ninja - Git & GitHub Tutorial for Beginners",{"type":12,"tag":112,"props":1563,"children":1564},{},[1565],{"type":25,"value":1566},"VS Code extension: Git Blame",{"type":12,"tag":1226,"props":1568,"children":1570},{"id":1569},"_4-front-end-frameworks",[1571],{"type":25,"value":1572},"4. Front-End Frameworks",{"type":12,"tag":108,"props":1574,"children":1575},{},[1576,1599,1621],{"type":12,"tag":112,"props":1577,"children":1578},{},[1579,1584,1586],{"type":12,"tag":116,"props":1580,"children":1581},{},[1582],{"type":25,"value":1583},"Tailwind CSS",{"type":25,"value":1585},": A popular utility-first CSS framework that provides a flexible and customizable foundation for styling projects.\n",{"type":12,"tag":108,"props":1587,"children":1588},{},[1589],{"type":12,"tag":112,"props":1590,"children":1591},{},[1592,1597],{"type":12,"tag":116,"props":1593,"children":1594},{},[1595],{"type":25,"value":1596},"VS Code extension",{"type":25,"value":1598},": Tailwind CSS IntelliSense",{"type":12,"tag":112,"props":1600,"children":1601},{},[1602,1606,1608],{"type":12,"tag":116,"props":1603,"children":1604},{},[1605],{"type":25,"value":1048},{"type":25,"value":1607},": An intuitive JavaScript framework used for building user interfaces, following a component-based architecture.\n",{"type":12,"tag":108,"props":1609,"children":1610},{},[1611],{"type":12,"tag":112,"props":1612,"children":1613},{},[1614,1619],{"type":12,"tag":116,"props":1615,"children":1616},{},[1617],{"type":25,"value":1618},"VS Code extensions",{"type":25,"value":1620},": Vue Language Features (Volar), Vue VSCode Snippets",{"type":12,"tag":112,"props":1622,"children":1623},{},[1624,1629],{"type":12,"tag":116,"props":1625,"children":1626},{},[1627],{"type":25,"value":1628},"Vue.js + Tailwind CSS",{"type":25,"value":1630},": Combining these frameworks can lead to an exceptional development experience.",{"type":12,"tag":1226,"props":1632,"children":1634},{"id":1633},"_5-databases-1",[1635],{"type":25,"value":1093},{"type":12,"tag":21,"props":1637,"children":1638},{},[1639],{"type":25,"value":1640},"Databases are crucial for storing, managing, and retrieving data. There are SQL databases (like MySQL and PostgreSQL) and NoSQL databases (like MongoDB and Firebase). Understanding how databases work, how to design efficient schemas, and how to interact with them is essential for web developers.",{"type":12,"tag":21,"props":1642,"children":1643},{},[1644,1649],{"type":12,"tag":116,"props":1645,"children":1646},{},[1647],{"type":25,"value":1648},"Tutorials",{"type":25,"value":1333},{"type":12,"tag":108,"props":1651,"children":1652},{},[1653,1663,1673,1678,1688],{"type":12,"tag":112,"props":1654,"children":1655},{},[1656],{"type":12,"tag":188,"props":1657,"children":1660},{"href":1658,"rel":1659},"https://firebase.google.com/docs/firestore",[192],[1661],{"type":25,"value":1662},"Firebase Firestore Tutorial",{"type":12,"tag":112,"props":1664,"children":1665},{},[1666],{"type":12,"tag":188,"props":1667,"children":1670},{"href":1668,"rel":1669},"https://www.mongodb.com/docs/guides/",[192],[1671],{"type":25,"value":1672},"MongoDB Tutorial",{"type":12,"tag":112,"props":1674,"children":1675},{},[1676],{"type":25,"value":1677},"VS Code extension: MongoDB for VS Code",{"type":12,"tag":112,"props":1679,"children":1680},{},[1681],{"type":12,"tag":188,"props":1682,"children":1685},{"href":1683,"rel":1684},"https://www.w3schools.com/sql/",[192],[1686],{"type":25,"value":1687},"SQL Tutorial for Beginners",{"type":12,"tag":112,"props":1689,"children":1690},{},[1691],{"type":12,"tag":188,"props":1692,"children":1695},{"href":1693,"rel":1694},"https://dev.mysql.com/doc/refman/8.0/en/tutorial.html",[192],[1696],{"type":25,"value":1697},"MySQL - The Basics",{"type":12,"tag":1226,"props":1699,"children":1701},{"id":1700},"_6-back-end-development",[1702],{"type":25,"value":1703},"6. Back-End Development",{"type":12,"tag":108,"props":1705,"children":1706},{},[1707,1716],{"type":12,"tag":112,"props":1708,"children":1709},{},[1710,1714],{"type":12,"tag":116,"props":1711,"children":1712},{},[1713],{"type":25,"value":1073},{"type":25,"value":1715},": A powerful JavaScript runtime suitable for server-side development, allowing you to build web servers and network applications with ease.",{"type":12,"tag":112,"props":1717,"children":1718},{},[1719,1723],{"type":12,"tag":116,"props":1720,"children":1721},{},[1722],{"type":25,"value":1130},{"type":25,"value":1724},": An all-around backend solution providing services like real-time databases, user authentication, and hosting.",{"type":12,"tag":21,"props":1726,"children":1727},{},[1728,1732],{"type":12,"tag":116,"props":1729,"children":1730},{},[1731],{"type":25,"value":1648},{"type":25,"value":1333},{"type":12,"tag":108,"props":1734,"children":1735},{},[1736,1746],{"type":12,"tag":112,"props":1737,"children":1738},{},[1739],{"type":12,"tag":188,"props":1740,"children":1743},{"href":1741,"rel":1742},"https://nodejs.dev/learn",[192],[1744],{"type":25,"value":1745},"Node.js Tutorial",{"type":12,"tag":112,"props":1747,"children":1748},{},[1749],{"type":12,"tag":188,"props":1750,"children":1753},{"href":1751,"rel":1752},"https://firebase.google.com/docs",[192],[1754],{"type":25,"value":1755},"Firebase Tutorial",{"type":12,"tag":605,"props":1757,"children":1758},{"id":550},[1759],{"type":25,"value":553},{"type":12,"tag":21,"props":1761,"children":1762},{},[1763],{"type":25,"value":1764},"The web development roadmap isn’t straightforward. With numerous options, languages, and frameworks available, the journey can be both exciting and challenging. This roadmap is a reflection of my preferences; feel free to substitute any of the technologies with those that best suit your needs.",{"type":12,"tag":21,"props":1766,"children":1767},{},[1768],{"type":25,"value":1769},"Happy coding! 😊",{"type":12,"tag":605,"props":1771,"children":1773},{"id":1772},"useful-links",[1774],{"type":25,"value":1775},"Useful Links",{"type":12,"tag":108,"props":1777,"children":1778},{},[1779,1789,1799,1809],{"type":12,"tag":112,"props":1780,"children":1781},{},[1782],{"type":12,"tag":188,"props":1783,"children":1786},{"href":1784,"rel":1785},"https://www.youtube.com/@NetNinja",[192],[1787],{"type":25,"value":1788},"YouTube: Net Ninja",{"type":12,"tag":112,"props":1790,"children":1791},{},[1792],{"type":12,"tag":188,"props":1793,"children":1796},{"href":1794,"rel":1795},"https://www.youtube.com/user/TechGuyWeb",[192],[1797],{"type":25,"value":1798},"YouTube: Traversy Media",{"type":12,"tag":112,"props":1800,"children":1801},{},[1802],{"type":12,"tag":188,"props":1803,"children":1806},{"href":1804,"rel":1805},"https://www.youtube.com/c/Academind",[192],[1807],{"type":25,"value":1808},"YouTube: Academind",{"type":12,"tag":112,"props":1810,"children":1811},{},[1812],{"type":12,"tag":188,"props":1813,"children":1816},{"href":1814,"rel":1815},"https://github.com/sourabhbansal/awesome-web-development-resources",[192],[1817],{"type":25,"value":1818},"GitHub: Awesome Web Development Resources",{"title":5,"searchDepth":35,"depth":35,"links":1820},[1821,1832],{"id":83,"depth":35,"text":86,"children":1822},[1823,1824,1825,1826,1827,1828,1829,1830,1831],{"id":978,"depth":920,"text":981},{"id":1003,"depth":920,"text":1006},{"id":1021,"depth":920,"text":1024},{"id":1053,"depth":920,"text":1056},{"id":1090,"depth":920,"text":1093},{"id":1135,"depth":920,"text":1138},{"id":1160,"depth":920,"text":1163},{"id":1185,"depth":920,"text":1188},{"id":1196,"depth":920,"text":1199},{"id":1207,"depth":35,"text":1210,"children":1833},[1834,1835],{"id":550,"depth":920,"text":553},{"id":1772,"depth":920,"text":1775},"content:articles:web-development-roadmap.md","articles/web-development-roadmap.md","articles/web-development-roadmap",{"_path":1840,"_dir":68,"_draft":6,"_partial":6,"_locale":5,"title":1841,"description":1842,"date":1843,"tags":1844,"image":1848,"readingTime":1849,"body":1850,"_type":37,"_id":3051,"_source":39,"_file":3052,"_stem":3053,"_extension":42},"/articles/image-cheat-sheet-2024","Social Media Image Sizes Cheat Sheet for 2024","Each platform has its unique set of rules regarding visuals, and mastering these dimensions is key for savvy marketers, creative content makers, or anyone just starting out.","12/10/2024",[1845,1846,1847],"Social Media","Photography","Guide","https://portfolio-hughherschell.vercel.app/articles/image-cheat-sheet-2024.png","8",{"type":9,"children":1851,"toc":2999},[1852,1856,1861,1868,1874,1879,2111,2116,2122,2127,2133,2156,2161,2192,2198,2210,2216,2229,2234,2247,2253,2294,2300,2313,2320,2323,2329,2334,2339,2362,2368,2379,2385,2418,2424,2432,2437,2474,2479,2492,2499,2502,2508,2513,2518,2530,2536,2548,2554,2566,2571,2602,2609,2612,2618,2623,2628,2640,2646,2658,2664,2687,2692,2705,2712,2715,2721,2726,2731,2743,2749,2760,2766,2778,2785,2788,2794,2799,2804,2816,2822,2834,2840,2852,2859,2862,2868,2873,2878,2890,2896,2918,2925,2928,2934,2939,2944,2956,2962,2973,2978,2989,2996],{"type":12,"tag":81,"props":1853,"children":1854},{"id":83},[1855],{"type":25,"value":86},{"type":12,"tag":21,"props":1857,"children":1858},{},[1859],{"type":25,"value":1860},"Navigating the digital landscape of social media can be quite the puzzle. However, knowing the right social media image sizes can help you put it all together quickly. With the appropriate image dimensions at your fingertips, you can display pictures as intended without awkward crops or loss of quality. Each platform has its unique set of rules regarding visuals, and mastering these dimensions is key for savvy marketers, creative content makers, or anyone just starting out.",{"type":12,"tag":21,"props":1862,"children":1863},{},[1864],{"type":12,"tag":96,"props":1865,"children":1867},{"alt":98,"src":1866},"/articles/image-cheat-sheet-2024.png",[],{"type":12,"tag":81,"props":1869,"children":1871},{"id":1870},"a-quick-social-media-image-size-cheat-sheet",[1872],{"type":25,"value":1873},"A Quick Social Media Image Size Cheat Sheet",{"type":12,"tag":21,"props":1875,"children":1876},{},[1877],{"type":25,"value":1878},"Here’s a quick look at the image dimensions for different social media platforms:",{"type":12,"tag":1880,"props":1881,"children":1882},"table",{},[1883,1927],{"type":12,"tag":1884,"props":1885,"children":1886},"thead",{},[1887],{"type":12,"tag":1888,"props":1889,"children":1890},"tr",{},[1891,1897,1902,1907,1912,1917,1922],{"type":12,"tag":1892,"props":1893,"children":1894},"th",{},[1895],{"type":25,"value":1896},"Platform",{"type":12,"tag":1892,"props":1898,"children":1899},{},[1900],{"type":25,"value":1901},"Profile Photo",{"type":12,"tag":1892,"props":1903,"children":1904},{},[1905],{"type":25,"value":1906},"Landscape",{"type":12,"tag":1892,"props":1908,"children":1909},{},[1910],{"type":25,"value":1911},"Portrait",{"type":12,"tag":1892,"props":1913,"children":1914},{},[1915],{"type":25,"value":1916},"Square",{"type":12,"tag":1892,"props":1918,"children":1919},{},[1920],{"type":25,"value":1921},"Stories",{"type":12,"tag":1892,"props":1923,"children":1924},{},[1925],{"type":25,"value":1926},"Cover Photo",{"type":12,"tag":1928,"props":1929,"children":1930},"tbody",{},[1931,1970,2007,2042,2077],{"type":12,"tag":1888,"props":1932,"children":1933},{},[1934,1940,1945,1950,1955,1960,1965],{"type":12,"tag":1935,"props":1936,"children":1937},"td",{},[1938],{"type":25,"value":1939},"Facebook",{"type":12,"tag":1935,"props":1941,"children":1942},{},[1943],{"type":25,"value":1944},"170 x 170 pixels",{"type":12,"tag":1935,"props":1946,"children":1947},{},[1948],{"type":25,"value":1949},"1200 x 628 pixels",{"type":12,"tag":1935,"props":1951,"children":1952},{},[1953],{"type":25,"value":1954},"628 x 1200 pixels",{"type":12,"tag":1935,"props":1956,"children":1957},{},[1958],{"type":25,"value":1959},"1200 x 1200 pixels",{"type":12,"tag":1935,"props":1961,"children":1962},{},[1963],{"type":25,"value":1964},"1080 x 1920 pixels",{"type":12,"tag":1935,"props":1966,"children":1967},{},[1968],{"type":25,"value":1969},"851 x 315 pixels",{"type":12,"tag":1888,"props":1971,"children":1972},{},[1973,1978,1983,1988,1993,1998,2002],{"type":12,"tag":1935,"props":1974,"children":1975},{},[1976],{"type":25,"value":1977},"Instagram",{"type":12,"tag":1935,"props":1979,"children":1980},{},[1981],{"type":25,"value":1982},"320 x 320 pixels",{"type":12,"tag":1935,"props":1984,"children":1985},{},[1986],{"type":25,"value":1987},"1080 x 566 pixels",{"type":12,"tag":1935,"props":1989,"children":1990},{},[1991],{"type":25,"value":1992},"1080 x 1350 pixels",{"type":12,"tag":1935,"props":1994,"children":1995},{},[1996],{"type":25,"value":1997},"1080 x 1080 pixels",{"type":12,"tag":1935,"props":1999,"children":2000},{},[2001],{"type":25,"value":1964},{"type":12,"tag":1935,"props":2003,"children":2004},{},[2005],{"type":25,"value":2006},"N/A",{"type":12,"tag":1888,"props":2008,"children":2009},{},[2010,2015,2020,2025,2029,2033,2037],{"type":12,"tag":1935,"props":2011,"children":2012},{},[2013],{"type":25,"value":2014},"Twitter",{"type":12,"tag":1935,"props":2016,"children":2017},{},[2018],{"type":25,"value":2019},"400 x 400 pixels",{"type":12,"tag":1935,"props":2021,"children":2022},{},[2023],{"type":25,"value":2024},"1600 x 900 pixels",{"type":12,"tag":1935,"props":2026,"children":2027},{},[2028],{"type":25,"value":1992},{"type":12,"tag":1935,"props":2030,"children":2031},{},[2032],{"type":25,"value":1997},{"type":12,"tag":1935,"props":2034,"children":2035},{},[2036],{"type":25,"value":2006},{"type":12,"tag":1935,"props":2038,"children":2039},{},[2040],{"type":25,"value":2041},"1500 x 500 pixels",{"type":12,"tag":1888,"props":2043,"children":2044},{},[2045,2050,2054,2059,2064,2068,2072],{"type":12,"tag":1935,"props":2046,"children":2047},{},[2048],{"type":25,"value":2049},"LinkedIn",{"type":12,"tag":1935,"props":2051,"children":2052},{},[2053],{"type":25,"value":2019},{"type":12,"tag":1935,"props":2055,"children":2056},{},[2057],{"type":25,"value":2058},"1200 x 627 pixels",{"type":12,"tag":1935,"props":2060,"children":2061},{},[2062],{"type":25,"value":2063},"627 x 1200 pixels",{"type":12,"tag":1935,"props":2065,"children":2066},{},[2067],{"type":25,"value":1997},{"type":12,"tag":1935,"props":2069,"children":2070},{},[2071],{"type":25,"value":2006},{"type":12,"tag":1935,"props":2073,"children":2074},{},[2075],{"type":25,"value":2076},"1584 x 396 pixels",{"type":12,"tag":1888,"props":2078,"children":2079},{},[2080,2085,2090,2095,2099,2103,2107],{"type":12,"tag":1935,"props":2081,"children":2082},{},[2083],{"type":25,"value":2084},"TikTok",{"type":12,"tag":1935,"props":2086,"children":2087},{},[2088],{"type":25,"value":2089},"200 x 200 pixels",{"type":12,"tag":1935,"props":2091,"children":2092},{},[2093],{"type":25,"value":2094},"1920 x 1080 pixels",{"type":12,"tag":1935,"props":2096,"children":2097},{},[2098],{"type":25,"value":1964},{"type":12,"tag":1935,"props":2100,"children":2101},{},[2102],{"type":25,"value":1997},{"type":12,"tag":1935,"props":2104,"children":2105},{},[2106],{"type":25,"value":1964},{"type":12,"tag":1935,"props":2108,"children":2109},{},[2110],{"type":25,"value":2006},{"type":12,"tag":21,"props":2112,"children":2113},{},[2114],{"type":25,"value":2115},"Let’s look at them one by one.",{"type":12,"tag":81,"props":2117,"children":2119},{"id":2118},"_1-facebook-image-sizes",[2120],{"type":25,"value":2121},"1. Facebook Image Sizes",{"type":12,"tag":21,"props":2123,"children":2124},{},[2125],{"type":25,"value":2126},"Facebook offers various image sizes tailored for different types of content. Below are key sizes you need to know:",{"type":12,"tag":605,"props":2128,"children":2130},{"id":2129},"profile-picture",[2131],{"type":25,"value":2132},"Profile Picture",{"type":12,"tag":108,"props":2134,"children":2135},{},[2136,2146],{"type":12,"tag":112,"props":2137,"children":2138},{},[2139,2144],{"type":12,"tag":116,"props":2140,"children":2141},{},[2142],{"type":25,"value":2143},"Desktop:",{"type":25,"value":2145}," 170 x 170 pixels",{"type":12,"tag":112,"props":2147,"children":2148},{},[2149,2154],{"type":12,"tag":116,"props":2150,"children":2151},{},[2152],{"type":25,"value":2153},"Mobile:",{"type":25,"value":2155}," 128 x 128 pixels",{"type":12,"tag":605,"props":2157,"children":2159},{"id":2158},"cover-photo",[2160],{"type":25,"value":1926},{"type":12,"tag":108,"props":2162,"children":2163},{},[2164,2174,2183],{"type":12,"tag":112,"props":2165,"children":2166},{},[2167,2172],{"type":12,"tag":116,"props":2168,"children":2169},{},[2170],{"type":25,"value":2171},"Recommended:",{"type":25,"value":2173}," 851 x 315 pixels",{"type":12,"tag":112,"props":2175,"children":2176},{},[2177,2181],{"type":12,"tag":116,"props":2178,"children":2179},{},[2180],{"type":25,"value":2143},{"type":25,"value":2182}," 820 x 312 pixels",{"type":12,"tag":112,"props":2184,"children":2185},{},[2186,2190],{"type":12,"tag":116,"props":2187,"children":2188},{},[2189],{"type":25,"value":2153},{"type":25,"value":2191}," 640 x 360 pixels",{"type":12,"tag":605,"props":2193,"children":2195},{"id":2194},"event-cover-photo",[2196],{"type":25,"value":2197},"Event Cover Photo",{"type":12,"tag":108,"props":2199,"children":2200},{},[2201],{"type":12,"tag":112,"props":2202,"children":2203},{},[2204,2208],{"type":12,"tag":116,"props":2205,"children":2206},{},[2207],{"type":25,"value":2171},{"type":25,"value":2209}," 1200 x 628 pixels (2:1 aspect ratio)",{"type":12,"tag":605,"props":2211,"children":2213},{"id":2212},"group-cover-photo",[2214],{"type":25,"value":2215},"Group Cover Photo",{"type":12,"tag":108,"props":2217,"children":2218},{},[2219],{"type":12,"tag":112,"props":2220,"children":2221},{},[2222,2227],{"type":12,"tag":116,"props":2223,"children":2224},{},[2225],{"type":25,"value":2226},"Ideal Size:",{"type":25,"value":2228}," 1640 x 856 pixels (1.91:1 aspect ratio)",{"type":12,"tag":605,"props":2230,"children":2232},{"id":2231},"stories",[2233],{"type":25,"value":1921},{"type":12,"tag":108,"props":2235,"children":2236},{},[2237],{"type":12,"tag":112,"props":2238,"children":2239},{},[2240,2245],{"type":12,"tag":116,"props":2241,"children":2242},{},[2243],{"type":25,"value":2244},"Recommended Size:",{"type":25,"value":2246}," 1080 x 1920 pixels (9:16 aspect ratio)",{"type":12,"tag":605,"props":2248,"children":2250},{"id":2249},"ads",[2251],{"type":25,"value":2252},"Ads",{"type":12,"tag":108,"props":2254,"children":2255},{},[2256],{"type":12,"tag":112,"props":2257,"children":2258},{},[2259,2261],{"type":25,"value":2260},"Various formats; common sizes include:\n",{"type":12,"tag":108,"props":2262,"children":2263},{},[2264,2274,2284],{"type":12,"tag":112,"props":2265,"children":2266},{},[2267,2272],{"type":12,"tag":116,"props":2268,"children":2269},{},[2270],{"type":25,"value":2271},"Feed Ads:",{"type":25,"value":2273}," 1080 x 1080 pixels (minimum 600 x 600 pixels)",{"type":12,"tag":112,"props":2275,"children":2276},{},[2277,2282],{"type":12,"tag":116,"props":2278,"children":2279},{},[2280],{"type":25,"value":2281},"Right Column Ads:",{"type":25,"value":2283}," 1200 x 1200 pixels (minimum 254 x 133 pixels)",{"type":12,"tag":112,"props":2285,"children":2286},{},[2287,2292],{"type":12,"tag":116,"props":2288,"children":2289},{},[2290],{"type":25,"value":2291},"Stories Ads:",{"type":25,"value":2293}," 1080 x 1920 pixels (minimum width of 500 pixels)",{"type":12,"tag":605,"props":2295,"children":2297},{"id":2296},"tips",[2298],{"type":25,"value":2299},"Tips",{"type":12,"tag":108,"props":2301,"children":2302},{},[2303,2308],{"type":12,"tag":112,"props":2304,"children":2305},{},[2306],{"type":25,"value":2307},"Keep your file sizes under 100 KB for quicker loading.",{"type":12,"tag":112,"props":2309,"children":2310},{},[2311],{"type":25,"value":2312},"Upload images as sRGB JPG files to prevent compression.",{"type":12,"tag":21,"props":2314,"children":2315},{},[2316],{"type":12,"tag":96,"props":2317,"children":2319},{"alt":98,"src":2318},"/articles/facebook.jpeg",[],{"type":12,"tag":1217,"props":2321,"children":2322},{},[],{"type":12,"tag":81,"props":2324,"children":2326},{"id":2325},"_2-instagram-image-sizes",[2327],{"type":25,"value":2328},"2. Instagram Image Sizes",{"type":12,"tag":21,"props":2330,"children":2331},{},[2332],{"type":25,"value":2333},"Mastering Instagram goes beyond just snapping the perfect shot; it's about the right dimensions as well. Here’s what you need:",{"type":12,"tag":605,"props":2335,"children":2337},{"id":2336},"profile-photo",[2338],{"type":25,"value":1901},{"type":12,"tag":108,"props":2340,"children":2341},{},[2342,2352],{"type":12,"tag":112,"props":2343,"children":2344},{},[2345,2350],{"type":12,"tag":116,"props":2346,"children":2347},{},[2348],{"type":25,"value":2349},"Displayed Size:",{"type":25,"value":2351}," 110 x 110 pixels",{"type":12,"tag":112,"props":2353,"children":2354},{},[2355,2360],{"type":12,"tag":116,"props":2356,"children":2357},{},[2358],{"type":25,"value":2359},"Upload Size:",{"type":25,"value":2361}," 320 x 320 pixels",{"type":12,"tag":605,"props":2363,"children":2365},{"id":2364},"story",[2366],{"type":25,"value":2367},"Story",{"type":12,"tag":108,"props":2369,"children":2370},{},[2371],{"type":12,"tag":112,"props":2372,"children":2373},{},[2374,2378],{"type":12,"tag":116,"props":2375,"children":2376},{},[2377],{"type":25,"value":2244},{"type":25,"value":2246},{"type":12,"tag":605,"props":2380,"children":2382},{"id":2381},"feed-photos",[2383],{"type":25,"value":2384},"Feed Photos",{"type":12,"tag":108,"props":2386,"children":2387},{},[2388,2398,2408],{"type":12,"tag":112,"props":2389,"children":2390},{},[2391,2396],{"type":12,"tag":116,"props":2392,"children":2393},{},[2394],{"type":25,"value":2395},"Landscape:",{"type":25,"value":2397}," 1080 x 566 pixels (1.91:1)",{"type":12,"tag":112,"props":2399,"children":2400},{},[2401,2406],{"type":12,"tag":116,"props":2402,"children":2403},{},[2404],{"type":25,"value":2405},"Portrait:",{"type":25,"value":2407}," 1080 x 1350 pixels (4:5)",{"type":12,"tag":112,"props":2409,"children":2410},{},[2411,2416],{"type":12,"tag":116,"props":2412,"children":2413},{},[2414],{"type":25,"value":2415},"Square:",{"type":25,"value":2417}," 1080 x 1080 pixels",{"type":12,"tag":605,"props":2419,"children":2421},{"id":2420},"carousel-photos",[2422],{"type":25,"value":2423},"Carousel Photos",{"type":12,"tag":108,"props":2425,"children":2426},{},[2427],{"type":12,"tag":112,"props":2428,"children":2429},{},[2430],{"type":25,"value":2431},"Same as Feed Photos",{"type":12,"tag":605,"props":2433,"children":2435},{"id":2434},"ads-1",[2436],{"type":25,"value":2252},{"type":12,"tag":108,"props":2438,"children":2439},{},[2440],{"type":12,"tag":112,"props":2441,"children":2442},{},[2443,2445],{"type":25,"value":2444},"Recommended sizes:\n",{"type":12,"tag":108,"props":2446,"children":2447},{},[2448,2457,2465],{"type":12,"tag":112,"props":2449,"children":2450},{},[2451,2455],{"type":12,"tag":116,"props":2452,"children":2453},{},[2454],{"type":25,"value":2395},{"type":25,"value":2456}," 1080 x 566 pixels",{"type":12,"tag":112,"props":2458,"children":2459},{},[2460,2464],{"type":12,"tag":116,"props":2461,"children":2462},{},[2463],{"type":25,"value":2415},{"type":25,"value":2417},{"type":12,"tag":112,"props":2466,"children":2467},{},[2468,2472],{"type":12,"tag":116,"props":2469,"children":2470},{},[2471],{"type":25,"value":2291},{"type":25,"value":2473}," 1080 x 1920 pixels (9:16)",{"type":12,"tag":605,"props":2475,"children":2477},{"id":2476},"tips-1",[2478],{"type":25,"value":2299},{"type":12,"tag":108,"props":2480,"children":2481},{},[2482,2487],{"type":12,"tag":112,"props":2483,"children":2484},{},[2485],{"type":25,"value":2486},"Keep elements central in your profile photo to avoid cropping.",{"type":12,"tag":112,"props":2488,"children":2489},{},[2490],{"type":25,"value":2491},"Leave 14% at the top and bottom of story ads free of text.",{"type":12,"tag":21,"props":2493,"children":2494},{},[2495],{"type":12,"tag":96,"props":2496,"children":2498},{"alt":98,"src":2497},"/articles/instagram.jpeg",[],{"type":12,"tag":1217,"props":2500,"children":2501},{},[],{"type":12,"tag":81,"props":2503,"children":2505},{"id":2504},"_3-twitter-image-sizes",[2506],{"type":25,"value":2507},"3. Twitter Image Sizes",{"type":12,"tag":21,"props":2509,"children":2510},{},[2511],{"type":25,"value":2512},"Twitter images play a crucial role in user engagement. Here’s how to optimize your visuals:",{"type":12,"tag":605,"props":2514,"children":2516},{"id":2515},"profile-photo-1",[2517],{"type":25,"value":1901},{"type":12,"tag":108,"props":2519,"children":2520},{},[2521],{"type":12,"tag":112,"props":2522,"children":2523},{},[2524,2528],{"type":12,"tag":116,"props":2525,"children":2526},{},[2527],{"type":25,"value":2244},{"type":25,"value":2529}," 400 x 400 pixels (less than 2 MB)",{"type":12,"tag":605,"props":2531,"children":2533},{"id":2532},"header-photo",[2534],{"type":25,"value":2535},"Header Photo",{"type":12,"tag":108,"props":2537,"children":2538},{},[2539],{"type":12,"tag":112,"props":2540,"children":2541},{},[2542,2546],{"type":12,"tag":116,"props":2543,"children":2544},{},[2545],{"type":25,"value":2244},{"type":25,"value":2547}," 1500 x 500 pixels (3:1 aspect ratio, less than 5 MB)",{"type":12,"tag":605,"props":2549,"children":2551},{"id":2550},"in-stream-photos",[2552],{"type":25,"value":2553},"In-Stream Photos",{"type":12,"tag":108,"props":2555,"children":2556},{},[2557],{"type":12,"tag":112,"props":2558,"children":2559},{},[2560,2564],{"type":12,"tag":116,"props":2561,"children":2562},{},[2563],{"type":25,"value":2244},{"type":25,"value":2565}," 1600 x 900 pixels (minimum 600 x 335 pixels)",{"type":12,"tag":605,"props":2567,"children":2569},{"id":2568},"ads-2",[2570],{"type":25,"value":2252},{"type":12,"tag":108,"props":2572,"children":2573},{},[2574],{"type":12,"tag":112,"props":2575,"children":2576},{},[2577,2579],{"type":25,"value":2578},"Various formats include:\n",{"type":12,"tag":108,"props":2580,"children":2581},{},[2582,2592],{"type":12,"tag":112,"props":2583,"children":2584},{},[2585,2590],{"type":12,"tag":116,"props":2586,"children":2587},{},[2588],{"type":25,"value":2589},"Single/Multi-image Tweets:",{"type":25,"value":2591}," 600 x 335 pixels",{"type":12,"tag":112,"props":2593,"children":2594},{},[2595,2600],{"type":12,"tag":116,"props":2596,"children":2597},{},[2598],{"type":25,"value":2599},"Website Card Image:",{"type":25,"value":2601}," 800 x 418 pixels (1.91:1 aspect ratio)",{"type":12,"tag":21,"props":2603,"children":2604},{},[2605],{"type":12,"tag":96,"props":2606,"children":2608},{"alt":98,"src":2607},"/articles/twitter.jpeg",[],{"type":12,"tag":1217,"props":2610,"children":2611},{},[],{"type":12,"tag":81,"props":2613,"children":2615},{"id":2614},"_4-linkedin-image-sizes",[2616],{"type":25,"value":2617},"4. LinkedIn Image Sizes",{"type":12,"tag":21,"props":2619,"children":2620},{},[2621],{"type":25,"value":2622},"LinkedIn is a vital platform for B2B marketing. Here’s what you need to stand out:",{"type":12,"tag":605,"props":2624,"children":2626},{"id":2625},"profile-picture-1",[2627],{"type":25,"value":2132},{"type":12,"tag":108,"props":2629,"children":2630},{},[2631],{"type":12,"tag":112,"props":2632,"children":2633},{},[2634,2638],{"type":12,"tag":116,"props":2635,"children":2636},{},[2637],{"type":25,"value":2244},{"type":25,"value":2639}," 400 x 400 pixels (max 8 MB)",{"type":12,"tag":605,"props":2641,"children":2643},{"id":2642},"cover-picture",[2644],{"type":25,"value":2645},"Cover Picture",{"type":12,"tag":108,"props":2647,"children":2648},{},[2649],{"type":12,"tag":112,"props":2650,"children":2651},{},[2652,2656],{"type":12,"tag":116,"props":2653,"children":2654},{},[2655],{"type":25,"value":2244},{"type":25,"value":2657}," 1584 x 396 pixels (4:1 aspect ratio)",{"type":12,"tag":605,"props":2659,"children":2661},{"id":2660},"company-page",[2662],{"type":25,"value":2663},"Company Page",{"type":12,"tag":108,"props":2665,"children":2666},{},[2667,2677],{"type":12,"tag":112,"props":2668,"children":2669},{},[2670,2675],{"type":12,"tag":116,"props":2671,"children":2672},{},[2673],{"type":25,"value":2674},"Logo:",{"type":25,"value":2676}," 300 x 300 pixels (min), 400 x 400 pixels (max)",{"type":12,"tag":112,"props":2678,"children":2679},{},[2680,2685],{"type":12,"tag":116,"props":2681,"children":2682},{},[2683],{"type":25,"value":2684},"Cover Image:",{"type":25,"value":2686}," 1128 x 191 pixels",{"type":12,"tag":605,"props":2688,"children":2690},{"id":2689},"ads-3",[2691],{"type":25,"value":2252},{"type":12,"tag":108,"props":2693,"children":2694},{},[2695],{"type":12,"tag":112,"props":2696,"children":2697},{},[2698,2703],{"type":12,"tag":116,"props":2699,"children":2700},{},[2701],{"type":25,"value":2702},"Sponsored Content Images:",{"type":25,"value":2704}," 1200 x 627 pixels (1.91:1 aspect ratio)",{"type":12,"tag":21,"props":2706,"children":2707},{},[2708],{"type":12,"tag":96,"props":2709,"children":2711},{"alt":98,"src":2710},"/articles/linkedin.jpeg",[],{"type":12,"tag":1217,"props":2713,"children":2714},{},[],{"type":12,"tag":81,"props":2716,"children":2718},{"id":2717},"_5-tiktok-image-sizes",[2719],{"type":25,"value":2720},"5. TikTok Image Sizes",{"type":12,"tag":21,"props":2722,"children":2723},{},[2724],{"type":25,"value":2725},"TikTok isn’t just for videos; visuals matter too. Here are the essential dimensions:",{"type":12,"tag":605,"props":2727,"children":2729},{"id":2728},"profile-picture-2",[2730],{"type":25,"value":2132},{"type":12,"tag":108,"props":2732,"children":2733},{},[2734],{"type":12,"tag":112,"props":2735,"children":2736},{},[2737,2741],{"type":12,"tag":116,"props":2738,"children":2739},{},[2740],{"type":25,"value":2244},{"type":25,"value":2742}," 200 x 200 pixels (min 20 x 20 pixels)",{"type":12,"tag":605,"props":2744,"children":2746},{"id":2745},"video-size",[2747],{"type":25,"value":2748},"Video Size",{"type":12,"tag":108,"props":2750,"children":2751},{},[2752],{"type":12,"tag":112,"props":2753,"children":2754},{},[2755,2759],{"type":12,"tag":116,"props":2756,"children":2757},{},[2758],{"type":25,"value":2244},{"type":25,"value":2246},{"type":12,"tag":605,"props":2761,"children":2763},{"id":2762},"carousel-picture",[2764],{"type":25,"value":2765},"Carousel Picture",{"type":12,"tag":108,"props":2767,"children":2768},{},[2769],{"type":12,"tag":112,"props":2770,"children":2771},{},[2772,2776],{"type":12,"tag":116,"props":2773,"children":2774},{},[2775],{"type":25,"value":2244},{"type":25,"value":2777}," 1080 x 1920 pixels",{"type":12,"tag":21,"props":2779,"children":2780},{},[2781],{"type":12,"tag":96,"props":2782,"children":2784},{"alt":98,"src":2783},"/articles/tiktok.jpeg",[],{"type":12,"tag":1217,"props":2786,"children":2787},{},[],{"type":12,"tag":81,"props":2789,"children":2791},{"id":2790},"_6-youtube-image-sizes",[2792],{"type":25,"value":2793},"6. YouTube Image Sizes",{"type":12,"tag":21,"props":2795,"children":2796},{},[2797],{"type":25,"value":2798},"YouTube is known for its video content, but images are also important:",{"type":12,"tag":605,"props":2800,"children":2802},{"id":2801},"profile-picture-3",[2803],{"type":25,"value":2132},{"type":12,"tag":108,"props":2805,"children":2806},{},[2807],{"type":12,"tag":112,"props":2808,"children":2809},{},[2810,2814],{"type":12,"tag":116,"props":2811,"children":2812},{},[2813],{"type":25,"value":2244},{"type":25,"value":2815}," 800 x 800 pixels (rendered at 98 x 98 pixels)",{"type":12,"tag":605,"props":2817,"children":2819},{"id":2818},"banner-picture",[2820],{"type":25,"value":2821},"Banner Picture",{"type":12,"tag":108,"props":2823,"children":2824},{},[2825],{"type":12,"tag":112,"props":2826,"children":2827},{},[2828,2832],{"type":12,"tag":116,"props":2829,"children":2830},{},[2831],{"type":25,"value":2244},{"type":25,"value":2833}," 2048 x 1152 pixels (max 6 MB)",{"type":12,"tag":605,"props":2835,"children":2837},{"id":2836},"video-thumbnail",[2838],{"type":25,"value":2839},"Video Thumbnail",{"type":12,"tag":108,"props":2841,"children":2842},{},[2843],{"type":12,"tag":112,"props":2844,"children":2845},{},[2846,2850],{"type":12,"tag":116,"props":2847,"children":2848},{},[2849],{"type":25,"value":2244},{"type":25,"value":2851}," 1280 x 720 pixels (16:9 aspect ratio)",{"type":12,"tag":21,"props":2853,"children":2854},{},[2855],{"type":12,"tag":96,"props":2856,"children":2858},{"alt":98,"src":2857},"/articles/youtube.jpeg",[],{"type":12,"tag":1217,"props":2860,"children":2861},{},[],{"type":12,"tag":81,"props":2863,"children":2865},{"id":2864},"_7-pinterest-image-sizes",[2866],{"type":25,"value":2867},"7. Pinterest Image Sizes",{"type":12,"tag":21,"props":2869,"children":2870},{},[2871],{"type":25,"value":2872},"To drive traffic via Pinterest, adhere to these dimensions:",{"type":12,"tag":605,"props":2874,"children":2876},{"id":2875},"profile-photo-2",[2877],{"type":25,"value":1901},{"type":12,"tag":108,"props":2879,"children":2880},{},[2881],{"type":12,"tag":112,"props":2882,"children":2883},{},[2884,2888],{"type":12,"tag":116,"props":2885,"children":2886},{},[2887],{"type":25,"value":2244},{"type":25,"value":2889}," 165 x 165 pixels",{"type":12,"tag":605,"props":2891,"children":2893},{"id":2892},"pins",[2894],{"type":25,"value":2895},"Pins",{"type":12,"tag":108,"props":2897,"children":2898},{},[2899,2909],{"type":12,"tag":112,"props":2900,"children":2901},{},[2902,2907],{"type":12,"tag":116,"props":2903,"children":2904},{},[2905],{"type":25,"value":2906},"Square Pins:",{"type":25,"value":2908}," 1000 x 1000 pixels",{"type":12,"tag":112,"props":2910,"children":2911},{},[2912,2916],{"type":12,"tag":116,"props":2913,"children":2914},{},[2915],{"type":25,"value":2244},{"type":25,"value":2917}," 1000 x 1500 pixels (max 20 MB, 2:3 aspect ratio)",{"type":12,"tag":21,"props":2919,"children":2920},{},[2921],{"type":12,"tag":96,"props":2922,"children":2924},{"alt":98,"src":2923},"/articles/pinterest.jpeg",[],{"type":12,"tag":1217,"props":2926,"children":2927},{},[],{"type":12,"tag":81,"props":2929,"children":2931},{"id":2930},"_8-snapchat-image-sizes",[2932],{"type":25,"value":2933},"8. Snapchat Image Sizes",{"type":12,"tag":21,"props":2935,"children":2936},{},[2937],{"type":25,"value":2938},"Snapchat has its own set of dimensions for effective visuals:",{"type":12,"tag":605,"props":2940,"children":2942},{"id":2941},"profile-picture-4",[2943],{"type":25,"value":2132},{"type":12,"tag":108,"props":2945,"children":2946},{},[2947],{"type":12,"tag":112,"props":2948,"children":2949},{},[2950,2954],{"type":12,"tag":116,"props":2951,"children":2952},{},[2953],{"type":25,"value":2244},{"type":25,"value":2955}," 320 x 320 pixels (max 2 MB)",{"type":12,"tag":605,"props":2957,"children":2959},{"id":2958},"geofilter",[2960],{"type":25,"value":2961},"Geofilter",{"type":12,"tag":108,"props":2963,"children":2964},{},[2965],{"type":12,"tag":112,"props":2966,"children":2967},{},[2968,2972],{"type":12,"tag":116,"props":2969,"children":2970},{},[2971],{"type":25,"value":2244},{"type":25,"value":2246},{"type":12,"tag":605,"props":2974,"children":2976},{"id":2975},"ads-4",[2977],{"type":25,"value":2252},{"type":12,"tag":108,"props":2979,"children":2980},{},[2981],{"type":12,"tag":112,"props":2982,"children":2983},{},[2984,2988],{"type":12,"tag":116,"props":2985,"children":2986},{},[2987],{"type":25,"value":2244},{"type":25,"value":2246},{"type":12,"tag":21,"props":2990,"children":2991},{},[2992],{"type":12,"tag":96,"props":2993,"children":2995},{"alt":98,"src":2994},"/articles/snapchat.jpeg",[],{"type":12,"tag":1217,"props":2997,"children":2998},{},[],{"title":5,"searchDepth":35,"depth":35,"links":3000},[3001,3002,3003,3012,3020,3026,3032,3037,3042,3046],{"id":83,"depth":35,"text":86},{"id":1870,"depth":35,"text":1873},{"id":2118,"depth":35,"text":2121,"children":3004},[3005,3006,3007,3008,3009,3010,3011],{"id":2129,"depth":920,"text":2132},{"id":2158,"depth":920,"text":1926},{"id":2194,"depth":920,"text":2197},{"id":2212,"depth":920,"text":2215},{"id":2231,"depth":920,"text":1921},{"id":2249,"depth":920,"text":2252},{"id":2296,"depth":920,"text":2299},{"id":2325,"depth":35,"text":2328,"children":3013},[3014,3015,3016,3017,3018,3019],{"id":2336,"depth":920,"text":1901},{"id":2364,"depth":920,"text":2367},{"id":2381,"depth":920,"text":2384},{"id":2420,"depth":920,"text":2423},{"id":2434,"depth":920,"text":2252},{"id":2476,"depth":920,"text":2299},{"id":2504,"depth":35,"text":2507,"children":3021},[3022,3023,3024,3025],{"id":2515,"depth":920,"text":1901},{"id":2532,"depth":920,"text":2535},{"id":2550,"depth":920,"text":2553},{"id":2568,"depth":920,"text":2252},{"id":2614,"depth":35,"text":2617,"children":3027},[3028,3029,3030,3031],{"id":2625,"depth":920,"text":2132},{"id":2642,"depth":920,"text":2645},{"id":2660,"depth":920,"text":2663},{"id":2689,"depth":920,"text":2252},{"id":2717,"depth":35,"text":2720,"children":3033},[3034,3035,3036],{"id":2728,"depth":920,"text":2132},{"id":2745,"depth":920,"text":2748},{"id":2762,"depth":920,"text":2765},{"id":2790,"depth":35,"text":2793,"children":3038},[3039,3040,3041],{"id":2801,"depth":920,"text":2132},{"id":2818,"depth":920,"text":2821},{"id":2836,"depth":920,"text":2839},{"id":2864,"depth":35,"text":2867,"children":3043},[3044,3045],{"id":2875,"depth":920,"text":1901},{"id":2892,"depth":920,"text":2895},{"id":2930,"depth":35,"text":2933,"children":3047},[3048,3049,3050],{"id":2941,"depth":920,"text":2132},{"id":2958,"depth":920,"text":2961},{"id":2975,"depth":920,"text":2252},"content:articles:image-cheat-sheet-2024.md","articles/image-cheat-sheet-2024.md","articles/image-cheat-sheet-2024",{"_path":3055,"_dir":68,"_draft":6,"_partial":6,"_locale":5,"title":3056,"description":3057,"date":3058,"tags":3059,"image":3061,"readingTime":3062,"body":3063,"_type":37,"_id":3484,"_source":39,"_file":3485,"_stem":3486,"_extension":42},"/articles/building-modern-web-application","Building Modern Web Applications: The Power of Firebase, Vue.js, and Tailwind CSS","Discover the benefits of using Firebase, Vue.js, and Tailwind CSS together to build scalable, performant, and visually appealing web applications.","12/02/2024",[582,1130,1048,1583,3060],"SEO","https://portfolio-hughherschell.vercel.app/articles/building-modern-web-application.webp","5",{"type":9,"children":3064,"toc":3475},[3065,3069,3074,3081,3087,3092,3098,3106,3169,3177,3210,3216,3221,3226,3233,3286,3293,3316,3322,3327,3332,3339,3382,3389,3412,3418,3423,3466,3470],{"type":12,"tag":81,"props":3066,"children":3067},{"id":83},[3068],{"type":25,"value":86},{"type":12,"tag":21,"props":3070,"children":3071},{},[3072],{"type":25,"value":3073},"The web development landscape is constantly evolving, with new tools and technologies emerging to simplify and improve the process of building modern applications. Among the many tools available, Firebase, Vue.js, and Tailwind CSS stand out for their unique strengths and seamless integration. In this article, we will explore how combining these three technologies enables you to create dynamic, scalable, and visually appealing web applications, all while enhancing your SEO strategy.",{"type":12,"tag":21,"props":3075,"children":3076},{},[3077],{"type":12,"tag":96,"props":3078,"children":3080},{"alt":98,"src":3079},"/articles/building-modern-web-application.webp",[],{"type":12,"tag":605,"props":3082,"children":3084},{"id":3083},"firebase-backend-as-a-service-baas-made-easy",[3085],{"type":25,"value":3086},"Firebase: Backend as a Service (BaaS) Made Easy",{"type":12,"tag":21,"props":3088,"children":3089},{},[3090],{"type":25,"value":3091},"Firebase, a cloud-hosted platform by Google, offers a comprehensive suite of Backend as a Service (BaaS) solutions. With Firebase, developers can focus on building rich front-end features while offloading backend complexities like authentication, real-time databases, and server management.",{"type":12,"tag":96,"props":3093,"children":3097},{"src":3094,"alt":3095,"width":3096},"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Firebase_icon.svg/2048px-Firebase_icon.svg.png","Firebase logo","40px",[],{"type":12,"tag":21,"props":3099,"children":3100},{},[3101],{"type":12,"tag":116,"props":3102,"children":3103},{},[3104],{"type":25,"value":3105},"Key Features:",{"type":12,"tag":108,"props":3107,"children":3108},{},[3109,3119,3129,3139,3149,3159],{"type":12,"tag":112,"props":3110,"children":3111},{},[3112,3117],{"type":12,"tag":116,"props":3113,"children":3114},{},[3115],{"type":25,"value":3116},"Authentication:",{"type":25,"value":3118}," Firebase provides secure user login methods, including email/password and social logins (Google, Facebook, etc.), ensuring a seamless and safe user experience.",{"type":12,"tag":112,"props":3120,"children":3121},{},[3122,3127],{"type":12,"tag":116,"props":3123,"children":3124},{},[3125],{"type":25,"value":3126},"Realtime Database:",{"type":25,"value":3128}," With Firebase’s Realtime Database, you can stream updates between clients in real-time, making it ideal for collaborative apps like chat systems.",{"type":12,"tag":112,"props":3130,"children":3131},{},[3132,3137],{"type":12,"tag":116,"props":3133,"children":3134},{},[3135],{"type":25,"value":3136},"Cloud Firestore:",{"type":25,"value":3138}," This flexible NoSQL database enables structured data storage and offline capabilities for enhanced user experience.",{"type":12,"tag":112,"props":3140,"children":3141},{},[3142,3147],{"type":12,"tag":116,"props":3143,"children":3144},{},[3145],{"type":25,"value":3146},"Cloud Storage:",{"type":25,"value":3148}," Securely store and serve images, videos, and other assets, ensuring they are available when needed.",{"type":12,"tag":112,"props":3150,"children":3151},{},[3152,3157],{"type":12,"tag":116,"props":3153,"children":3154},{},[3155],{"type":25,"value":3156},"Cloud Functions:",{"type":25,"value":3158}," Run custom backend logic without managing servers by using serverless functions that respond to events like database changes or user logins.",{"type":12,"tag":112,"props":3160,"children":3161},{},[3162,3167],{"type":12,"tag":116,"props":3163,"children":3164},{},[3165],{"type":25,"value":3166},"Cloud Hosting:",{"type":25,"value":3168}," Host your web app with a global CDN to ensure fast, reliable performance for users anywhere in the world.",{"type":12,"tag":21,"props":3170,"children":3171},{},[3172],{"type":12,"tag":116,"props":3173,"children":3174},{},[3175],{"type":25,"value":3176},"Benefits for SEO:",{"type":12,"tag":108,"props":3178,"children":3179},{},[3180,3190,3200],{"type":12,"tag":112,"props":3181,"children":3182},{},[3183,3188],{"type":12,"tag":116,"props":3184,"children":3185},{},[3186],{"type":25,"value":3187},"Fast Loading Times:",{"type":25,"value":3189}," Firebase’s CDN accelerates content delivery, boosting site performance—a critical SEO factor.",{"type":12,"tag":112,"props":3191,"children":3192},{},[3193,3198],{"type":12,"tag":116,"props":3194,"children":3195},{},[3196],{"type":25,"value":3197},"Scalability:",{"type":25,"value":3199}," As your application grows, Firebase seamlessly scales with it, preventing performance bottlenecks that could hurt SEO.",{"type":12,"tag":112,"props":3201,"children":3202},{},[3203,3208],{"type":12,"tag":116,"props":3204,"children":3205},{},[3206],{"type":25,"value":3207},"Secure Connection:",{"type":25,"value":3209}," Firebase enforces HTTPS by default, a positive ranking factor for search engines.",{"type":12,"tag":605,"props":3211,"children":3213},{"id":3212},"vuejs-a-progressive-approach-to-building-uis",[3214],{"type":25,"value":3215},"Vue.js: A Progressive Approach to Building UIs",{"type":12,"tag":21,"props":3217,"children":3218},{},[3219],{"type":25,"value":3220},"Vue.js is a progressive JavaScript framework that makes UI development more intuitive and efficient. Its component-based architecture encourages the reuse of code, making it easier to maintain and scale web applications.",{"type":12,"tag":96,"props":3222,"children":3225},{"src":3223,"alt":3224,"width":3096},"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1184px-Vue.js_Logo_2.svg.png","Vue.js logo",[],{"type":12,"tag":21,"props":3227,"children":3228},{},[3229],{"type":12,"tag":116,"props":3230,"children":3231},{},[3232],{"type":25,"value":3105},{"type":12,"tag":108,"props":3234,"children":3235},{},[3236,3246,3256,3266,3276],{"type":12,"tag":112,"props":3237,"children":3238},{},[3239,3244],{"type":12,"tag":116,"props":3240,"children":3241},{},[3242],{"type":25,"value":3243},"Component-Based Architecture:",{"type":25,"value":3245}," By breaking down complex UIs into smaller, reusable components, Vue.js fosters better organization and simplifies collaboration.",{"type":12,"tag":112,"props":3247,"children":3248},{},[3249,3254],{"type":12,"tag":116,"props":3250,"children":3251},{},[3252],{"type":25,"value":3253},"Two-Way Data Binding:",{"type":25,"value":3255}," Vue.js automatically updates the user interface when the underlying data changes, reducing the need for manual updates and streamlining application logic.",{"type":12,"tag":112,"props":3257,"children":3258},{},[3259,3264],{"type":12,"tag":116,"props":3260,"children":3261},{},[3262],{"type":25,"value":3263},"Virtual DOM:",{"type":25,"value":3265}," Vue’s efficient Virtual DOM implementation ensures that only the necessary parts of the UI are updated, leading to smoother performance.",{"type":12,"tag":112,"props":3267,"children":3268},{},[3269,3274],{"type":12,"tag":116,"props":3270,"children":3271},{},[3272],{"type":25,"value":3273},"Templating System:",{"type":25,"value":3275}," Vue’s templating system simplifies creating dynamic HTML, allowing developers to build sophisticated UIs with ease.",{"type":12,"tag":112,"props":3277,"children":3278},{},[3279,3284],{"type":12,"tag":116,"props":3280,"children":3281},{},[3282],{"type":25,"value":3283},"Rich Ecosystem:",{"type":25,"value":3285}," Vue’s ecosystem offers plugins and third-party integrations for tasks like routing, state management, and more, making it flexible for a wide range of projects.",{"type":12,"tag":21,"props":3287,"children":3288},{},[3289],{"type":12,"tag":116,"props":3290,"children":3291},{},[3292],{"type":25,"value":3176},{"type":12,"tag":108,"props":3294,"children":3295},{},[3296,3306],{"type":12,"tag":112,"props":3297,"children":3298},{},[3299,3304],{"type":12,"tag":116,"props":3300,"children":3301},{},[3302],{"type":25,"value":3303},"Single-Page Applications (SPAs):",{"type":25,"value":3305}," Vue.js is well-suited for building SPAs, which can offer a seamless user experience. With techniques like server-side rendering (SSR) or pre-rendering, SPAs built with Vue.js can still be SEO-friendly, allowing search engines to crawl and index dynamic content.",{"type":12,"tag":112,"props":3307,"children":3308},{},[3309,3314],{"type":12,"tag":116,"props":3310,"children":3311},{},[3312],{"type":25,"value":3313},"Dynamic Content:",{"type":25,"value":3315}," Vue.js efficiently handles dynamic updates without reloading the entire page, improving user experience and, when properly configured, benefiting SEO.",{"type":12,"tag":605,"props":3317,"children":3319},{"id":3318},"tailwind-css-utility-first-approach-to-styling",[3320],{"type":25,"value":3321},"Tailwind CSS: Utility-First Approach to Styling",{"type":12,"tag":21,"props":3323,"children":3324},{},[3325],{"type":25,"value":3326},"Tailwind CSS offers a utility-first approach to styling, enabling developers to build responsive and consistent UIs quickly by composing styles directly within HTML.",{"type":12,"tag":96,"props":3328,"children":3331},{"src":3329,"alt":3330,"width":3096},"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/320px-Tailwind_CSS_Logo.svg.png","Tailwind CSS logo",[],{"type":12,"tag":21,"props":3333,"children":3334},{},[3335],{"type":12,"tag":116,"props":3336,"children":3337},{},[3338],{"type":25,"value":3105},{"type":12,"tag":108,"props":3340,"children":3341},{},[3342,3352,3362,3372],{"type":12,"tag":112,"props":3343,"children":3344},{},[3345,3350],{"type":12,"tag":116,"props":3346,"children":3347},{},[3348],{"type":25,"value":3349},"Utility Classes:",{"type":25,"value":3351}," Tailwind provides a comprehensive set of pre-defined utility classes for styling elements, spacing, typography, and responsiveness, eliminating the need for writing custom CSS.",{"type":12,"tag":112,"props":3353,"children":3354},{},[3355,3360],{"type":12,"tag":116,"props":3356,"children":3357},{},[3358],{"type":25,"value":3359},"Customization:",{"type":25,"value":3361}," Tailwind can be configured to tailor the utility classes to the specific design needs of your project, ensuring design consistency.",{"type":12,"tag":112,"props":3363,"children":3364},{},[3365,3370],{"type":12,"tag":116,"props":3366,"children":3367},{},[3368],{"type":25,"value":3369},"Responsive Design:",{"type":25,"value":3371}," Tailwind’s built-in responsive classes simplify the process of making applications mobile-friendly, which is critical for SEO.",{"type":12,"tag":112,"props":3373,"children":3374},{},[3375,3380],{"type":12,"tag":116,"props":3376,"children":3377},{},[3378],{"type":25,"value":3379},"Integration:",{"type":25,"value":3381}," Tailwind works well alongside other CSS frameworks, allowing flexibility in styling approaches.",{"type":12,"tag":21,"props":3383,"children":3384},{},[3385],{"type":12,"tag":116,"props":3386,"children":3387},{},[3388],{"type":25,"value":3176},{"type":12,"tag":108,"props":3390,"children":3391},{},[3392,3402],{"type":12,"tag":112,"props":3393,"children":3394},{},[3395,3400],{"type":12,"tag":116,"props":3396,"children":3397},{},[3398],{"type":25,"value":3399},"Faster Loading Times:",{"type":25,"value":3401}," By promoting a utility-first approach, Tailwind generates smaller, more efficient CSS files, reducing the website’s load time—a key SEO factor.",{"type":12,"tag":112,"props":3403,"children":3404},{},[3405,3410],{"type":12,"tag":116,"props":3406,"children":3407},{},[3408],{"type":25,"value":3409},"Mobile-First Design:",{"type":25,"value":3411}," With its focus on responsiveness, Tailwind makes it easier to ensure your web application is optimized for all screen sizes, crucial for Google’s mobile-first indexing.",{"type":12,"tag":605,"props":3413,"children":3415},{"id":3414},"combining-these-technologies-a-powerful-trio-for-modern-web-development",[3416],{"type":25,"value":3417},"Combining These Technologies: A Powerful Trio for Modern Web Development",{"type":12,"tag":21,"props":3419,"children":3420},{},[3421],{"type":25,"value":3422},"The combination of Firebase, Vue.js, and Tailwind CSS brings together a powerful toolset that covers the front-end, back-end, and design aspects of modern web development:",{"type":12,"tag":108,"props":3424,"children":3425},{},[3426,3436,3446,3456],{"type":12,"tag":112,"props":3427,"children":3428},{},[3429,3434],{"type":12,"tag":116,"props":3430,"children":3431},{},[3432],{"type":25,"value":3433},"Scalability and Performance:",{"type":25,"value":3435}," Firebase’s infrastructure scales with your app, ensuring smooth performance, while Vue.js and Tailwind CSS work together to create lightweight, responsive, and SEO-friendly UIs.",{"type":12,"tag":112,"props":3437,"children":3438},{},[3439,3444],{"type":12,"tag":116,"props":3440,"children":3441},{},[3442],{"type":25,"value":3443},"Seamless User Experience:",{"type":25,"value":3445}," Vue.js, with its dynamic UI capabilities, and Firebase’s real-time features enable you to build applications that respond quickly to user interactions, providing an exceptional user experience.",{"type":12,"tag":112,"props":3447,"children":3448},{},[3449,3454],{"type":12,"tag":116,"props":3450,"children":3451},{},[3452],{"type":25,"value":3453},"Speed of Development:",{"type":25,"value":3455}," Tailwind CSS's utility classes and Vue.js’s component-based structure streamline the development process, while Firebase handles backend complexities, allowing you to focus on creating high-quality features.",{"type":12,"tag":112,"props":3457,"children":3458},{},[3459,3464],{"type":12,"tag":116,"props":3460,"children":3461},{},[3462],{"type":25,"value":3463},"SEO-Friendliness:",{"type":25,"value":3465}," With proper implementation (e.g., SSR in Vue.js, global CDN in Firebase, and responsive design in Tailwind), your web application can rank higher in search engines without sacrificing performance.",{"type":12,"tag":605,"props":3467,"children":3468},{"id":550},[3469],{"type":25,"value":553},{"type":12,"tag":21,"props":3471,"children":3472},{},[3473],{"type":25,"value":3474},"By leveraging Firebase for backend services, Vue.js for building dynamic user interfaces, and Tailwind CSS for efficient styling, developers can create modern web applications that are both high-performing and SEO-friendly. This powerful trio offers scalability, responsiveness, and a smooth user experience, allowing you to focus on innovation rather than managing infrastructure. Whether you’re building a small project or a large-scale application, these technologies can elevate your development process and help you stay ahead in the ever-evolving digital landscape.",{"title":5,"searchDepth":35,"depth":35,"links":3476},[3477],{"id":83,"depth":35,"text":86,"children":3478},[3479,3480,3481,3482,3483],{"id":3083,"depth":920,"text":3086},{"id":3212,"depth":920,"text":3215},{"id":3318,"depth":920,"text":3321},{"id":3414,"depth":920,"text":3417},{"id":550,"depth":920,"text":553},"content:articles:building-modern-web-application.md","articles/building-modern-web-application.md","articles/building-modern-web-application",{"_path":3488,"_dir":68,"_draft":6,"_partial":6,"_locale":5,"title":3489,"description":3490,"date":3491,"tags":3492,"image":3496,"readingTime":3497,"body":3498,"_type":37,"_id":3875,"_source":39,"_file":3876,"_stem":3877,"_extension":42},"/articles/how-much-should-photographers-charge","How Much Should Photographers Charge?","Determining photography pricing can be both reasonable and complicated. Here’s a detailed guide to help you navigate the complexities of setting your rates.","05/04/2024",[1846,3493,3494,3495],"Pricing","Business","Freelance","https://portfolio-hughherschell.vercel.app/articles/how-much-should-photographers-charge.png","10",{"type":9,"children":3499,"toc":3861},[3500,3504,3509,3517,3523,3528,3586,3591,3597,3602,3608,3613,3618,3624,3629,3635,3666,3672,3677,3730,3735,3741,3746,3752,3757,3763,3768,3774,3779,3785,3790,3796,3801,3807,3812,3818,3823,3829,3834,3840,3845,3851,3856],{"type":12,"tag":81,"props":3501,"children":3502},{"id":83},[3503],{"type":25,"value":86},{"type":12,"tag":21,"props":3505,"children":3506},{},[3507],{"type":25,"value":3508},"Determining how much photographers should charge is a common yet complex question. Factors such as the type of photography, experience, expenses, and work frequency all play significant roles. Let’s dive into these considerations to help you establish a successful photography pricing strategy.",{"type":12,"tag":21,"props":3510,"children":3511},{},[3512],{"type":12,"tag":96,"props":3513,"children":3516},{"alt":3514,"src":3515},"Preview","/articles/how-much-should-photographers-charge.png",[],{"type":12,"tag":81,"props":3518,"children":3520},{"id":3519},"photography-pricing-for-a-successful-photography-business",[3521],{"type":25,"value":3522},"Photography Pricing for a Successful Photography Business",{"type":12,"tag":21,"props":3524,"children":3525},{},[3526],{"type":25,"value":3527},"In today's digital age, more people are taking pictures with cameras and smartphones, and the market is saturated with professional photography services. Diversifying income sources is crucial for making a living as a professional photographer. Here are some avenues to explore:",{"type":12,"tag":108,"props":3529,"children":3530},{},[3531,3536,3541,3546,3551,3556,3561,3566,3571,3576,3581],{"type":12,"tag":112,"props":3532,"children":3533},{},[3534],{"type":25,"value":3535},"Photoshoots",{"type":12,"tag":112,"props":3537,"children":3538},{},[3539],{"type":25,"value":3540},"Competitions",{"type":12,"tag":112,"props":3542,"children":3543},{},[3544],{"type":25,"value":3545},"Photography lessons",{"type":12,"tag":112,"props":3547,"children":3548},{},[3549],{"type":25,"value":3550},"Framed prints",{"type":12,"tag":112,"props":3552,"children":3553},{},[3554],{"type":25,"value":3555},"Stock photo websites",{"type":12,"tag":112,"props":3557,"children":3558},{},[3559],{"type":25,"value":3560},"Books, eBooks, and articles",{"type":12,"tag":112,"props":3562,"children":3563},{},[3564],{"type":25,"value":3565},"Talks and podcasts",{"type":12,"tag":112,"props":3567,"children":3568},{},[3569],{"type":25,"value":3570},"Affiliate earnings",{"type":12,"tag":112,"props":3572,"children":3573},{},[3574],{"type":25,"value":3575},"Greetings cards",{"type":12,"tag":112,"props":3577,"children":3578},{},[3579],{"type":25,"value":3580},"Wallpapers (for iPhones, iPads, and computers)",{"type":12,"tag":112,"props":3582,"children":3583},{},[3584],{"type":25,"value":3585},"Equipment rentals",{"type":12,"tag":21,"props":3587,"children":3588},{},[3589],{"type":25,"value":3590},"For this guide, we will focus on pricing for photoshoots.",{"type":12,"tag":81,"props":3592,"children":3594},{"id":3593},"photoshoot-pricing-model-for-photographers",[3595],{"type":25,"value":3596},"Photoshoot Pricing Model for Photographers",{"type":12,"tag":21,"props":3598,"children":3599},{},[3600],{"type":25,"value":3601},"Pricing can vary based on location and the type of photography. The first step is to estimate the market rate and your annual operating costs. Then, divide your costs by the weeks you intend to work to determine your weekly profit target. Next, make assumptions about the number and value of jobs you can secure at your chosen rate. This forms the basis of your business plan.",{"type":12,"tag":605,"props":3603,"children":3605},{"id":3604},"how-to-estimate-the-market-rate",[3606],{"type":25,"value":3607},"How to Estimate the Market Rate",{"type":12,"tag":21,"props":3609,"children":3610},{},[3611],{"type":25,"value":3612},"A quick Google search for photographers in your area will yield many results. Look for those offering the same type of service, as each genre has different pricing. For example, search for \"Los Angeles family portrait photographers\" if you specialize in family portraits.",{"type":12,"tag":21,"props":3614,"children":3615},{},[3616],{"type":25,"value":3617},"Many professional photographers do not display their rates online due to varying client needs. However, many share their starting rates, which can give you a baseline.",{"type":12,"tag":605,"props":3619,"children":3621},{"id":3620},"experienced-photographers-can-charge-more",[3622],{"type":25,"value":3623},"Experienced Photographers Can Charge More",{"type":12,"tag":21,"props":3625,"children":3626},{},[3627],{"type":25,"value":3628},"Your experience significantly impacts your rates. A photographer with one year of experience cannot charge the same as someone with ten years. Beginners should set their pricing closer to the lowest rates to attract initial clients and build their portfolio. As you gain experience, you can increase your rates accordingly.",{"type":12,"tag":605,"props":3630,"children":3632},{"id":3631},"useful-websites-to-establish-photography-pricing",[3633],{"type":25,"value":3634},"Useful Websites to Establish Photography Pricing",{"type":12,"tag":21,"props":3636,"children":3637},{},[3638,3640,3647,3649,3656,3657,3664],{"type":25,"value":3639},"If you can't find much information about photographers in your area, consider using paid websites like ",{"type":12,"tag":188,"props":3641,"children":3644},{"href":3642,"rel":3643},"https://www.payscale.com/",[192],[3645],{"type":25,"value":3646},"Payscale",{"type":25,"value":3648}," (which offers one free job pricing). Free recruiting sites such as ",{"type":12,"tag":188,"props":3650,"children":3653},{"href":3651,"rel":3652},"https://www.glassdoor.com/",[192],[3654],{"type":25,"value":3655},"Glassdoor",{"type":25,"value":1112},{"type":12,"tag":188,"props":3658,"children":3661},{"href":3659,"rel":3660},"https://www.indeed.com/?from=gnav-homepage",[192],[3662],{"type":25,"value":3663},"Indeed",{"type":25,"value":3665}," also provide pricing information. Additionally, searching for a \"photography pricing calculator\" can be helpful.",{"type":12,"tag":81,"props":3667,"children":3669},{"id":3668},"how-to-determine-operating-costs",[3670],{"type":25,"value":3671},"How to Determine Operating Costs",{"type":12,"tag":21,"props":3673,"children":3674},{},[3675],{"type":25,"value":3676},"Setting your prices to match competitors isn't enough. Consider your operating costs, both fixed and variable, including:",{"type":12,"tag":108,"props":3678,"children":3679},{},[3680,3685,3690,3695,3700,3705,3710,3715,3720,3725],{"type":12,"tag":112,"props":3681,"children":3682},{},[3683],{"type":25,"value":3684},"Cameras, lenses, and other equipment costs",{"type":12,"tag":112,"props":3686,"children":3687},{},[3688],{"type":25,"value":3689},"Salaries (including your own)",{"type":12,"tag":112,"props":3691,"children":3692},{},[3693],{"type":25,"value":3694},"Monthly rent for your photo studio (or home office if applicable)",{"type":12,"tag":112,"props":3696,"children":3697},{},[3698],{"type":25,"value":3699},"Utilities",{"type":12,"tag":112,"props":3701,"children":3702},{},[3703],{"type":25,"value":3704},"Internet",{"type":12,"tag":112,"props":3706,"children":3707},{},[3708],{"type":25,"value":3709},"Subscriptions for editing software, your website, email hosting, etc.",{"type":12,"tag":112,"props":3711,"children":3712},{},[3713],{"type":25,"value":3714},"Travel expenses",{"type":12,"tag":112,"props":3716,"children":3717},{},[3718],{"type":25,"value":3719},"Advertising costs",{"type":12,"tag":112,"props":3721,"children":3722},{},[3723],{"type":25,"value":3724},"Insurance",{"type":12,"tag":112,"props":3726,"children":3727},{},[3728],{"type":25,"value":3729},"Debt repayments",{"type":12,"tag":21,"props":3731,"children":3732},{},[3733],{"type":25,"value":3734},"Also, consider the time invested in each job, including client communication, location scouting, commuting, and photo editing. Don’t forget to account for taxes, which vary based on your location.",{"type":12,"tag":81,"props":3736,"children":3738},{"id":3737},"how-to-structure-freelance-photography-rates",[3739],{"type":25,"value":3740},"How to Structure Freelance Photography Rates",{"type":12,"tag":21,"props":3742,"children":3743},{},[3744],{"type":25,"value":3745},"Depending on your photography business, there are different ways to structure your pricing. Let’s discuss various photography genres and their typical pricing models.",{"type":12,"tag":1226,"props":3747,"children":3749},{"id":3748},"event-photography-pricing-guide",[3750],{"type":25,"value":3751},"Event Photography Pricing Guide",{"type":12,"tag":21,"props":3753,"children":3754},{},[3755],{"type":25,"value":3756},"Event photographers typically charge hourly. Many require a minimum number of hours for a session. Hourly rates depend on the location and type of event. You can include other fees for special requests from clients.",{"type":12,"tag":1226,"props":3758,"children":3760},{"id":3759},"wedding-photography-pricing-guide",[3761],{"type":25,"value":3762},"Wedding Photography Pricing Guide",{"type":12,"tag":21,"props":3764,"children":3765},{},[3766],{"type":25,"value":3767},"Wedding photography is highly specialized and often includes packages that cover the entire event. Rates depend on the photographer's experience and market demand. Packages often include hours of coverage, a set number of photos, and physical mementos like albums and prints.",{"type":12,"tag":1226,"props":3769,"children":3771},{"id":3770},"portrait-photography-pricing-guide",[3772],{"type":25,"value":3773},"Portrait Photography Pricing Guide",{"type":12,"tag":21,"props":3775,"children":3776},{},[3777],{"type":25,"value":3778},"Portrait photographers offer packages that include session length, the number of people, and a set number of photos. Rates can go up to thousands for corporate portraits.",{"type":12,"tag":1226,"props":3780,"children":3782},{"id":3781},"real-estate-photography-pricing-guide",[3783],{"type":25,"value":3784},"Real Estate Photography Pricing Guide",{"type":12,"tag":21,"props":3786,"children":3787},{},[3788],{"type":25,"value":3789},"Real estate photography is typically priced per listing. The size of the property and the number of photos required affect the pricing. Clients expect quick turnaround times, often within 24 hours.",{"type":12,"tag":1226,"props":3791,"children":3793},{"id":3792},"commercial-photography-pricing-guide",[3794],{"type":25,"value":3795},"Commercial Photography Pricing Guide",{"type":12,"tag":21,"props":3797,"children":3798},{},[3799],{"type":25,"value":3800},"Commercial photographers work for companies and can earn high salaries. Pricing is often based on day rates, with additional licensing fees. Pre-production, photo sessions, and post-production can take weeks or months.",{"type":12,"tag":1226,"props":3802,"children":3804},{"id":3803},"product-or-e-commerce-photography-pricing-guide",[3805],{"type":25,"value":3806},"Product or E-Commerce Photography Pricing Guide",{"type":12,"tag":21,"props":3808,"children":3809},{},[3810],{"type":25,"value":3811},"Product photography is generally priced per image. Factors like setup time, special lighting, and post-processing affect the pricing.",{"type":12,"tag":1226,"props":3813,"children":3815},{"id":3814},"food-photography-pricing-guide",[3816],{"type":25,"value":3817},"Food Photography Pricing Guide",{"type":12,"tag":21,"props":3819,"children":3820},{},[3821],{"type":25,"value":3822},"The work can vary enormously, from simple shots to comprehensive catalogs. Pricing depends on the location, shot list, third-party costs, and expected output format.",{"type":12,"tag":81,"props":3824,"children":3826},{"id":3825},"when-to-reevaluate-your-rates",[3827],{"type":25,"value":3828},"When to Reevaluate Your Rates",{"type":12,"tag":21,"props":3830,"children":3831},{},[3832],{"type":25,"value":3833},"Regularly reevaluate your rates to reflect your level of expertise and quality of work. Early on, consider price hikes every three months. As you become more experienced, you may change your rates annually. Avoid arbitrary increases; calculate your costs and set new rates to sustain your income and allow growth.",{"type":12,"tag":81,"props":3835,"children":3837},{"id":3836},"seek-professional-business-advice",[3838],{"type":25,"value":3839},"Seek Professional Business Advice",{"type":12,"tag":21,"props":3841,"children":3842},{},[3843],{"type":25,"value":3844},"Consider hiring a financial consultant as you gain more clients. Business coaching can also provide valuable insights, especially if you’re just starting. Self-study and learning the ins and outs of your business can be beneficial if you have an entrepreneurial spirit.",{"type":12,"tag":81,"props":3846,"children":3848},{"id":3847},"conclusion-photography-pricing-guide",[3849],{"type":25,"value":3850},"Conclusion: Photography Pricing Guide",{"type":12,"tag":21,"props":3852,"children":3853},{},[3854],{"type":25,"value":3855},"Setting photography pricing can be intimidating, but with experience, you’ll understand how it all works. Do your research, ensure your rates are competitive, and always increase them as your reputation grows. Be transparent with your clients about what they have to pay and what they get for it. This will help you avoid arguments and build trust.",{"type":12,"tag":21,"props":3857,"children":3858},{},[3859],{"type":25,"value":3860},"As creatives, pricing our talents can be challenging, but as photography business owners, our rates must sustain our business and lives. With patience and continuous learning, you can develop a thriving photography business.",{"title":5,"searchDepth":35,"depth":35,"links":3862},[3863,3864,3865,3870,3871,3872,3873,3874],{"id":83,"depth":35,"text":86},{"id":3519,"depth":35,"text":3522},{"id":3593,"depth":35,"text":3596,"children":3866},[3867,3868,3869],{"id":3604,"depth":920,"text":3607},{"id":3620,"depth":920,"text":3623},{"id":3631,"depth":920,"text":3634},{"id":3668,"depth":35,"text":3671},{"id":3737,"depth":35,"text":3740},{"id":3825,"depth":35,"text":3828},{"id":3836,"depth":35,"text":3839},{"id":3847,"depth":35,"text":3850},"content:articles:how-much-should-photographers-charge.md","articles/how-much-should-photographers-charge.md","articles/how-much-should-photographers-charge",{"_path":3879,"_dir":68,"_draft":6,"_partial":6,"_locale":5,"title":3880,"description":3881,"date":3882,"tags":3883,"image":3884,"readingTime":77,"body":3885,"_type":37,"_id":4341,"_source":39,"_file":4342,"_stem":4343,"_extension":42},"/articles/freelance-web-development-process","The Freelance Web Development Process: A Complete Guide","An in-depth look at the stages involved in the freelance web development process, from initial consultation to project closure. Learn how to manage client expectations and avoid common pitfalls.","04/09/2023",[3495,582,74,75,1847,3493],"https://portfolio-hughherschell.vercel.app/articles/freelance-web-development-process.webp",{"type":9,"children":3886,"toc":4321},[3887,3891,3896,3903,3909,3919,3924,3942,3947,3953,3962,3967,3972,4003,4009,4018,4023,4028,4034,4043,4048,4061,4067,4076,4081,4086,4104,4110,4119,4124,4142,4147,4153,4162,4167,4172,4178,4187,4192,4198,4207,4212,4218,4227,4232,4235,4241,4247,4252,4258,4263,4269,4274,4280,4285,4288,4293],{"type":12,"tag":81,"props":3888,"children":3889},{"id":83},[3890],{"type":25,"value":86},{"type":12,"tag":21,"props":3892,"children":3893},{},[3894],{"type":25,"value":3895},"Freelance web development is both rewarding and challenging, with each project offering unique opportunities for learning and growth. A successful project requires more than just coding skills; it demands clear communication, careful planning, and the ability to adapt to changing client needs. In this article, we'll take a detailed look at the key stages of the freelance web development process, providing tips to help you navigate each step efficiently.",{"type":12,"tag":21,"props":3897,"children":3898},{},[3899],{"type":12,"tag":96,"props":3900,"children":3902},{"alt":98,"src":3901},"/articles/freelance-web-development-process.webp",[],{"type":12,"tag":605,"props":3904,"children":3906},{"id":3905},"_1-initial-consultation",[3907],{"type":25,"value":3908},"1. Initial Consultation",{"type":12,"tag":21,"props":3910,"children":3911},{},[3912,3917],{"type":12,"tag":116,"props":3913,"children":3914},{},[3915],{"type":25,"value":3916},"Objective",{"type":25,"value":3918},": Understand the client's needs, goals, and project scope.",{"type":12,"tag":21,"props":3920,"children":3921},{},[3922],{"type":25,"value":3923},"The first step in any freelance project is the initial consultation. This is where you gather as much information as possible about the client's vision for their website. The discussion should cover the project’s objectives, target audience, and desired features. Key questions might include:",{"type":12,"tag":108,"props":3925,"children":3926},{},[3927,3932,3937],{"type":12,"tag":112,"props":3928,"children":3929},{},[3930],{"type":25,"value":3931},"What is the main purpose of the website?",{"type":12,"tag":112,"props":3933,"children":3934},{},[3935],{"type":25,"value":3936},"Are there any specific design elements or technologies the client prefers?",{"type":12,"tag":112,"props":3938,"children":3939},{},[3940],{"type":25,"value":3941},"Does the client already have assets such as logos, brand guidelines, or existing content?",{"type":12,"tag":21,"props":3943,"children":3944},{},[3945],{"type":25,"value":3946},"A consultation questionnaire is a useful tool for structuring this conversation and ensuring you don’t miss any critical details.",{"type":12,"tag":605,"props":3948,"children":3950},{"id":3949},"_2-proposal-and-contract",[3951],{"type":25,"value":3952},"2. Proposal and Contract",{"type":12,"tag":21,"props":3954,"children":3955},{},[3956,3960],{"type":12,"tag":116,"props":3957,"children":3958},{},[3959],{"type":25,"value":3916},{"type":25,"value":3961},": Define the project terms and secure the agreement.",{"type":12,"tag":21,"props":3963,"children":3964},{},[3965],{"type":25,"value":3966},"Once you have a clear understanding of the project, the next step is to create a detailed proposal. This should outline the project scope, timeline, deliverables, and costs. Be sure to include payment terms and any other legal agreements that are relevant.",{"type":12,"tag":21,"props":3968,"children":3969},{},[3970],{"type":25,"value":3971},"Once the proposal is accepted, both you and the client should sign a formal contract. This contract protects both parties by clearly defining expectations, deadlines, and responsibilities.",{"type":12,"tag":108,"props":3973,"children":3974},{},[3975],{"type":12,"tag":112,"props":3976,"children":3977},{},[3978,3980],{"type":25,"value":3979},"Templates:\n",{"type":12,"tag":108,"props":3981,"children":3982},{},[3983,3993],{"type":12,"tag":112,"props":3984,"children":3985},{},[3986],{"type":12,"tag":188,"props":3987,"children":3990},{"href":3988,"rel":3989},"https://docs.google.com/forms/d/e/1FAIpQLSdU4GY4m8jjX-fiNEyiz3eszwoP9yyeiBePtdG8Yjf-257yfA/viewform?usp=sf_link",[192],[3991],{"type":25,"value":3992},"Client Questionnaire",{"type":12,"tag":112,"props":3994,"children":3995},{},[3996],{"type":12,"tag":188,"props":3997,"children":4000},{"href":3998,"rel":3999},"https://docs.google.com/forms/d/e/1FAIpQLSd5kfmUFOonXbXV1Jl25vG2lHiZ42Y7Kux_SqDulU_XFTMBzQ/viewform?usp=sf_link",[192],[4001],{"type":25,"value":4002},"Freelance Web Development Contract",{"type":12,"tag":605,"props":4004,"children":4006},{"id":4005},"_3-research-and-planning",[4007],{"type":25,"value":4008},"3. Research and Planning",{"type":12,"tag":21,"props":4010,"children":4011},{},[4012,4016],{"type":12,"tag":116,"props":4013,"children":4014},{},[4015],{"type":25,"value":3916},{"type":25,"value":4017},": Lay the groundwork for the project.",{"type":12,"tag":21,"props":4019,"children":4020},{},[4021],{"type":25,"value":4022},"Before diving into the design and development phases, it’s essential to conduct research. This might involve analyzing competitors’ websites, industry standards, and current design trends. Use this information to create wireframes or mockups that provide a visual guide for the project layout.",{"type":12,"tag":21,"props":4024,"children":4025},{},[4026],{"type":25,"value":4027},"During this phase, also establish a project timeline with key milestones. This ensures both you and the client have a clear roadmap for the project.",{"type":12,"tag":605,"props":4029,"children":4031},{"id":4030},"_4-design-phase",[4032],{"type":25,"value":4033},"4. Design Phase",{"type":12,"tag":21,"props":4035,"children":4036},{},[4037,4041],{"type":12,"tag":116,"props":4038,"children":4039},{},[4040],{"type":25,"value":3916},{"type":25,"value":4042},": Develop the visual elements of the website.",{"type":12,"tag":21,"props":4044,"children":4045},{},[4046],{"type":25,"value":4047},"In this stage, you create design prototypes based on the wireframes. These prototypes give the client an opportunity to provide feedback before development begins. Iterate through revisions until the client approves the final design.",{"type":12,"tag":108,"props":4049,"children":4050},{},[4051,4056],{"type":12,"tag":112,"props":4052,"children":4053},{},[4054],{"type":25,"value":4055},"Communicate clearly: Present design drafts in a way that allows the client to visualize the final product.",{"type":12,"tag":112,"props":4057,"children":4058},{},[4059],{"type":25,"value":4060},"Be open to feedback: Clients often have revisions, and your ability to adapt will enhance their satisfaction.",{"type":12,"tag":605,"props":4062,"children":4064},{"id":4063},"_5-development-phase",[4065],{"type":25,"value":4066},"5. Development Phase",{"type":12,"tag":21,"props":4068,"children":4069},{},[4070,4074],{"type":12,"tag":116,"props":4071,"children":4072},{},[4073],{"type":25,"value":3916},{"type":25,"value":4075},": Build the website based on the approved designs.",{"type":12,"tag":21,"props":4077,"children":4078},{},[4079],{"type":25,"value":4080},"Once the design is finalized, the development process begins. This is where you set up the necessary tools and environments, such as content management systems (CMS), hosting platforms, and domains.",{"type":12,"tag":21,"props":4082,"children":4083},{},[4084],{"type":25,"value":4085},"Development activities include:",{"type":12,"tag":108,"props":4087,"children":4088},{},[4089,4094,4099],{"type":12,"tag":112,"props":4090,"children":4091},{},[4092],{"type":25,"value":4093},"Coding the front-end and back-end of the website.",{"type":12,"tag":112,"props":4095,"children":4096},{},[4097],{"type":25,"value":4098},"Integrating features like forms, e-commerce capabilities, or APIs.",{"type":12,"tag":112,"props":4100,"children":4101},{},[4102],{"type":25,"value":4103},"Ensuring the site is responsive and works seamlessly on all devices.",{"type":12,"tag":605,"props":4105,"children":4107},{"id":4106},"_6-testing",[4108],{"type":25,"value":4109},"6. Testing",{"type":12,"tag":21,"props":4111,"children":4112},{},[4113,4117],{"type":12,"tag":116,"props":4114,"children":4115},{},[4116],{"type":25,"value":3916},{"type":25,"value":4118},": Ensure the website functions properly and meets quality standards.",{"type":12,"tag":21,"props":4120,"children":4121},{},[4122],{"type":25,"value":4123},"Thorough testing is essential before the site goes live. This includes:",{"type":12,"tag":108,"props":4125,"children":4126},{},[4127,4132,4137],{"type":12,"tag":112,"props":4128,"children":4129},{},[4130],{"type":25,"value":4131},"Testing the website's functionality and usability.",{"type":12,"tag":112,"props":4133,"children":4134},{},[4135],{"type":25,"value":4136},"Checking for browser and device compatibility.",{"type":12,"tag":112,"props":4138,"children":4139},{},[4140],{"type":25,"value":4141},"Identifying and fixing any bugs or glitches.",{"type":12,"tag":21,"props":4143,"children":4144},{},[4145],{"type":25,"value":4146},"The goal here is to ensure a smooth, error-free experience for the end user.",{"type":12,"tag":605,"props":4148,"children":4150},{"id":4149},"_7-client-review",[4151],{"type":25,"value":4152},"7. Client Review",{"type":12,"tag":21,"props":4154,"children":4155},{},[4156,4160],{"type":12,"tag":116,"props":4157,"children":4158},{},[4159],{"type":25,"value":3916},{"type":25,"value":4161},": Get final feedback from the client.",{"type":12,"tag":21,"props":4163,"children":4164},{},[4165],{"type":25,"value":4166},"Once testing is complete, it's time to present the site to the client for review. During this stage, the client may request minor changes or adjustments based on their final expectations.",{"type":12,"tag":21,"props":4168,"children":4169},{},[4170],{"type":25,"value":4171},"Be proactive in seeking detailed feedback to avoid future revisions after the launch.",{"type":12,"tag":605,"props":4173,"children":4175},{"id":4174},"_8-launch",[4176],{"type":25,"value":4177},"8. Launch",{"type":12,"tag":21,"props":4179,"children":4180},{},[4181,4185],{"type":12,"tag":116,"props":4182,"children":4183},{},[4184],{"type":25,"value":3916},{"type":25,"value":4186},": Make the website live for users.",{"type":12,"tag":21,"props":4188,"children":4189},{},[4190],{"type":25,"value":4191},"After incorporating final client feedback, prepare the website for launch. This involves deploying the site to the live server and conducting one final round of testing. Once everything is set, the website is made live for the public.",{"type":12,"tag":605,"props":4193,"children":4195},{"id":4194},"_9-post-launch-support",[4196],{"type":25,"value":4197},"9. Post-Launch Support",{"type":12,"tag":21,"props":4199,"children":4200},{},[4201,4205],{"type":12,"tag":116,"props":4202,"children":4203},{},[4204],{"type":25,"value":3916},{"type":25,"value":4206},": Provide ongoing support and maintenance.",{"type":12,"tag":21,"props":4208,"children":4209},{},[4210],{"type":25,"value":4211},"After the website is live, you’ll likely provide post-launch support to handle any initial issues or bugs. Additionally, you might offer training to the client on how to manage their new site and discuss options for ongoing maintenance or SEO services.",{"type":12,"tag":605,"props":4213,"children":4215},{"id":4214},"_10-project-closure",[4216],{"type":25,"value":4217},"10. Project Closure",{"type":12,"tag":21,"props":4219,"children":4220},{},[4221,4225],{"type":12,"tag":116,"props":4222,"children":4223},{},[4224],{"type":25,"value":3916},{"type":25,"value":4226},": Wrap up the project formally.",{"type":12,"tag":21,"props":4228,"children":4229},{},[4230],{"type":25,"value":4231},"At the end of the project, it’s important to hand over all project files and documentation. This might include design assets, code repositories, and training materials. Finalize any outstanding payments and ask the client for feedback or a testimonial, which can help you secure future work.",{"type":12,"tag":1217,"props":4233,"children":4234},{},[],{"type":12,"tag":81,"props":4236,"children":4238},{"id":4237},"lessons-learned",[4239],{"type":25,"value":4240},"Lessons Learned",{"type":12,"tag":605,"props":4242,"children":4244},{"id":4243},"ask-questions-lots-of-them",[4245],{"type":25,"value":4246},"Ask Questions — Lots of Them",{"type":12,"tag":21,"props":4248,"children":4249},{},[4250],{"type":25,"value":4251},"The success of a project often hinges on asking the right questions early on. A comprehensive consultation questionnaire helps ensure you have all the necessary information before you begin.",{"type":12,"tag":605,"props":4253,"children":4255},{"id":4254},"set-clear-expectations",[4256],{"type":25,"value":4257},"Set Clear Expectations",{"type":12,"tag":21,"props":4259,"children":4260},{},[4261],{"type":25,"value":4262},"Clients appreciate clear communication, especially around deadlines and feedback. Set expectations early about how often you’ll provide updates and when you’ll need their input.",{"type":12,"tag":605,"props":4264,"children":4266},{"id":4265},"get-what-you-need-upfront",[4267],{"type":25,"value":4268},"Get What You Need Upfront",{"type":12,"tag":21,"props":4270,"children":4271},{},[4272],{"type":25,"value":4273},"Content delays are one of the most common roadblocks in web development. Ensure you have all the necessary content and login details at the start to avoid frustrating delays later.",{"type":12,"tag":605,"props":4275,"children":4277},{"id":4276},"dont-hide-your-limitations",[4278],{"type":25,"value":4279},"Don’t Hide Your Limitations",{"type":12,"tag":21,"props":4281,"children":4282},{},[4283],{"type":25,"value":4284},"Clients will respect your honesty if you acknowledge your areas of expertise and limitations. Over-promising can lead to future headaches, so it’s best to be upfront about your skills and capabilities.",{"type":12,"tag":1217,"props":4286,"children":4287},{},[],{"type":12,"tag":21,"props":4289,"children":4290},{},[4291],{"type":25,"value":4292},"By following these steps and staying focused on clear communication, you can ensure a smooth and successful freelance web development project every time.",{"type":12,"tag":108,"props":4294,"children":4295},{},[4296],{"type":12,"tag":112,"props":4297,"children":4298},{},[4299,4300],{"type":25,"value":3979},{"type":12,"tag":108,"props":4301,"children":4302},{},[4303,4312],{"type":12,"tag":112,"props":4304,"children":4305},{},[4306],{"type":12,"tag":188,"props":4307,"children":4309},{"href":3988,"rel":4308},[192],[4310],{"type":25,"value":4311},"Project Proposal",{"type":12,"tag":112,"props":4313,"children":4314},{},[4315],{"type":12,"tag":188,"props":4316,"children":4318},{"href":3998,"rel":4317},[192],[4319],{"type":25,"value":4320},"Weekly Progress Update",{"title":5,"searchDepth":35,"depth":35,"links":4322},[4323,4335],{"id":83,"depth":35,"text":86,"children":4324},[4325,4326,4327,4328,4329,4330,4331,4332,4333,4334],{"id":3905,"depth":920,"text":3908},{"id":3949,"depth":920,"text":3952},{"id":4005,"depth":920,"text":4008},{"id":4030,"depth":920,"text":4033},{"id":4063,"depth":920,"text":4066},{"id":4106,"depth":920,"text":4109},{"id":4149,"depth":920,"text":4152},{"id":4174,"depth":920,"text":4177},{"id":4194,"depth":920,"text":4197},{"id":4214,"depth":920,"text":4217},{"id":4237,"depth":35,"text":4240,"children":4336},[4337,4338,4339,4340],{"id":4243,"depth":920,"text":4246},{"id":4254,"depth":920,"text":4257},{"id":4265,"depth":920,"text":4268},{"id":4276,"depth":920,"text":4279},"content:articles:freelance-web-development-process.md","articles/freelance-web-development-process.md","articles/freelance-web-development-process",1731090034372]