Any coders here?

[MMA Country]

I'm building an MMA website to expand my professional skill-set.
This is the basic layout I'm trying to frame out:

I'm having trouble figuring out how to do this and W3schools and Code Academy aren't helping.

 

[Neil Robertson]

I'm building an MMA website to expand my professional skill-set.
This is the basic layout I'm trying to frame out:

I'm having trouble figuring out how to do this and W3schools and Code Academy aren't helping.

There are tons of examples.

 

[MMA Country]

There are tons of examples.

For that particular layout?

 

[mushishi]

10 goto 20
20 stop

 

[BisexualMMA]

Needs more Halloween orange.

 

[Prime Ang]

Thought you meant medical coding, nvm.

 

[Unfinished Sentenc]

hello world

 

[blackhat]

You're doing it wrong.

Sure you can learn to code in HTML / CSS / PHP and make your website from the ground up. Only problem.. 3 months until you have something decent. Then factor in all the bugs / cross browser compatibility / blah blah blah and you'll be ripping your hair out.

What you want to do is use a pre-made template.

You might want to look into free bootstrap templates and also look into premium wordpress / HTML themes from themeforest.

By purchasing a theme you'll save a massive amount of time and headache, and you'll get a way better result.

 

[Organic Damage]

In b4 web development isn't coding.

 

[facePuncher7]

Use SquareSpace freak bitches.

 

[icemanliddell]

Just use Adobe Muse.

 

[AronaBeatsJones]

You're doing it wrong.

Sure you can learn to code in HTML / CSS / PHP and make your website from the ground up. Only problem.. 3 months until you have something decent. Then factor in all the bugs / cross browser compatibility / blah blah blah and you'll be ripping your hair out.

What you want to do is use a pre-made template.

You might want to look into free bootstrap templates and also look into premium wordpress / HTML themes from themeforest.

By purchasing a theme you'll save a massive amount of time and headache, and you'll get a way better result.

Basically this.

If you're doing some HTML/CSS to evolve your skills, then what you want can be achieved by learning DIV tags and manipulating their location using the "float" and "margin" properties.

However, for an actual website that you want to operate on an ongoing basis, coding a website from the ground up doesn't really work any more. You'll probably need a backend for a PHP/MySQL system so you can conveniently add content without having to code it into the source files every time.

What you want to do is install WordPress, Joomla, Bootstrap, Drupal, or another CMS (content management system), and just install a theme on it. Your HTML/CSS skills will develop organically when you try to modify the theme to fit what you want.

 

[Misfit23]

Bootstrap it

Basically this.


However, for an actual website that you want to operate on an ongoing basis, coding a website from the ground up doesn't really work any more. You'll probably need a backend for a PHP/MySQL system so you can conveniently add content without having to code it into the source files every time.

What you want to do is install WordPress, Joomla, Bootstrap, Drupal, or another CMS (content management system), and just install a theme on it. Your HTML/CSS skills will develop organically when you try to modify the theme to fit what you want.

Horrible advice. And lazy.

 

[Bebop]

so basically the same layout that every site in 1999 used?

 

[Thunderflash500]

Ive found most sites are pretty garbage at teaching. Useful for individual issues but terrible at teaching from the ground up. I'd buy an actual textbook. Maybe head to the library to see what they have.

 

[MMA Country]

This is what my website looks like now-

Still looks like crap, but I'm 1/2 way there. I want to eliminate the white areas outside my red frames. I'll take care of the images/visuals later. That's graphic design work.

 

[RetiredSlave]

Just use Pascal. I once made a ship float across the screen, nerdiest day of my life. Much hespect to the nerds though.

 

[MMA Country]

Just use Pascal. I once made a ship float across the screen, nerdiest day of my life. Much hespect to the nerds though.

Nahh I don't know why I keep seeing this advice.

I used Dream Weaver before in high school for a class.

I coded a pokemon website in middle school and monetized it.

My HTML skills are basic/intermediate and I can add CSS snippets to the site with some references.

The whole point of me making a website is to improve my skills in web-coding, digital marketing, etc.

I already put ads on my new MMA site and integrated it with Google Analytics.

 

[RetiredSlave]

Nahh I don't know why I keep seeing this advice.

I used Dream Weaver before in high school for a class.

I coded a pokemon website in middle school and monetized it.

My HTML skills are basic/intermediate and I can add CSS snippets to the site with some references.

The whole point of me making a website is to improve my skills in web-coding, digital marketing, etc.

I already put ads on my new MMA site and integrated it with Google Analytics.

Sorry I dont actually know what Im talking about. Thought Pascal was useless other than a simple training device, antiquated and what not. Took a programming course in high school and while I do find it interesting, even fun, its just not for me.

 

[Roxxo]

I would recommend learning a CSS framework, such as Bootstrap, Foundation, or Semantic UI. You can do the same stuff with all three, so just pick one. Bootstrap probably has the most learning resources out the three, though I personally like Semantic UI more. Using one will get your site looking better quickly. It will also make it easier to make your site responsive so it looks good on any device. Right now if you resize it, you lose half the content, and ain't nobody got time for horizontal scrolling on websites these days. All three of those have really good documentation that shows how to use them along with code snippets you can take and modify to suit your needs.

If you have aspirations of doing any serious web development, note that there is a lot, and I do mean a lot, more stuff you will need to learn. The days of front-end devs only needing to know HTML and CSS are long gone.

A few good resources for learning modern web development are FreeCodeCamp(full stack Javascript), The Odin Project(Ruby on Rails), and Bento.io(Python and Flask). All three focus on full-stack development, so HTML/CSS/Javascript for the front end along their respective back-end technologies. Bento and Odin are both more of a guided learning path with links to free resources. The most complete is probably FreeCodeCamp, they have coding challenges, video lessons, and a bunch of projects.