How could I improve my code

Report · Aug 17, 2017

I am not new to web-design but I am new to web-development and I am just started to hand code and would really like some feedback on how I can improve my code. I have a basic page that is hosted on gh-pages. I am basically using this to learn how to hand code, rather than using the drag-and-drop features that I am familiar with.

the link for the published page is: ARCnet Home. Please could someone take a look at the code below and tell me if I have correctly coded the page and how I can improve the efficiency of my code.

Here is the HTML for the page. HTML code for this page can be seen on github @ arcnet_main/index.html at master · jaygtel/arcnet_main · GitHub

The page has been designed in pure HTML/CSS and the CSS is listed below. CSS code for this page can also be seen on github @ arcnet_main/basestyles.css at master · jaygtel/arcnet_main · GitHub

Thanks so much for helping me in my quest to learn hand coding

Jay

Report · Aug 17, 2017

Hi Jason,

There are many roads that lead to Rome.

One way to make sure that your code validates is to go to Showing results for https://jaygtel.github.io/arcnet_main/ - Nu Html Checker I find this link valuable especially when the code does not behave.

I also tend to keep the code as simple as possible (KISS). When I see

<body>
<div class="wrapper">
<div class="pageheader">
    <div id="pageheaderimg">
      <h1 class="pgheadertxt" id="pgheadertitle"> Welcome to arcnet.io</h1>
      <p class="pgheadertxt" id="pgheadersub"> Authentic | Relatable | Content</p>
    </div>
</div>
</div>
</body>

I immediately think, why are you not using the BODY tag as a wrapper? Why do you have a DIV with a CLASS followed by one with an ID? Why have an H1 tag with a CLASS and an ID. Similarly the P tag. There may be moments that you will require the extras, but always keep KISS in mind.

If I were to write the code, it would look like

<body>
<header>
<h1> Welcome to arcnet.io</h1>
<p> Authentic | Relatable | Content</p>
</header>
</body>

and the CSS would look like

@charset "UTF-8";
/* base CSS Document - defines the look and feel for the entire site.
This document will define the base css for arcnet.io */
/* reset css rules before applying custom css */
* {
margin: 0;
padding: 0;
border: none;
min-width: 100%;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
}
header {
height: 500px;
background-color: purple;
color: white;
}
header h1 {
font-size: 6em;
padding-bottom: 10px;
word-spacing: normal;
text-align: center;
position: relative;
top: 40%;
transform: translateY(-50%);
}
header p {
font-size: 2.5em;
text-align: center;
position: relative;
top: 40%;
transform: translateY(-50%);
}

I also tend to use CLASS for my style rules, reserving ID's when I truly need a unique identifier for scripts that handle the DOM.

Having said that, there is nothing wrong with the code as you have got it. There are also other alternatives to what I have suggested. Whatever you do, make sure you have applied KISS

Wappler, the only real Dreamweaver alternative.

Report · Aug 18, 2017

Thanks for your reply and for taking the time to help someone out who was asking such a noobie question. Your code examples have shown me that although my existing knowledge would let me code a page and have that page work, I have a pretty long way to go before I will be efficient at it.

I had laid my code out in the way I did (because when you drag and drop elements into dreamweaver, it spits out autogenerated code that is split up into multiple levels of nested divs. Having looked at this code in past projects that I have designed (basically designing the aesthetics and not spending too much time with the code), I saw this autogenerated layout and was trying to replicate it myself.

I almost always got moaned at though by the actual developers, who kept complaining that I had messed up the code that they had written by using WYSIWYG editors and dragging and dropping stuff onto the page, or dragging elements on the page around, without really knowing what it was doing to the code.

So I decided to spend some time watching them and got pretty interested in hand coding myself and decided to learn how how to do that. it is super interesting and surpassingly satisfying.

Anyway, thanks for your answer and for your examples and I think I will also take @Jon Frtiz II advice as well and read up on semantic elements in HTML5.

Cheers

Jay

Report · Aug 18, 2017

No real need to use padding or margin or border: none; or min-width: 100%; on the 'wrapper'. If you do use padding/margin for some reason then do it like the below, just the one 0 and without the px. 0 is 0 in any measurement so no need to declare if its px or em or %.

Plus you only need to use min-width in instances where you want the design to stop reacting at a specific width like 1000px but you don't so there is no need for it.

.wrapper {

margin: 0 ;

padding: 0;

min-width: 1000px;

}

So really you dont have to make any css declarations for your wrapper <div> if you choose to use one, personally I do.

.wrapper {

}

The rest of your css could look like below:

.pageheader {

background-color: purple;

}

Not quite sure why youre using #pageheaderimg container as there is nothing in the container that couldn't be poistioned using .pageheader (so it may be a redundant container that you don't really need). But I see you are using a height on either the .pageheader or the #pageheadingimg (one of them needs to have a height for the vertical centering to work with the method you have used).

If you do have a specific requirement for #pageheadingimg then you could get rid of the redundant css so the selector looks like below:

#pageheaderimg {

height: 500px;

}

Also as mentioned make your ids into classes and add them like the below example, a space between each of the claas names. You can have more than one class declared in the class="" (I've seen as many as 15 before...........hummmm not the way I like doing it as it clutters up the html which makes it difficult to maintain later.

<h1 class="pgheadertxt gheadertitle"> Welcome to arcnet.io</h1>
<p class="pgheadertxt gheadertitle"> Authentic | Relatable | Content</p>

I like to keep it all in the ccs AND in order so group anything relating to your conatiners together, like below: I know some of the programs now have a jump to css declaration from within the editor but its still good practice to produce well organised and documented code.

.pageheaderimg h1 {

font-size: 6em;

padding-bottom: 10px;

color: white;

word-spacing: normal;

}

.pageheaderimg p {

font-size: 2.5em;

color: white;

word-spacing: 20px;

}

Then you have less classes in the actual html itself:

<h1 class="pgheadertxt">Welcome to arcnet.io</h1>
<p class="pgheadertxt">Authentic | Relatable | Content</p>

</div>

The way I would do it is like below: Have fun and hand-coding is the way to go. It takes a bit of time but your ability to be able to manipulate the code and understand it will pay off big time.

<!doctype html>

<head>

<title>ARCnet Home</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';

}

/* starts custom css */

.pageheader {

background-color: purple;

}

.pageheaderimg {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

height: 500px;

}

.pageheaderimg h1 {

font-size: 6em;

padding-bottom: 10px;

color: white;

word-spacing: normal;

}

.pageheaderimg p {

font-size: 2.5em;

color: white;

word-spacing: 20px;

}

</style>

</head>

<body>

<h1>Welcome to arcnet.io</h1>

<p>Authentic | Relatable | Content</p>

</div>

</div>

</div>

</body>

</html>

Report · Aug 18, 2017

Familiarize yourself with HTML5 Semantic Elements (Ben mentions the <header> tag in his code). They will help you cut down on unnecessary ids, classes and nested elements (divitis). They all have a specific use or uses that the search engines also understand, so it benefits you not only in keeping your code simple and tidy, but in how search engines read and understand your site...

HTML5 Semantic Elements

Report · Aug 18, 2017

Thanks for your advice. This sounds like good advice and I will certainly be doing this. I had just wanted to try to code something using my existing knowledge to see how far off the mark I was.

How could I improve my code

1 Correct answer