Necesito consejos

[Panic0]

Hola,yo soy nuevo usando html e css me gustaría que me den consejos para cuando haga una página.El código quedé bien estructurado.

[.:Xx4NG3LxX:.]

Yo pienso, que lo primero es un buen editor de código. Yo recomendaría Brackets, o sino simplemente notepad++.

Ya luego faltarían las buenas prácticas de estructura dentro del código. Esto implica saber donde poner cada etiqueta, hasta saber si posee etiqueta de cierre. Por ejemplo; donde colocar un "<script>". Antes del body o en el head de la página. Todo eso y hasta más, y sólo HTML...

... CSS es muy parecido, por ejemplo en cuestión de estructuramiento... No está mal poner un solo estilo en línea...

Código (css) [Seleccionar] Expandir

p { color: red; }

... Pero cuando son varios...

Código (css) [Seleccionar] Expandir

p { color: red; font-size: 20px; background: blue; }

... Se vuelve algo tedioso e ilegible...

Esos serían mis consejos, de seguro hay mejores consejeros en el foro jajaja... Saludos!

[@XSStringManolo]

Yo lo estructuro así: https://github.com/StringManolo/TheKnowledge

El index.html en la carpeta pública.

El css, js, svg y demás recursos en sus respectivas subcarpetas. Quedan las rutas tal que:
public/index.html
public/css/main.css
public/js/main.js
public/svg/imagen1.svg
public/svg/imagen2.svg
...

Aquí puedes ver la estructura de los archivos:
https://github.com/StringManolo/TheKnowledge/blob/master/documentation/FILES.md

El código del html queda organizado tal que:

doctype
html
 head
   metas
   title
   link a ./css/main.css
 finHead
 body
   Tu html aquí.
 
   script a ./js/main.js
 finBody
finHtml
 

[Panic0]

Yo pienso, que lo primero es un buen editor de código. Yo recomendaría Brackets, o sino simplemente notepad++.

Ya luego faltarían las buenas prácticas de estructura dentro del código. Esto implica saber donde poner cada etiqueta, hasta saber si posee etiqueta de cierre. Por ejemplo; donde colocar un "<script>". Antes del body o en el head de la página. Todo eso y hasta más, y sólo HTML...

... CSS es muy parecido, por ejemplo en cuestión de estructuramiento... No está mal poner un solo estilo en línea...

Código (css) [Seleccionar] Expandir

p { color: red; }

... Pero cuando son varios...

Código (css) [Seleccionar] Expandir

p { color: red; font-size: 20px; background: blue; }

... Se vuelve algo tedioso e ilegible...

Esos serían mis consejos, de seguro hay mejores consejeros en el foro jajaja... Saludos!

Muchas gracias amigo,y en cuanto al editor de codigo yo uso visual code ( no es lo mejor pero bueno ajajja)

[Panic0]

Yo lo estructuro así: https://github.com/StringManolo/TheKnowledge

El index.html en la carpeta pública.

El css, js, svg y demás recursos en sus respectivas subcarpetas. Quedan las rutas tal que:
public/index.html
public/css/main.css
public/js/main.js
public/svg/imagen1.svg
public/svg/imagen2.svg
...

Aquí puedes ver la estructura de los archivos:
https://github.com/StringManolo/TheKnowledge/blob/master/documentation/FILES.md

El código del html queda organizado tal que:

doctype
html
 head
   metas
   title
   link a ./css/main.css
 finHead
 body
   Tu html aquí.
 
   script a ./js/main.js
 finBody
finHtml

Bien muchas gracias,pregunta dentro de la carpeta "CSS" puedo poner mas o uso main.css para todas las paginas?

Por que yo tengo un archivo css para cada una de las paginas jeje.

[.:Xx4NG3LxX:.]

Claro, puedes poner tantos CSS como quieras, siempre y cuando cada uno tenga su página HTML...

(No me imaginaria un CSS para distintas páginas que traten de diferentes cosas, jejej).

[@XSStringManolo]

Bien muchas gracias,pregunta dentro de la carpeta "CSS" puedo poner mas o uso main.css para todas las paginas?

Por que yo tengo un archivo css para cada una de las paginas jeje.

Depende mucho de tu caso concreto. Al meter un archivo solo, "compartes" más código. Al cachearse el css, el navegador lo carga instantaneo sin tener que descargarlo. Entonces un solo archivo puede ser más eficiente y por lo general lo es. A parte que es más comodo para trabajar. Quieres hacer un cambio y solo lo haces en un archivo. En proyectos pequeños/medianos te puede dar un poco igual.

[Xyzed]

Buenos consejos los de arriba, te daré mi aporte yendo al grano sin muchas vueltas.

- Todo el código debe estar separado para evitar amontonamiento, html por una parte, css en un directorio distinto al igual que javascript/php/etc.
- Incluir los directorios donde se encuentra todo el código al principio de la hoja html.
- Para contradecir el punto de arriba, hacer una función que ocupe solo una línea donde se llame a los archivos de diseño, así no estás en todas las hojas html invocando lo mismo.
- Usar identificadores de las clases (class) con nombres coherentes que recuerdes (para evitar que andes mirando el css/js a cada rato).

Es lo básico para evitar errores al comenzar. Créeme que siempre considerarás que no es necesario tener cada directorio por separado o agrupado como te digo, pero llega un momento en el cual ver tanto código amontonado te mareará.

Por otra parte, piensa las funciones de validación antes de comenzar a trabajar en varios archivos, para no tener que modificar todo nuevamente una vez terminado el trabajo (me ha pasado, y es una pesadilla).

Feliz comienzo por cierto