₦airaland Forum

Ok. Every web developer may not be able to achieve all these, but I think every web developer should at least achieve 3 of these. Check them out and tell me where I didn't make any sense.

1. Develop a robust web application that will continue to make you money for years.

2. Be invited to speak at a web design conference in America or Europe or host one in Africa.

3. Develop an opensource web application that will be used widely.

4. Write a ground-breaking book on the art of web design and development.

5. Develop at least 50 wordpress or drupal or joomla or expressionengine themes and make them available for download.

6. Develop a new framework of any language you are proficient in.

7. Develop a widely used plugin for Wordpress or any other CMS.

8. Develop an opensource application that will force Nigerian government to honour you. Like developing a language translation application for English to Hausa or Igbo or Yoruba or Nupe. And then Hausa to Yoruba, Hausa to Igbo, Igbo to Yoruba, Igbo to Hausa, Yoruba to Hausa, Yoruba to Igbo and so on.

9. Develop a comprehensive quality video tutorial from html to advanced php and provide it for free download. Or be doing a weekly podcast or screencast on web design tips.

10. Build a web developers centre where developers can come together and brainstorm and relax.

yorme: @GraphicPlus:
Talking about having at least 1 h1 tag, where is it best to use such a h1 tag?

NB: This is the first time i am hearing of such.

Thanks

Ok. In the art of seo, it's one of the good seo practice. The h1 tag should be on top before other headings. Robots see texts in h1 as very important.

Like in your home page, you may do something like this:
<p>WELCOME</p>
<h1> Welcome to JustMeah Photography - the world of Digital Photography!<h1>

You may say, 'but my welcome text will now be small.' Here is the trick. Leave it like this in your html, then go to your css and change the font-sizes. Make the 'WELCOME' text to be big and then reduce the h1 tag font-size to normal p tag font-size of your page. Do same in all your pages. You can have multiple h2 to h6 headings, but restrict yourself to one h1 heading per page.

Something like the images below?
Download the attached zip file and play around with the codes more.

@Greenmouse, just point out what you mean that his html is not seo friendly. We are here to learn.

Talking about multiple heading tag, do you mean h2 and so on? Now, in seo, multiple heading tag is allowed. What is not seo friendly is having multiple h1 tag. The Op didnt even have a single h1 tag, which I forgot to point out. Every page should have one h1 tag and multiple other heading tags. So using multiple h2 tag is NOT a bad seo pratice.

Good job. Dark background is good for photography studio website.

Take note of these:

1. Your logo should be clickable. It's good for seo. Just link the logo to index.php. Remember to add this: a img{border:0} in your css so that ie will not give it a border.

2. Tidy up of empty image alt. This is very important since this kind of website needs some traffic from search engines.

3. In your stylesheet, you did this:

background-image:url('img/bg.jpg');
background-repeat:repeat;
background-position:center;

The background-repeat and background-position are not necessary in this case. Css repeats background image by default. So without telling it to repaet the background-image, it will repeat it. Unless you want to tell it to repeat-x or y. Again, since the image is seamless and will repeat till it fills up the whole body background, there is no need telling it to position center. You use background-positioning when the image is one and big, so in that case you will set the background-repeat to no-repeat and position it center.

4. Why did you position your logo and menu absolute. I cant see any reason for that. Whereas it worked out fine, but please try to be avoiding absolute positioning if you can. You should have just floated them left and right respectively and clear both.

5. I am not a fan of too much text-shadow. In your services.php page, the text may be better in just plain white color. The color you used to write "Weddinbg n events" is kind of not good for wedding. Why not use a vibrant color like the one u used to write "Modelling photoshots"?

6. There is no client-side form validation. Again, no thank you message. I filled a dummy data and sent and the form reloaded and returned without a thank you. This may make user not to be certain whether his query was sent or not. Again, instead of phone field, why not email. A user will be more willing to give his email than phone number. And again, it will be cheaper for the company to send a reply to the user via email than calling them and burning credits.

7. I think it will be good to set active link to show which page the user is viewing.

Overall, good job. Your html and css codes are actually neat and properly indented.

@Greenmouse, I dont think nothing is wrong with his html markup or is there? Although I can see he used multiple wrapper when he could have just used one.

Am not sure what you really mean. Css has nothing to do with doctype. Doctype is strictly for html. Maybe, you are missing out something that relates to your stylesheet. Instead of using html4 doctype that has lots of confusing and cluttered details, you can start using html5 doctype, which is short and clean. And one good thing about html5 doctype is that you can still declare it and still use old html4 tags and elements and you will still be good to go.

Add these lines of codes at the beginning of your html document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>

What do you mean by browser compatibility? If you are using html4 and css2, then you should not worry yourself about browser compatibility because even ie7 understands all the html4 and css2 properties and values.

But if you are using html5 and css3, then you should first know about browser prefix when using most css3 properties. But since you are starting out, I advice you focus on html4 and css2. There are certain workarounds in getting html5 elements to be rendered well across browsers which you may not need to bother yourself with for now.

Blooger can do it, but you will need to know how to customize blogger. Adding menu and a header in a blogger is pretty simple. Go to your dashboard and tweak the settings. If you want to build a static website instead, how will you be updating it. The solution might be to advertise here and ask someone to fix a blogger website for you for so so amount of money. You may contact nairaland.com/miracle4 and give him the job.

However, I did a small header and navigation that might give you a clue.
Download the zip file attached and take a look. But again, you will never be able to fix these things if you dont know basic html and css. If you dont know html and css, then it only makes sense to contact someone who knows to do it for you for some amount of naira.

Thank u.

Website design profession like any other profession is lucrative. Even snail farming is lucrative if you know how to change the game.

You said you read Mechanical Engineering. So you want to change profession then? If that is the case, then it's ok. I have seen medical doctors turning to another profession entirely.

One good thing about web design industry is that it's still growing and it has a great future. Practically everything is now moving to the web and mobile app.

So if you want to be part of the movement, then I think it is a good step in the right direction.

To become a web designer, you must start with html. Html is the bedrock of web pages. There are tons of tutorials on the web on this language. And luckily, it's pretty easy to learn. In fact, you can have a strong grip on it in one month.

Then after html, you will then be required to soak yourself into css. Css is the beautifier of the web pages. Again, it's pretty simple to learn although some of the properties can be tricky sometimes.

After learning html and css, then design a simple website and test your knowledge.

Then, you will be required to pay homage to javascript. Javascript is engine behind most interactivity on web pages. It is the language of the browser. You will learn it and one of its many libraries like jquery. Javascript is simple, but also difficult to learn.

When you are done with javascript, you will then proceed to php and mysql. Php is the language of the server. It brings dynamism to web pages. It's actually simple to learn. If you patiently learn javascript, you can easily learn php because most of the syntax are same.

At this level, you will be exposed to one or two other things you may need to learn. You may need to learn one other server side language like python and some other frameworks like angular and stuff like that.

Overall, you must have passion for this industry. It's not all about lucrativeness. Someone like me will still be coding websites even if am not getting any money from it. But sure, passion will always translate to good income.

To get started, go here:
http://www.tutorialspoint.com
http://www.html.net

These two sites have tutorials in all the languages listed above. They will practically give you what you want.

Wow @Greenmouse. Thank you so much sir. You may wish to know that my reviews of your projects are not an attcak on you. I do every review here with the aim to pass across my little experience to others. The reviews are not basically about you. Someone who is starting out may find some of the reviews helpful in the future. I usually go to certain foreign forums and anytime I see a website review thread, I must read all the comments. I have learned a lot from some of those reviews. So my brother, am not attacking you. What do I stand to gain in attacking you?

I am aware that you are a CEO of a company as you pointed out. I know that some persons depend on you for a pay every month. I commend you for giving those seven people job in your company.

You said that the websites you post here are done by your boys. Good. But I want you to know that those boys are not Greenmouse. It's you that is Greenmouse. Even if you are not the one coding all your websites, I suggest you wield your hammer of expertise on any job those boys do before you put it up for review on a public forum. Because since the signature of the job says: "Designed by: Greenmouse Tech", it all means it was designed by you. Those boys will come and go, but you and your company will remain.

Again, I suggest, you ask your boys to open an account on Nairaland, and then be putting up projects here for review without putting your signature. When the project is ready to go live finally, they can then put your company seal on it.

In everything, I understand the point you made. I appreciate your courage. Please sorry for seemingly attacking you.

I hereby promise you that I WILL NEVER review any project you post here for review. I can only go through other people's comments, but I have placed a ban on myself never to review your projects. Thank you. Let peace reign.

Good one. I just like the background image. I am a fan of full width bg image when it's properly done.

Ok. Let me show u few things.

1. You used table for your layout. That is a no no in this 21st century. Table MUST be used for what it was created to do in the first place. To display tabular data. See first image below. Simply put, anything Microsoft Excel will do perfectly well in real life, is what table is meant to do on the web.

2. The background image is not properly styled. And so, it has a horizontal scroll-bar. See the second image below. But what exactly do u want to achieve? To have a full body background image?

You did this:

body {
background: url(images/body.jpg);
background-color:#f4f4f4;
min-width: 100%;
min-height:100%;
}

Now, it will not work like this. The image will repeat, yet your image is huge. 2024px/1256px. So it will repeat more than one time and make the website heavy more. The weight of the image is 624KB already.

To achieve a perfect full background image that will not have a scroll-bar, here is how your style will be:

body {
background: url(images/body.jpg)no-repeat center center fixed;
background-color:#f4f4f4;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

The background-size:cover is a css3, that is why I added those browser prefix. You don't need to specify the width and height since you are using background-size:cover. Width and height are required when you are using just background-image.

Now, it's always good to set the image fixed when using full-width background image that is not seamless. But if you want the image to also scroll vertically, then remove the fixed value.

See what I mean here: http://www.ctrlshiftstudios.com/fullBG

3. The hover of the "Read More" buttons should have a background color same as that of the main nav container. It gives a good user experience and color theory. See the third image below.

4. The slider image should not be cut into two with a gradient color. You may leave the images as they were and give the text on top of them a background color of the menu and reduce the opacity. Then make the text white with a drop-shadow. See fourth image below.

5. The three divisions under slider should have some white space on top. It's either you give them margin-top or you give the slider div a margin-bottom.

6. The share buttons by the right are not necessary. This is not a blog. Do you expect users to tweet the homepage or share it. For what? The three social icons at the top are all the company needs.

7. The hover color of the main link and the background seems to be same because when you hover on the links, they disappear into the background.

8. The bg image was 624KB, but I optimized it and got it at 511KB. Always optimize a huge jpg image with: http://www.jpegmini.com and optimize a huge png image with: http://www.tinypng.org

Well done.

[quote author=yawa-ti-de]3) Always use a CMS for managing the content and not because you want the sites to be responsive - you can always code a responsive site from scratch, or using ready-made frameworks like foundation or twitter bootstrap.[/quote]Again, wordpress theme does not automatically translate to responsive site. Not all wordpress themes are responsive, although most are.

I dont think you should have settled for this theme. You can get a better one at themeforest.net for between 10 USD and 50 USD.

Text-shadow is not properly used here.

The content is not centered in other pages, unless it's deliberate. Who says content must always be margin: 0 auto?

The drop-down menu looks weird to me especially the long one. Why not make the drop down a mega menu?

You really will need to customize the theme more as you said you are still working on it.

The dark background is good since this is a fashion and beauty website.

The level of computing is actually at where the human brain stops. Agreed, information technology has really overtaken certain traditional way of communication and relationship between two individuals, married couple in this case. I believe your wife likes face-to-face communication, but there are people like me that like common text messages a lot. I like reading and re-reading them while beaming with smiles. So if she likes sms, be sending it to her. Never try to deprive her of that her way of receiving romance. So try to understand her love language and satisfy her. Then gently let her know that you like face-to-face communication than typing: "Miss you darling." on a phone and squeeze the send button. Both of you must reach a compromise.

Enough of ranting. This is webmasters section. So back to computing. The world of information technology has really revolutionized everything from an app that informs you about your schedule to video chatting to voice sms to a laptop that types what you are thinking.

I don't think it's necessary putting some forum members' names in your thread topic and asking for their review. If you want review from certain individuals, then send them a private message with the link of the site and dont create a thread for it. But if you want to create a thread for it on a forum like this, then just ask for review without mentioning names. I think it makes more sense and looks more matured.

Anyway, your website looks good and the codes are clean enough. Just consider all that @Yawa pointed out. You may also consider reducing the darkness of the body background-color. You used: #d1d1d1. You may check: #ecf0f1 or any other color that is a bit close to white because your text color is not black. You used #666.

Since your nav links have hover effect, it may be good to add active class to show a user where he is.

Since the slider is only on the home page, why repeat the js code in all the pages?

You have 5 css links in your html. Five? How? You may have to find a way to reduce them to one or two to reduce http request. Especially the stylesheet that will not conflict with each other when brought together under one roof. Like your fader.css that has only few lines, you can just bring it inside your major stylesheet. If you have so many stylesheets, how will you code your responsive @media query. You will have to copy the @media query codes and paste into all the stylesheets or create a separate stylesheet for it which will bring your css link to 6. Not too good.

The transition on your nav link is not smooth. When you hover on it, it's smooth, but when you unhover it transits roughly. Reason? You set the transition on the hover effect. The transition should not be on the hover, but on the link itself. The a tag. Check these two divs to see what I mean: http://www.ctrlshiftstudios.com/hover.html When you hover on the red div, you will notice a smooth transition all the way. Now hover on the yellow div and see a smooth transition then when you hover-out, the transition will be rough. Why? The red div has its transition on the link and the yellow div has its on the hover. Yours behave like the yellow div.

For even a better experience, give the link a background-color. "But I dont want the link to have a background color", you may say. Well, here is the trick. Give it a background color exactly the same with the menu background color so that it will not be noticed that it has a bgcolor. But the transition effect will notice. It will help it to transition from the link bgcolor to the hover bgcolor.

You may wish to change the color of your page header text. Like: About Us, Our Portfolio, etc. You may give it a green bg and a white color. Or you give it a darker color so that it will be different from the paragraph text color.

You must make it responsive. Fortunately, the layout is simple and clean, so making it responsive will not be a big deal.

All the best.

[/quote]

AFOLSNETWORKS: You need to centralize the slider, you can take a look at it on opera, you will find out the image remains floated to the left rather than centralized.

How? You mean when you zoom it out? Well, it was not possible because the trick behind the full width is that I set the width of the slider image container to 100% and set the image to 100% also. Now, you cant center a div with width of 100% using margin:0 auto; And if you remove the 100% and set it to let's say 1500px, the web page will have a horizontal scrollbar because the image has width of 1500px. Again, the image is positioned absolute, and it's difficult centering an absolute positioned element.

But check again. I have corrected it. I checked it with chrome, ff, ie and opera and the slide fully stretches the width of the browser. Even when you zoom it out now, the image slide will be centered. The trick? I set the image size to 1500px; and set it's container to 1500px also and then set it to margin:0 auto. Then a horizontal scrollbar appeared. To fix that, I set the image container to overflow-x:hidden to force its child (image) to fit in without a scrollbar. But again, there was a scrollbar still because the image container itself is set to 1500px. To solve this, I had to look for the parent of the image container, which is the body. I then set the body to overflow-x:hidden and everything now fits well.

Check at your end and see whether it works. If it didnt work, then the only solution will be to use js to force it.

Ok, I know that HTML5 is still been developed and lots of its features are not yet compatible with all the browsers. And some web developers are even yet to learn the new features of html5 and start using them in their day-today designs. I know that 90% of css3 properties are not yet fully embraced by web developers and browsers.

So why will anyone want to start thinking of HTML6 and CSS4? Isn't that trying to mess up with html and css entirely? Well, I was thinking and it came to me that there are some features I will like to see in html and css in the future.

Let's get started.

HTML6
1. <picture></picture> - This is even been advocated already by web developers in America and Europe. It may replace <img src=""/> in the future.

2. <responsive></responsive> - This will wrap the overall webpage. It will open after body tag and closes before it.

3. <social></social> - This will be used to mark up social media networks like facebook and twitter.

4. <translate></translate> - This will be used to translate any text from English to major languages like French.

5. <list></list> - This will replace <ul> and <ol>. You just click inside the opening and closing list tag and start typing without <li>. When you finish typing a particular line, just end it with >.
Like:
<list>
Web Design>
Graphics>
Training>
</list>

6. <link></link> - This will replace <a href=""></a>. You will just type your link like this: <link>index.html</link>

7. <info></info> - This will be used to write contact info like url, email, phone, etc. It will show in a special character.

8. <page></page> - This will replace <div id="wrapper"></div>. It will be used as the main container of each web page.

9. <logo></logo> This will be used to mark up your logo. Whether your logo is an image or text, you will write it like this: <logo>images/logo.png</logo>. It will be styled later in css4.

10. <paint></paint> - This is bringing photoshop brush to the web without using an image. You will see how it works in css4.

CSS4
1. picture{
scale:proportionally;
color-ehancement:brighter;
quality-enhancement:high;
load-optimizer:fast;
}

2. responsive{
mobile[240px, 320px, 480px, 640px]: respond;
desktop[960px, 1024px, 1200px, 1600px]: respond;
fitted: true;
}

3. social > facebook{
background-color:fb-color;
hint: 'Like us on facebook';
hint-popup: top; /*This will have right, left top and bottom*/
hint-color: #fff;
hint-bg: #000;

}

4. translate{
lang: 'french'; /*It will support other languages like: Portugese, German, Greek, Latin, Arabic, etc*/
}

5. list{
type: ul; /*You can also set the value to ol*/
bullet: disc; /*You can also set to square, circle, etc.*/
}

6. link{
color: red;
hover: black; /*No more something like a:hover*/
}

7. info{
/*This will have normal css styling like color, font-size, etc, but it will have a special styling by default.*/
}

8. page{
/*This will have normal css styling like width, border, background, etc.*/
}

9. logo{
place: left; /*the value can be set to right or center. Left is the default value*/
}

10. paint{
style: splatter; /*This will have values like: splash, smooth, rough, zigzag, etc*/
color-mixture: red + yellow; /*You can mix multiple colors as long as you mix them with + sign*/
}

Let me know what you think. Am I running out of my senses?

For quicker response, go here: https://www.nairaland.com/graphics-video

Google Accounts can only be recovered within a short period of time after deletion. If you recently deactivated or deleted your account by mistake you can attempt to recover it by following instructions in this link: https://www.google.com/accounts/recovery

Choose: "I don't know my password" and then continue.

But if it's been long. Then sorry, deleted accounts cannot be recovered, and the usernames cannot be re-registered either.

I dont get you. Both 1 and 3 are just the same.

A logo.
A navigation.
A slide.
Three divisions.
A footer.

Both have these layouts in common. Just give them number 1. It's better. The nav style of number 3 is just not ok.

But if I were you, I will come up with something like this:
http://www.ctrlshiftstudios.com/mahat


Don't mind me. I woke up early today and I said let me play around with the stuff.

If you like it, use it and don't thank me. Reason? I learned something new while playing with the work.

Here is the raw zip file: http://www.ctrlshiftstudios.com/mahat.rar

Yes. Iframe. Right click on the screen of that particular youtube video and select "Copy embed video." Then go to your html document and paste it where you want the video to be. You will see a code like this:

<iframe width="640" height="360" src="http://www.youtube.com/embed/7d3HgwxSFOE?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

It opened very well on my mobile phone.
@Yawa, clear your mobile phone cache.

AFOLSNETWORKS: @Graphicplus, I dont agree that was a template. if any parameter was deactivated, it does not automatically make the work an edited template. If you check well most of the deactivated parameters are borders which when active help you see your layout better.

It's not true sir. You can't have close to 100 deactivated properties and tell me you took the pain to plan and write them and then deactivate them. Why write them in the first place?

...which when active help you see your layout better.

Not true. If when active they help to see the layout better, then why deactivate them? Look, am matured enough to know what am talking about. And what I said is true. But get my point. Since this was done by a student, he really tried by trying to modify an existing template. Template editing no be beans as Yawa pointed out in a certain thread.

All am saying is that we must go beyond the status quo and change the game in Africa.

Who is this woman please? I am humbled. If I were GEJ, this woman must be either a minister or a senior special adviser. This woman should be compelled by her people to go to Senate and represent them. This woman should be made the Nigerian first President or Vice-President. I mean, if people like Mrs. Uwais are still in Nigeria, then there is great hope for this nation.

Long Live Mrs. Maryam Uwais.
Long Live National Assembly.
Long Live Federal Republic of Nigeria.

I'm not impressed (I will tell you why).

@Greenmouse, it's either this student of yours has been doing all your websites or you did this one and claimed your student did it or you have transferred your un-semantic way of html markup to your students. There are lots of things that are wrong with your html. And considering the fact that this is 2013, every web developer should know these basics.

Let me outline them to you:

1. Abuse of div.
You did this:
<div class="hone">
<div class="logo"><img src="images2/logo.png" /></div>
<div class="name"><h1>Starcity International Academy</h1></div>
</div>


What stops you from doing it like this:
<div class="hone">
<img class="logo" src="images2/logo.png" />
<h1 class="name">Starcity International Academy</h1></div>
</div>


2. Abuse of hierarchy.
You did this in your nav menu:
<a href="index.html"><div class="navone"><ul><li><img src="images2/home.png" /></li></ul></div></a>


It's wrong. Why will you not mark it up like this:
<ul>
<li class="nav"><a href="index.html"><img src="images2/home.png"/></a></li>
</ul>

How can you use div and ul into 5 times? As long as your main navigation is concerned, you need only one ul and no div. Just give the ul a class.

3. Predefined height.
I know there are cases you may have to define a height of an element, but giving a predefined height to certain elements is considered to be wrong.

But you did this:
#container{margin:auto; width:900px; height:780px; dbackground-color:#fff; dpadding:0px 10px 0px 10px;;}

You gave a whole main container a fixed height? This is wrong. Main container that will container all the information should not be giving a fixed height. Its height will be determined by its content. You can only give it a padding.

Even your div classes of one, two and three that are carrying the "Creche, Nursery and Primary" should not have been given a height. You gave them height of 200px. Since they contain texts which can re-position and reshuffle itself when browser is re-sized, the containers should not have a fixed height. Just zoom the webpage out and see that the text will be forced to outgrow their container because the container is fixed with a predefined height.

Do you know why I said am not impressed? The website is a pure free web template.
How do I know? See: body{margin:0 auto; dbackground-color:#F38620; background:url(images2/bg2.jpg) repeat-x;}. There are lots of css properties you prefixed with d, which means disabled. Instead of going through a hell of editing a template and adding d d d here and there, why not teach these young boys how to do these things. The website is even simple and so the boy can learn to code it on his own if you can teach him properly.

Now get it right, am not against people using free template to design their works. But I will be among the last web developers that will bend down editing another man's template when I can do a custom one that will look better. I will never teach my students how to edit free web templates. I will teach them how to code wordpress themes from scratch. I will teach them how to use their leisure time to code about three web templates and make them available for people to download and edit and use free of charge. I will teach them the best practices in this industry.

Friends, this industry is growing with an alarming speed. Lots of things are coming up and we must take our stand never to be abandoned. This month makes it two years responsive web design was started. Lots of webdesign companies have made it a general standard in their companies to be offering responsive web design to every client as a standard and not as an extra charge. Companies like: http://www.mixd.co.uk

Let us sit up and become the best we can be and then teach these young fellows how to design and code awesome stuff from scratch.

Let`s save the girl-child.

Let`s save the girl-child.

And out desperation you dont know where to create this thread?
Go here: https://www.nairaland.com/travel

Do you mean html form select field?
You may have to explain what you want.

This is black-hat. You have two choices. It's either you find something reasonable to do with your life and God-given talents or you keep finding a dubious way to get some useless shoes that are not worth human integrity and dignity.

Keep voting.
Keep fighting.
While young boys in America and Europe keep developing CMSs and Frameworks.
You will later be tired of fighting over languages or CMSs.
But those boys will never be tired of developing robust applications and platforms.