Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Expert Help needed for beginner

Featured Replies

Hey people,

 

I'm literally writing in utter desperation. I have always been a very visual guy and have designed a really good, decent site, that looks pretty professional, in Photoshop...

 

I have no idea about Code, i am struggling even grasping what any of them are, do,or anything... it seems very abstract to me, to the point where i m unsure if i am capable of making a site.

 

Im sure you guys, passionate about this subject may be looking at me now as if i am a total dumbass, but the internet language to me seems to be comparable to designing a motor engine, when you dont even know how an engine works...

 

I hope i'm not coming across poorly, but even you amazing guys out there helping others on the internet, are using jargon i cant understand... Its quite funny really because you can go into wordpress, and it will mention CSS, you click that and it leads you on another definition where more jargon is used, so i click that and then yet another definition for another topic using once again jargon i dont understand.

 

I don't think anything for as long as i have been living has struggled to register in my brain. i usually learn very fast.

 

I wondered if any of you guys could point me in the right direction. http://www.frontierbushcraft.com is basically the kind of thing im after... nice and simple. and i honestly dont know which way to turn or what subjects to learn.

 

I'd like to build through wordpress with my own theme.

 

Maybe after taking a look at this website you could tell me exactly what i need to learn to build a site through wordpress, using my own theme. i have dreamweaver, frontpage 2003 and photoshop if any of this helps.

 

If anyone could put me through to a really good tutor i would appreciate this too.

 

Im quite financially unstable so expensive courses arn't an option for me.

 

Thanks so muuch for reading this guys, i hope i havent come across negatively

 

Wes

Hi Wes, welcome to WDF.

 

That site you posted it's very basic visually and shouldn't pose too much trouble with CSS/HTML, even for a beginner. If HTML/CSS confuses you though, WP will take a while. That being said, if you've never coded before don't expect to be an up and running ninja in a week, it'll take time and a lot of frustration. Things like the box model and positioning will blatantly p*** you off, till things click, at least it did with me anyway.

 

You could just send your mockup off to one of the numerous companies that'll slice/code it up, or someone on here even, for a price. If you've no interest in learning and just want a site, that is.

 

Other than that, if you want to learn, there's billions of HTML/CSS/WP resources on the web, here's a few to get started:

 

 

http://htmldog.com/

http://css-tricks.com/

http://teamtreehouse.com/

http://www.codecademy.com/ < This I never used for HTML/CSS but looks awesome.

http://css-tricks.com/designing-for-wordpress-complete-series-downloads/

 

Goodluck,

~evu.

Welcome to the forum!

For the moment forget about WordPress as that's an extra layer of complexity that you will just confuse you.

The very basics you need to learn are HTML and CSS. These are the very basic building blocks of websites and are the be all and end all of everything web development.

It's very hard not to use jargon but.... HTML defines chunks of the page structureusing different tags and CSS tells those chunks what color they should be, where they should be placed, what size they should be and all other aspects of what they look like.

For instance the most common HTML tag is the DIV tag. In this you put any number of other tags that help describe your web page.

 

Example one...

 

<div>this is a div</div>

 

This will create a simple page that displays sentence 'this is a div'.

DIVS always display one after the other so if you where to use the code...

 

<div>t<div>this is a div</div>his is a div 2</div><div>this is a div 3</div>
<div>this is a div 4</div>

 

The page would appear as...

 

This is a div

This is a div 2

This is a div 3

This is a div 4

 

Of course, all this behaviour can be changed using CSS but this is just a quick introduction to HTML and the HTML DIV tag.

 

Hope this helps a tad.

Constant frustration is part and parcel of working with the web, I find that to enjoy it and be able to do it, you have to be one of those types of people that can throw themselves into the deep end and thrive. There's absolutely no reason to be scared by jargon, you just need to learn to look up what all the different acronyms mean.

To expand slightly on what Mike's said:

 

HTML is a semantic language, which means the constructs of the language describe their content. With the exception of <div> and <span>, which are universal elements to be used only where there isn't a more semantic or descriptive element, the element which you wrap around a bit of content will describe what that content represents. For example, you'd mark up a couple of paragraphs like this:

 

<p>There are two main types of HTML elements: block-level and inline. Imagine opening Notepad 
or another text editor and writing several paragraphs. A block-level element is like those 
paragraphs - it naturally takes up all the horizontal space available, it wraps its content onto 
the next line when no more space is available. It can also be spaced out from other paragraphs 
(ie, it can have margins).</p>

<p>An inline element, on the other hand, is only as large as its content. Inline elements are 
things like emphasised text, or hyperlinks - they can start on one line and wrap to another, but 
they don't affect the flow of the document around them.</p>

 

Headings vary in level from 1 (the most important) to 6 (the least important) so let's revisit our previous example and add a couple of headings:

 

<h1>HTML</h1>

<h2>Block-level Elements</h2>

<p>There are two main types of HTML elements: block-level and inline. Imagine opening Notepad 
or another text editor and writing several paragraphs. A block-level element is like those 
paragraphs - it naturally takes up all the horizontal space available, it wraps its content onto 
the next line when no more space is available. It can also be spaced out from other paragraphs 
(ie, it can have margins).</p>

<h2>Inline Elements</h2>

<p>An inline element, on the other hand, is only as large as its content. Inline elements are 
things like emphasised text, or hyperlinks - they can start on one line and wrap to another, but 
they don't affect the flow of the document around them.</p>

 

HTML also lets you mark up lists, of which the most common types are the unordered list <ul> and the ordered list <ol> - lets add an ordered list to the example. Each list element wraps a number of list items <li>, like so (when nesting block-level elements it's customary to indent your code by a couple of spaces or a tab, which helps you visualise the structure of the document):

 

<h1>HTML</h1>

<h2>Table of Contents</h2>

<ol>
 <li>Block-level Elements</li>
 <li>Inline Elements</li>
</ol>

<h2>Block-level Elements</h2>

<p>There are two main types of HTML elements: block-level and inline. Imagine opening Notepad 
or another text editor and writing several paragraphs. A block-level element is like those 
paragraphs - it naturally takes up all the horizontal space available, it wraps its content onto 
the next line when no more space is available. It can also be spaced out from other paragraphs 
(ie, it can have margins).</p>

<h2>Inline Elements</h2>

<p>An inline element, on the other hand, is only as large as its content. Inline elements are 
things like emphasised text, or hyperlinks - they can start on one line and wrap to another, but 
they don't affect the flow of the document around them.</p>

Edited by Renaissance-Design
Legibility

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.