Amb el desenvolupament de tants llenguatges de programació, estil i etiquetatge, l’aprenentatge del disseny web es fa més complicat que mai. Afortunadament, hi ha un munt d’eines disponibles per ajudar-vos a començar. Cerqueu alguns recursos bàsics, com ara tutorials en línia o un llibre actualitzat sobre disseny web. Quan estigueu a punt per començar, domineu els conceptes bàsics d’HTML i CSS. Aleshores podeu començar a explorar idiomes de disseny web més avançats, com JavaScript.
Passos
Mètode 1 de 4: trobar recursos de disseny web
Pas 1. Consulteu en línia si hi ha cursos i tutorials de disseny web
Internet està ple d’informació detallada sobre el disseny de pàgines web i molta d’ella està disponible de forma gratuïta. Podeu començar fent cursos en línia gratuïts sobre Udemy o CodeCademy o unint-vos a una comunitat de codificació com freeCodeCamp. També podeu trobar tutorials de vídeo sobre disseny web a YouTube.
- Si sabeu exactament el que esteu cercant, proveu de fer una cerca amb termes específics (per exemple, "selectors de classes al tutorial CSS").
- Si sou un principiant sense experiència en disseny web, comenceu per conèixer els conceptes bàsics de codificació en HTML i CSS.
Pas 2. Consulteu la possibilitat de fer una classe en una universitat o universitat local
Si assistiu a una universitat o universitat, consulteu el departament d’informàtica de la vostra escola o consulteu el catàleg del vostre curs per saber si hi ha cursos de disseny web disponibles. Si no esteu a l’escola, comproveu si hi ha col·legis o universitats properes que ofereixen classes de formació contínua en disseny web.
Algunes universitats ofereixen classes de disseny web en línia obertes a tothom que vulgui inscriure's. Consulteu llocs web com Coursera.org per trobar classes de disseny web gratuïtes o assequibles impartides per instructors universitaris
Pas 3. Obteniu alguns llibres de disseny web de la llibreria o biblioteca
Un bon llibre sobre disseny web pot ser una referència inestimable a mesura que apreneu i apliqueu el vostre ofici. Cerqueu llibres actualitzats sobre disseny web general o formats i idiomes específics de codificació que vulgueu aprendre.
Llegir revistes i articles de blocs sobre disseny web també és una bona manera d’aprendre noves tècniques, inspirar-se i estar al dia de les últimes tendències
Pas 4. Descarregueu o adquiriu programari de disseny web
Un bon programari de disseny web us pot ajudar a crear llocs web de manera més eficaç i eficaç, i també és ideal per ajudar-vos a aprendre els aspectes i aspectes de l'aplicació de codificació, seqüències de comandaments i altres elements clau del disseny. Podeu beneficiar-vos d’utilitzar eines com:
- Programes de disseny gràfic, com ara Adobe Photoshop, GIMP o Sketch.
- Eines de creació de llocs web, com ara WordPress, Chrome DevTools o Adobe Dreamweaver.
- Programari FTP per transferir els fitxers acabats al servidor.
Pas 5. Cerqueu algunes plantilles de llocs web amb les que jugar a mesura que comenceu
No hi ha res dolent en l’ús de plantilles a mesura que apreneu els conceptes bàsics del disseny web. Cerqueu les plantilles de pàgines web que vulgueu i mireu de prop el codi per fer-vos una idea de com va dissenyar la pàgina el dissenyador. També podeu experimentar canviant el codi i afegint els vostres propis elements a la plantilla.
Cerqueu plantilles de lloc web gratuïtes per començar o experimenteu amb plantilles que inclouen el vostre programari de disseny web
Mètode 2 de 4: domini de l'HTML
Pas 1. Familiaritzeu-vos amb les etiquetes HTML bàsiques
HTML és un llenguatge de marques simple que s’utilitza per donar format als elements bàsics d’un lloc web. Podeu formatar diferents elements del vostre lloc web mitjançant etiquetes. Les etiquetes apareixen entre claudàtors abans i després de cada element i proporcionen instruccions sobre com funcionarà aquest element a la pàgina. Per tancar l'etiqueta, poseu un / davant de l'etiqueta final dins dels claudàtors inclinats.
- Per exemple, si voleu que hi hagi algun text atrevit, envoltaríeu l'element amb l'etiqueta, així: Aquest text és en negreta.
- Algunes etiquetes habituals inclouen (paràgraf), (ancoratge, que defineix el text enllaçat) i (tipus de lletra, que pot ajudar a definir diversos atributs del text, com ara la mida i el color).
- Altres etiquetes defineixen les diferents parts del document HTML. Per exemple, s'utilitza per contenir informació sobre la pàgina que no serà visible per al visor, com ara paraules clau o una descripció de la pàgina que apareixerà als resultats del motor de cerca.
Pas 2. Apreneu a utilitzar els atributs de les etiquetes
Algunes etiquetes necessiten informació addicional per especificar com haurien de funcionar. Aquesta informació addicional apareix a l'etiqueta d'obertura i s'anomena "atribut". El nom de l'atribut apareix immediatament després del nom de l'etiqueta, separat per un espai. El valor de l'atribut s'adjunta al nom de l'atribut mitjançant un signe = i està envoltat de cometes.
- Per exemple, si voleu fer part del text en vermell, podeu fer-ho mitjançant l'etiqueta i un atribut de color de tipus de lletra adequat, com ara: Aquest text és vermell.
- Molts dels efectes que abans s’aconseguien rutinàriament amb atributs d’etiquetes HTML, com ara establir colors de tipus de lletra diferents, ara es fan normalment amb codificació CSS.
Pas 3. Experimenteu amb elements imbricats
HTML també us permet col·locar elements dins d'altres elements per tal de crear un format més complex. Per exemple, si voleu definir un paràgraf i posar en cursiva part del text del paràgraf, podeu fer-ho així:
M'encanta codificar!
Pas 4. Conegueu els elements buits
Alguns elements en HTML no necessiten obrir ni tancar etiquetes. Per exemple, si esteu inserint una imatge, només necessiteu una única etiqueta "img" que contingui el nom de l'etiqueta i qualsevol altre atribut necessari (com ara el nom del fitxer d'imatge i qualsevol text alternatiu que vulgueu afegir a efectes d'accessibilitat). Per exemple:
Pas 5. Exploreu el disseny bàsic d'un document HTML
Per tal que el vostre lloc web basat en HTML funcioni correctament, haureu de saber com donar format a tota la pàgina. Això implica definir on comença i finalitza el vostre codi html, així com utilitzar etiquetes per determinar quines parts del codi es mostraran i quines hi ha per proporcionar informació de fons oculta. Per exemple:
- Utilitzeu l'etiqueta per definir la vostra pàgina com a document HTML.
- A continuació, incloeu tota la pàgina dins de les etiquetes per definir on comença i quan finalitza el vostre codi.
- Col·loqueu a les etiquetes tota la informació que no es mostri al lector, com ara el títol de la pàgina, les paraules clau i la descripció de la pàgina.
- Definiu el cos de la pàgina (és a dir, qualsevol text i imatges que vulgueu que vegi el visor) amb les etiquetes.
Mètode 3 de 4: familiaritzar-se amb CSS
Pas 1. Utilitzeu CSS per aplicar estils als vostres documents HTML
CSS és un llenguatge de fulls d’estil que us permet aplicar diferents elements d’estil i disseny a la vostra pàgina web. Per exemple, si voleu aplicar selectivament un tipus de lletra o un color de text específics a alguns dels elements de text de la vostra pàgina, podeu crear un fitxer CSS per fer-ho. A continuació, podeu inserir el fitxer CSS al vostre document HTML allà on vulgueu.
-
Per exemple, si voleu que un fitxer CSS converteixi en verd tots els elements del paràgraf del vostre document HTML, podeu crear un fitxer.css que contingui les línies:
- p {
- color: verd;
- }
- Aleshores desaríeu el fitxer amb un nom com style.css.
- Per aplicar el full d'estil al vostre document HTML, l'inseríeu com a element d'enllaç buit a les etiquetes. Per exemple:
Pas 2. Conegueu els elements d'un conjunt de regles CSS
Un fragment individual de codi CSS s'anomena "conjunt de regles". El conjunt de regles conté els diferents elements que defineixen el que voleu que faci el vostre codi. Això inclou:
- El selector, que defineix l'element HTML que voleu dissenyar. Per exemple, si voleu que el vostre conjunt de regles afecti els elements del paràgraf, començareu el vostre conjunt de regles amb la lletra "p".
- La declaració, que defineix les propietats que voleu estilitzar (com ara el color de la lletra). La declaració es troba entre claudàtors {}.
- La propietat, que especifica quina propietat de l'element HTML voleu estilitzar. Per exemple, dins de l’etiqueta, podeu especificar que voleu donar estil al color del text.
- El valor de la propietat defineix específicament com voleu canviar la propietat (per exemple, si la propietat és de color de lletra, el valor de la propietat seria "verd").
- Podeu modificar diverses propietats diferents en una sola declaració.
Pas 3. Apliqueu CSS al text per fer que la vostra composició sembli agradable
CSS és útil per aplicar diversos efectes al text sense haver de codificar individualment cada propietat en HTML. Experimenteu amb el canvi de diferents propietats de composició de tipus a CSS, inclosos:
- Color de la lletra
- Mida de la font
- Família de tipus de lletra (per exemple, l'interval de tipus de lletra que voleu utilitzar al text)
- Alineació de text
- Alçada de la línia
- Espai entre lletres
Pas 4. Experimenteu amb quadres i altres eines de disseny CSS
CSS també és útil per afegir elements visuals atractius a la vostra pàgina, com ara quadres de text i taules. A més, podeu utilitzar-lo per canviar el disseny general de la pàgina i definir on es posicionen els diferents elements els uns amb els altres.
Per exemple, podeu definir atributs com l'amplada i el color de fons d'un element, afegir una vora o establir marges que generin espai entre els diversos elements de la vostra pàgina
Mètode 4 de 4: Treballar amb altres llenguatges de disseny
Pas 1. Apreneu JavaScript si voleu afegir elements interactius a les vostres pàgines
JavaScript és un llenguatge fantàstic per aprendre si voleu afegir funcions més avançades als vostres llocs web, com ara animacions i finestres emergents. Feu un curs o cerqueu tutorials en línia sobre com codificar en JavaScript i incorporar aquests elements codificats a les vostres pàgines web | mitjançant HTML.
Abans que us pugueu sentir còmodes amb JavaScript, haureu de familiaritzar-vos amb els conceptes bàsics de la creació de pàgines en HTML i CSS
Pas 2. Familiaritzeu-vos amb jQuery per facilitar la codificació JavaScript
jQuery és una biblioteca JavaScript que pot simplificar la programació Java permetent-vos accedir a diversos elements JavaScript codificats prèviament. jQuery és una gran eina si ja esteu familiaritzat amb els fonaments de la codificació JavaScript.
Podeu accedir a la biblioteca jQuery i a molts altres recursos valuosos a través de jQuery.org, el lloc web de la Fundació jQuery
Pas 3. Estudieu els idiomes del servidor si esteu interessats en el desenvolupament de back-end
Tot i que HTML, CSS i JavaScript són ideals per a dissenyadors de webs centrats en allò que l'usuari veu i fa al lloc web, els llenguatges del servidor són útils si esteu més interessats en el treball entre bastidors. Si voleu aprendre sobre el desenvolupament del back-end, concentreu-vos en l’aprenentatge d’idiomes com Python, PHP i Ruby on Rails.
Aquests idiomes són útils per gestionar i processar dades que l'usuari no veu. Per exemple, PHP es pot utilitzar per crear eines segures de creació de contrasenyes en llocs web que requereixen un inici de sessió
Fitxers d’ajuda
Full de trucs HTML
Full de trucs CSS
