3
\$\begingroup\$

I'm making a portfolio website right now with Visual Studio 2013 and ASP.NET 3.5 because my free hosting only supports 3.5. Are there any bad practices in my code at the moment? What would you change and why?

$TextColor: #d9d3d2; $LandingColor: #343434; $BackgroundColor: #1a1a1a; $ImportantTextColor: #de9100; $OriginalSideColors: #eeeeee; html * { //font-size: 1em !important; //color: white !important; font-family: sans-serif !important; } #header { //background-color: #de9100; color: white; text-align: center; padding: 5px; border-radius: 10px; } #TopDiv{ height : 50px; } body{ background-color: #E6E6E6; } #nav { text-align :center; color : white; line-height: 50px; background-color: #424242; height: 400px; width: 5%; float: left; //padding:5px; border-radius: 10px; } #padding1 { height: 400px; width: 10%; background-color: #E6E6E6; float: left; //padding:100px; border-radius: 10px; } #section { text-align :inherit; color : black; height: 400px; width: 45%; float: left; background-color: #E6E6E6; //padding:100px; border-radius: 10px; } #sectiontext { text-align : left; color : black; height: 400px; width: 100%; padding-left : 20px; float: left; //background-color: white; //padding:100px; border-radius: 10px; } #padding2 { height: 400px; width: 5%; background-color: #E6E6E6; float: left; //padding:100px; border-radius: 10px; } #rightsection { color : white; background-color: #E6E6E6; height: 400px; width: 35%; float: left; //padding:100px; border-radius: 10px; } #player{ margin : 0px; } #BotDiv { // Height had to be more than the other divs. Which were 400 height : 450px; } #footer { //background-color: #403B38; color: white; clear: both; text-align: center; padding: 5px; border-radius: 10px; } .HeaderandFooter{ background-color : #030303; }
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server" id="Head"> <link rel="stylesheet" type="text/css" href="Scss1.css" /> <title>3rdDayRaised.com</title> </head> <body id="Body"> <form id="form1" runat="server"> <div id="Container"> <div class="HeaderandFooter" id="header"> <h1>3rd Day Raised</h1> </div> <div id="TopDiv"></div> <div id="nav"> Home<br /> Music<br /> Games<br /> Blog<br /> Contact<br /> </div> <div id="padding1"></div> <div id="section"> <h1>3rd Day Raised</h1> <p> Lorum Ipsum </p> <p> Lorem Ipsum </p> <p> Lorem Ipsum </p> <p> Lorem Ipsum </p> <p> Lorem Ipsum </p> <p> Lorem Ipsum </p> <p> Lorem Ipsum </p> <p> Lorem Ipsum </p> </div> <div id="padding2"></div> <div id="rightsection"> <div id="player"> <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/1227337&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe> </div> </div> <br /> <div id="BotDiv"></div> <br /> <div class="HeaderandFooter" id="footer"> Copyright © 3rdDayRaised.com </div> </div> </form> </body> </html>

\$\endgroup\$

1 Answer 1

Reset to default
4
\$\begingroup\$

Most of what's wrong with this code is in the markup.

<br/> elements used for spacing

The br element should not be used just because you want to space your elements farther apart. They should be reserved for forcing newlines for inline content only.

Div div div div

Divs are certainly more appropriate than using tables for layout, but these days there are more semantic choices available:

  • Section
  • Article
  • Aside
  • Header
  • Main
  • Footer

Learn more about the HTML5 elements: http://html5doctor.com/

Empty elements

You have this empty element here that serves no purpose other than to be pretty:

<div id="TopDiv"></div>

This should be avoided whenever possible. Use an existing element for this purpose if you can, or use the :before/:after pseudo elements.

Body element with an id of Body

We know that there can only be one body element in the document. Make sure that if you're adding a class or id to this element that you're doing it to give this particular page a different look from other pages within the site, not just because you think you need to use a class or id selector because it is "faster" than an element selector.

Classes/IDs that reference how things look

You have ids like rightsection, TopDiv, padding1, and padding2. Will these names still make sense if the page looks different?

Hard coding of height values

If your element contains text, you pretty much never want to do this, especially not with px values. You can never guarantee that the text will be of a particular size.

Want equal-height columns? There are ways of doing it without specifying heights (see: http://css-tricks.com/fluid-width-equal-height-columns/).

Navigation elements

If you have a list of links, it is my opinion that they belong in a list.

Use consistent naming conventions

Some of your IDs are all lowercase (eg. rightsection) while others uppercase the first letter of every word (eg. TopNav). This will make it easier for you to remember the names of your elements.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.