L'episodi on el teu navegador es converteix en un company de programació
Alguna vegada has intentat recordar la diferència entre tabulacions i espais mentre també recordes on has deixat la teva pròpia cordura? Així és com se sent aprendre a programar, especialment quan saltes entre un editor de codi, documents, Stack Overflow i aquell tutorial de YouTube on l'àudio sona com si s'hagués gravat en un túnel de vent.
Aquí tens el gir argumental: pots utilitzar Claude Code al teu navegador i evitar el caos. Sense instal·lacions complicades. Sense ioga de terminal. Només tu, una pestanya i un programador de parelles d'IA que no jutja els teus punts i comes. Tant si ets un principiant total com un nen prodigi de "Vaig fer un lloc de GeoCities una vegada", aquesta guia et mostra com utilitzar Claude Code al navegador, pas a pas, amb exemples del món real, fragments de copiar i enganxar i algunes proteccions perquè no converteixis el teu CSS en art abstracte.
Avís abans de submergir-nos: aquesta és una guia per a principiants. Mantindré l'argot a un rugit sord i els passos evidents. Del tipus "fes clic al botó gran", obvi.
Què és Claude Code (i per què al teu navegador li encanta)
Claude Code és un vessant d'Anthropic's Claude AI centrat en la programació. Pensa-hi com el company de laboratori tranquil que llegeix la tasca i després escriu silenciosament el codi més net que has vist mai. Pot:
- Generar codi a partir de suggeriments en llenguatge natural
- Explicar el codi com un tutor pacient
- Depurar errors sense posar els ulls en blanc
- Refactoritzar i optimitzar el teu desgavell (amb afecte)
- Ajudar amb frameworks, API i estructura de projecte
I la millor part? Pots executar-lo al teu navegador. Sense configuració local. Sense drama d'IDE. És com tenir el cosí amigable de VS Code passant l'estona en una pestanya.
És això un manual d'instruccions, un tutorial o un truc de màgia?
Resposta curta: tutorial d'instruccions. La teva intenció crida "mostra'm els botons". Configurarem Claude Code al navegador i, a continuació, repassarem tasques reals per a principiants: construir una petita pàgina web, depurar un error i demanar a Claude que actuï com a tutor, no com un oracle críptic.
Pas 1: Tria el teu camp de joc del navegador per a Claude Code
Hi ha diverses maneres d'utilitzar Claude Code al navegador. Tria l'ambient que s'adapti al teu flux de treball:
- Claude al web: Utilitza l'aplicació web de Claude i, a continuació, xateja utilitzant suggeriments i fitxers de codificació. Fàcil rampa d'entrada, ideal per a principiants.
- Claude en IDE basats en web: Utilitza entorns com Replit, Codesandbox o GitHub Codespaces i porta Claude amb tu mitjançant extensions, barres laterals de xat o crides a l'API.
- Quaderns de codi al navegador: Quaderns Jupyter al núvol o Observable on pots demanar codi a Claude i després executar-lo allà mateix.
Si tot just estàs començant, comença amb l'aplicació web de Claude i un editor de codi basat en navegador com Replit. Tindràs el xat en una pestanya i el codi a l'altra. Mínim estrès, màxim aprenentatge.
Pas 2: Configura la teva primera sessió de Claude Code
Aquí tens la configuració de zero a la primera victòria:
- Obre Claude al teu navegador. Inicia sessió. Respira.
- Inicia un nou xat. Dona-li un objectiu clar: "Ets el meu assistent de codificació. Sóc un principiant. Vull construir una pàgina de destinació senzilla amb HTML/CSS i una mica de JavaScript."
- Crea una carpeta localment o utilitza un IDE de navegador com Replit. Posa-li un nom que no odiaràs més tard.
- Digues a Claude quins fitxers vols crear: index.html, styles.css, script.js.
- Enganxa els seus suggeriments de codi al teu editor i prem Executar/Previsualitzar.
Això és tot. Ets oficialment una persona que codifica al navegador amb Claude.
Pas 3: Parla amb Claude com un humà (a qui li agraden els detalls)
Claude Code prospera amb el context. Imagina que estàs demanant un cafè. No diguis "cafè", digues "latte gelat, una bomba de vainilla, sense jutjar". El mateix amb els suggeriments.
Prova aquesta estructura:
- Rol: "Ets el meu tutor de codificació."
- Objectiu: "Ajuda'm a construir una pàgina de destinació adaptable senzilla."
- Restriccions: "Sense frameworks CSS. Que sigui llegible."
- Fitxers: "index.html, styles.css, script.js"
- Format de sortida: "Proporcioneu blocs de codi per a cada fitxer i una explicació ràpida."
Suggeriment d'exemple:
"Ets el meu tutor de codificació. Sóc un principiant. Crea una pàgina de destinació adaptable mínima amb index.html, styles.css i script.js. Utilitza HTML semàntic i un disseny mobile-first. Afegeix una capçalera enganxosa i un botó CTA que activi un modal. Inclou comentaris al codi i explica les parts clau en termes senzills."
Claude retornarà codi ordenat més explicacions que no et faran voler fugir.
Pas 4: El teu primer mini projecte: una petita pàgina de destinació
Així és com es veu un flux típic de Claude Code per a un lloc petit.
- Tu: "Genera index.html, styles.css i script.js per a una pàgina de destinació de producte senzilla. Mantén les fonts per defecte del sistema. Afegeix una secció de presentació, una graella de característiques i un peu de pàgina."
- Claude: Lliura tres fitxers amb comentaris i estil adaptable.
- Tu: Enganxa al teu editor. Previsualitza. Ajusta.
- Tu (després de la previsualització): "El text de presentació s'embolica de manera estranya a la mida de l'iPhone SE. Fes que l'escala de la tipografia sigui millor i redueix el farciment de la presentació per sota de 360 px d'ample."
- Claude: Ajusta el CSS amb una consulta de mitjans.
Bonificació: demana ajuda per a l'accessibilitat. "Afegeix text alternatiu adequat, etiquetes ARIA per al modal i assegura't que la navegació amb el teclat funcioni."
Normalment, Claude farà el correcte, incloent-hi les trampes d'enfocament de les pestanyes i el comportament d'Escapament per tancar. És com tenir una consciència d'accessibilitat en plantilla.
Pas 5: Depuració amb Claude (és a dir, la prova d'amistat)
Quan alguna cosa es trenca, i alguna cosa ho farà, Claude Code pot fer de detectiu.
- Enganxa l'error: "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') in script.js line 12."
- Afegeix context: "El botó amb id 'openModal' existeix a index.html, però l'error s'activa en la càrrega."
- Demana la causa arrel + solució: "Per què està passant això i com ho soluciono sense moure l'etiqueta script?"
Probablement, Claude suggerirà esperar DOMContentLoaded o comprovar el teu selector. Llavors, et donarà un fragment de codi que realment funciona.
Consell professional: en cas de dubte, demana un pla de depuració pas a pas. "Enumera els passos per reproduir, els controls de registre i una prova mínima."
Pas 6: Fes de Claude el teu traductor de codi
No entens què està fent una funció? Pregunta així:
"Explica aquesta funció línia per línia com si fos nou a JavaScript. Després resumeix-ho en una frase. També suggereix una optimització i un cas de prova."
Enganxa la teva funció. Obtindràs una explicació que es llegeix com un entrenador pacient en lloc d'un llibre de text escrit el 1997.
Pas 7: Refactorització sense llàgrimes
El teu codi funciona, però sembla un calaix de trastos? Claude pot ordenar-lo.
- Demana micro-refactoritzacions: "Fes que els noms de les variables siguin més clars i divideix aquesta funció de 50 línies en funcions més petites."
- Demana patrons: "Refactoritza a un patró publicador-subscriptor senzill perquè pugui afegir més característiques més tard."
- Demana rendiment: "Redueix els refluxos del DOM i utilitza la delegació d'esdeveniments on tingui sentit."
La clau: llegeix el diff. No copiis i enganxis a cegues. Assegura't que el comportament segueix sent el mateix. Tu ets el redactor en cap de la teva base de codi, fins i tot si el personal és un robot molt educat.
Pas 8: Control de versions, la manera per a principiants
Si estàs en un IDE de navegador, és probable que tinguis Git integrat. Utilitza Claude per generar missatges de confirmació útils:
"Aquí teniu els fitxers modificats i les meves notes. Escriu missatges de confirmació concisos i convencionals amb descripcions breus i una llista de context."
Obtindràs alguna cosa com:
- feat: add responsive hero section
- fix: prevent modal focus from escaping overlay
- chore: tidy CSS variables and comments
És com un petit rastre de molles de pa per a tu mateix del futur.
Pas 9: Demana a Claude que sigui un gestor de projectes (només una mica)
Quan no sàpigues què construir a continuació, demana a Claude un full de ruta:
"Donada aquesta pàgina de destinació senzilla, proposa un pla d'aprenentatge d'una setmana. Cada dia hauria d'incloure un nou concepte, una tasca de codi i una pregunta de reflexió. Que sigui fàcil per a principiants."
Obtindràs un pla que no requereix un any sabàtic. També et sentiràs estranyament realitzat, la qual cosa és una bona bonificació.
Pràctic: un flux real per a principiants que pots copiar
Construïm una petita aplicació: una llista de tasques pendents amb filtre. Clàssic. Aprendràs conceptes bàsics de DOM, esdeveniments i una mica de gestió d'estat.
Suggeriment:
"Genera index.html, styles.css i script.js per a una aplicació de llista de tasques pendents per a principiants. Característiques: afegir, marcar com a completat, suprimir, filtrar per tots/actius/completats. Persistir a localStorage. Mantén el JS per sota de 120 línies i afegeix comentaris. Inclou accessibilitat: suport de teclat i etiquetes adequades."
El que obtindràs:
- index.html amb un formulari, una llista i botons de filtre
- styles.css amb un disseny net i estats d'enfocament
- script.js amb funcions per representar la llista, alternar elements i sincronitzar amb localStorage
A continuació, itera:
- "Afegeix un quadre de diàleg de confirmació abans de suprimir, però permet la derivació amb Majús+Suprimir."
- "Refactoritza la gestió d'estat en una funció reductora senzilla."
- "Crea una petita prova unitària utilitzant un corredor de proves mínim en JS pla."
No només estàs copiant codi; estàs construint memòria muscular, clic a clic.
Com mantenir Claude Code en el camí correcte (és a dir, proteccions de suggeriments)
Claude és bo, però no és psíquic. Aquí teniu com mantenir les coses ordenades:
- Estableix restriccions per endavant: llenguatge, versió, noms de fitxer, límits de recompte de línies, límits de dependència.
- Demana explicacions després del codi: breus, amb vinyetes, en anglès senzill.
- Sol·licita passos provables: "Proporcioneu un pla de proves manual amb 5 passos."
- Fixa el context: recorda-li què estàs construint cada poques iteracions.
- Utilitza "regenera només el CSS" o "només actualitza la lògica modal" per evitar perdre bones parts.
Errors comuns per a principiants (i la solució de Claude)
- La barreja de copiar i enganxar: enganxes codi al fitxer incorrecte o al lloc incorrecte. Solució: demana a Claude que mostri un arbre de fitxers final amb contingut exacte.
- Sobrecomplicació: demanes React, Tailwind i una perdiu en un perer. Solució: comença amb HTML/CSS/JS vanilla, després gradua't.
- Errors silenciosos: no obris la consola de desenvolupador. Solució: demana a Claude que enumeri els errors de consola probables i com detectar-los.
- Whack-a-mole d'estil: el CSS funciona a la previsualització d'escriptori, es trenca al mòbil. Solució: demana a Claude consultes de mitjans mobile-first i una petita matriu de proves de dispositiu.
Claude Code vs. Les teves altres opcions (perquè hi ha eleccions)
- ChatGPT o Gemini: També són forts per al codi. Si ja vius en una d'aquestes pestanyes, prova una estructura de suggeriment similar i compara les sortides. Tria la que les explicacions facin clic amb el teu cervell.
- VS Code amb extensions d'IA: Ideal quan estàs preparat per instal·lar eines i vols suggeriments en línia. Menys amigable per a principiants el primer dia.
- IDE de navegador amb IA integrada: Pràctic, però de vegades se sent com llogar una cuina que no pots reorganitzar.
L'avantatge de Claude per a principiants: explicacions clares, estructura forta i maneres de capçalera d'error molt educades.
Codificació només amb navegador: consells de seguretat i seny
- No executis scripts aleatoris que no entenguis. Demana a Claude que expliqui què fa cada bloc abans de prémer Executar.
- Mantén els teus fitxers petits i freqüents. Xats més curts, diferències més petites, menys llàgrimes.
- Desa versions. Si el teu navegador té singlot, la teva obra mestra no hauria de desaparèixer com un missatge de Snapchat.
- Marca un camp de joc (Replit/Codesandbox) i mantén Claude obert en una pestanya veïna. Tango de dues pestanyes.
Com aprendre més ràpid amb Claude Code
- Converteix les explicacions en targetes flash. Pregunta: "Resumeix les idees clau en cinc targetes de preguntes i respostes."
- Sol·licita analogies. "Explica les bombolles d'esdeveniments com una onada d'estadi."
- Dificultat de capa. "Ara fes que l'aplicació de tasques pendents es pugui ordenar mitjançant arrossegar i deixar anar. Mantén els comentaris."
- Mètode d'ensenyament. "T'explicaré aquest codi; corregeix-me on m'equivoqui."
Sí, pots fer que una IA et qualifiqui. Vibracions d'un professor molt pacient que mai necessita cafè.
Quan canviar de navegador a eines locals
El teu navegador és genial fins que necessites:
- Paquets de Node amb compilacions natives
- CLI de frameworks (React, Next.js, SvelteKit) amb servidors de desenvolupament locals
- Projectes grans amb diversos mòduls
Demana a Claude un pla de migració: "Mou aquest projecte de l'IDE del navegador al desenvolupament local. Dona'm els passos d'instal·lació exactes per a macOS/Windows i els problemes comuns."
Val la pena assenyalar: un company útil mentre aprens
Si estàs saltant entre codi, documents i decisions, un assistent de la barra lateral pot ser la diferència entre "Crec que ho tinc" i "per què no funciona res". Val la pena assenyalar: Sider.AI et permet treure un assistent d'IA just al costat del teu navegador. Pots fer preguntes sobre la pàgina en què et trobes, comparar suggeriments de codi i mantenir la teva investigació en un sol lloc en lloc de catorze pestanyes i una oració. És com donar-li un cervell al teu navegador, sense fer-te gestionar una altra amanida de finestres. Receptes ràpides: suggeriments que pots robar avui
- Explica el meu error: "Estic rebent 'CORS policy: No 'Access-Control-Allow-Origin' header' quan recupero aquesta API. Explica què significa això i dona dues solucions per a principiants: una per a proves locals, una per a producció."
- Genera un component: "Crea un component de targeta adaptable amb imatge, títol, descripció i botó. Proporcioneu HTML, variables CSS i JS lleuger per a efectes de sobrevol. Mantén el CSS per sota de 80 línies."
- Afegeix proves: "Escriu tres proves unitàries en JavaScript pla per a aquesta funció. Sense frameworks. Utilitza una funció assert mínima i mostra la sortida d'exemple."
- Documenta-ho: "Genera un README.md amb els passos de configuració, les característiques i una secció de prova de 5 minuts."
Copia. Enganxa. Sembla brillant.
Resolució de problemes: quan Claude es torna estrany
- Respostes vagues: el teu suggeriment era vague. Afegeix noms de fitxer, objectius i restriccions.
- API al·lucinades: demana enllaços a documents oficials o digues "utilitza només API DOM estàndard".
- Codi incomplet: demana "contingut complet del fitxer" embolicat en blocs de codi separats.
- Deriva: recorda-li l'objectiu original cada 5-7 missatges.
En cas de dubte, restableix el xat amb un resum nítid de què estàs construint i on t'has quedat encallat.
Un sprint de dia 1 per a principiants (60-90 minuts)
- 10 min: configura Claude al navegador, obre un editor de camp de joc.
- 20 min: construeix la petita pàgina de destinació. Previsualitza a l'escriptori i al mòbil.
- 15 min: afegeix un modal i accessibilitat de teclat.
- 10 min: crea proves bàsiques (assertions manuals o JS petites).
- 15 min: escriu un README amb l'ajuda de Claude.
- 10 min: reflexiona: què has après? Què encara et confon? Fes aquestes preguntes directament a Claude.
Acabaràs amb un projecte real i compartible. Pot ser que no guanyi un premi de disseny, però es carregarà, funcionarà i t'ensenyarà coses.
El que no sabies que necessitaves
- Claude Code al navegador és la rampa d'entrada més fàcil a la codificació: sense instal·lacions, només suggeriments i previsualitzacions.
- Sigues específic: objectius, fitxers, restriccions. A Claude li encanta una bona llista de verificació.
- Construeix petit, itera ràpid i mantén la teva consola oberta.
- Utilitza'l com a professor, no només com una màquina expenedora de codi. Pregunta per què, no només què.
- Quan superis el navegador, Claude pot planificar el teu moviment a les eines locals.
Aprendre a codificar no consisteix a memoritzar totes les API. Es tracta de sentir-se còmode fent bones preguntes i tocant els resultats. Amb Claude en una pestanya i el teu editor a l'altra, enviaràs la teva primera petita aplicació més ràpid del que pots dir "espera, quin braç tanca això de nou?"
Ara vés a obrir una pestanya. El teu futur jo codificador està esperant, i tenen menys malsons relacionats amb el punt i coma.
FAQ
Q1:Què és Claude Code i com funciona al navegador?
Claude Code és el mode de Claude centrat en la codificació que genera, explica i depura codi a partir de suggeriments en llenguatge natural. Al navegador, xategeu amb ell, enganxeu codi i copieu els resultats en un IDE web o finestra de previsualització: sense instal·lacions, només pestanyes i comentaris instantanis per a principiants.
Q2:Necessito instal·lar alguna cosa per utilitzar Claude Code?
No. Obre l'aplicació web de Claude i un editor basat en navegador com Replit o Codesandbox. Pots crear fitxers, executar codi i iterar, tot des del teu navegador, perfecte per a un flux de treball de guia per a principiants.
Q3:Pot Claude Code ajudar-me a depurar errors que no entenc?
Sí, i sense judici. Enganxa el teu missatge d'error, els fragments de fitxer rellevants i què esperaves que passés. Claude suggerirà causes probables, solucions i fins i tot un pla de depuració pas a pas que pots seguir al teu navegador.
Q4:Com d'específics haurien de ser els meus suggeriments per a Claude Code?
Específic és màgia. Inclou el teu objectiu, els noms de fitxer, les restriccions (com "JS vanilla") i el format de sortida que vols. Obtindràs codi més net, explicacions més clares i menys moments de "espera, què acaba de passar".
Q5:Hi ha una eina que mantingui l'ajuda de la IA al costat de les meves pestanyes del navegador?
Val la pena assenyalar: Sider.AI et permet acoblar un assistent al costat de les teves pàgines perquè puguis comparar suggeriments de codi, resumir documents i evitar el caos de quinze pestanyes. Es combina bé amb Claude Code per a un flux de treball més fluid per a principiants. 
