primero que nada, felicidades a ambos. espero que este sea el inicio para que más usuarios se animen a competir
Limpieza y orden del código html y css
las 2 webs están muy similares en este punto, el código está muy claro en ambos casos y ambos cometieron
errores similares:
Repetición de clases
Como ejemplo, en tu trabajo Calizzz, si quieres darle estilo a todos los párrafos dentro de <div id="kers">, no necesitas ponerle una clase a cada párrafo, sino que simplemente los puedes llamar así
... exactamente el mismo error se puede ver en el trabajo de Aresillo con los <span class="preguntas">
No hay comentarios en el código
Ninguno de los 2 comentó el código (ni el html ni el css). En este caso no es catastrófico porque son trabajos pequeños, pero estaría bueno que se acostumbraran a comentar por lo menos las principales secciones... más adelante nos les va a extrañar encontrarse con archivos css de 400, 500 o hasta 800 lineas, y una buena política de documentación les puede salvar el día.
Cuidado con el ancho total!!!
Calizzz, le distes una ancho fijo de 1200px al header y 1100px al contenido, pero mucho cuidado, no todos tenemos pantallas de 1440! De hecho más de la mitad de los internautas usa una resolución de 1024x768 así que la gran mayoría va a ver tu sitio con scroll horizontal.
Aresillo, tu usastes 1000px de ancho, así que lo siguiente va para ambos... si van a usar anchos fijos, no se vayan más allá de los 980px... ya que aunque se use 1024, la barra de desplazamiento, menus, borde de pantalla, etc, comen espacio por lo que hay que dejar un margen para no pasarse
Calizzz:
No usastes propiedades abreviadas en el css
en vez de poner margin-top, margin-right, margin-bottom y margin-left, puedes usar la propiedad abreviada margin, seguida de los 4 valores... así en vez de 3 o 4 líneas, usas 1 sola. Ejemplo:
(el orden de los valores es horario empezando con top); lo mismo para el padding y el background, que tambien tiene una propiedad abreviada.
Calizzz:
No indentastes el html
solo indentastes los LI, pero con 2 espacios (cuando se indenta es mucho mejor usar el TAB). Además las lineas las veo con muchos saltos de carro entre medio, posiblemente debido al editor que usastes... con que programa trabajas?
Aresillo:
Uso de BR para separar párrafos
como dice kseso, debistes usar css (margin por ejemplo) si querias separar los párrafos entre si y no separarlos "a la fuerza" con br
Aresillo:
Label vacios
los label vaciós no tienen mucho sentido que esten ya que no aportan nada... o les pones texto y los ocultas con css, o directamente sobran.
Además el botón del formulario se me ve en una segunda linea, no queda al lado de la caja de búsqueda, pero eso se soluciona reduciendo el margin-left del input tex de 29 a 28px.
Aresillo:
el fondo del menu
no voy a profundizar en esto porque ya lo explicastes, pero así como lo hicistes hace que pierdas toda la flexibilidad que te da el css.
Aresillo:
font-weight:bold en el :hover
a mi personalmente se me hace molesto que la fuente cambie de tamaño en el hover, porque eso hace que en algunos casos el texto ocupe más lineas que en su estado normal, porque en bold la fuente se hace más gorda y por lo tanto ocupa más espacio
Aresillo:
Efecto lupa en publicidad
un buen desafío técnico llevado a la práctica con bastante buen efecto (efectivamente el hover se solapa y tapa la publi que le sigue, pero no me parece que quede del todo mal)
Diseño
En este campo creo que el trabajo de Aresillo estuvo más completo, incluso con un trabajo de logo bastante desarrollado... el agregado de los elementos extra le da una mayor sensación de "página real"
Semántica
Es lógico que en este apartado haya algunas erratas, pero en líneas generales el trabajo fue muy bueno y si consideramos que se autodenominan novatos, diría que excelente. Ninguno de los 2 sufrió de divitis y usaron correctamente las listas desordenadas para menu. Además ninguno uso tablas para maquetar (me quedé con las ganas de ver algun dato tabular, eso si). Los ddetalles que noté:
Orden de los Hx
Otro error que vi en los 2 trabajos, ambos usan el elemento H3 sin haber usado el elemento H2 antes... un orden correcto podría ser h1-> h2-> h3-> h3-> h4-> h2 pero no h1-> -h3-> h4-> h2
Para resolver este problema, lo mejor cuando duden es pensar "el elemento que tengo enfrente, está relacionado y depende del Hx anterior o no tiene nada que ver?"
Viendo el trabajo de Aresillo por ej... vemos que el título del artículo es H1 y el título "entradas recientes", es un H2. ¿las entradas recientes son un subtítulo del artículo, estan dentro de su contenido, o no tienen mayor relación?
No tienen relación... por lo tanto no pueden ser de un orden menor al título del artículo.
Con ese mismo ejemplo vemos que el título de la página (Mecánica F1) es un H1, y el título del artículo también es un H1... a mi me parece que el título de la página tiene mayor importancia que el título del artículo, por lo que el artículo en definitiva tiene que ir en un orden inferior.. además pusistes la fecha como h3, cuando a mi criterio no sería h3 sino un simple párrafo.
Marcado de las preguntas: no solo existen listas desordenadas
ambos tuvieron ciertos problemas con el marcado de la información principal (las 6 preguntas/respuestas) ya que para las preguntas creo que podrían haber usado Hx o (más que nada en el caso de Calizzz)
listas de definición
Aresillo, si querías llevar la atención al orden de las preguntas, podrías haber usado una lista ordenada (OL -> LI)
Calizzz:
Citas
Es lógico que no lo conozcas y por eso usastes un div, pero existe un elemento especialmente pensado para marcar citas, el
blockquote CONCLUSIÓN
Ambos estuvieron muy muy bien, si son novatos no se notó para nada! Felicidades. sin embargo en esta ocasión mi voto (que es simplemente anecdótico, creo que lo importante es lo de arriba) va a Aresillo, por haber trabajado más detalles y haberse arriesgado a usar técnicas css más llamativas y complicadas, pero el trabajo de Calizzz también esta muy bueno
Aresillo 4
CaLiZzZ 0 
), os animárais a dar vuestra opinión, correcciones y consejos, ya que este duelo se ha planteado como didáctico.
Este tema le ha gustado a 1 personas