Please Help About web design

Hi, can some share with me a basic tutorial of web design/web development, I just want to learn.

1 Like

Hi Infamaria welcome to the forums,

Every web page whether a document or a javascript(language that allows logic/ magic) creation will be created using tags.

The <html> is hypertext markup language tag (stand alone web browser document)

<head> Is where all the info about the page eg. the <meta> tags the <style> (CSS- Cascading Style Sheets) and the <script> (Javascript) tags are generally put and is not visible to the end user. The browser parses (reads the info) before displaying to the user the styled page.

<body> is where the content is displayed to the user.

The first concept to wrap your head around is nesting. Most tags and content have a parent tag(except <html>).

The Grandparent is <html> with 2 children <head> and <body>. Then <body> is usually the parent of <div> (division I think) or <section>. Sometimes <main> is used for the main content.

Then under those is generally <h1> to <h6> (heading 1/ large- heading 6-small) as well as <p> paragraph ect.

The next concept to wrap your head around is classes and ID’s.
All tags can have multiple classes but only one ID. These are expressed e.g. <div id = 'divinator' class = 'boxer'>. The ID is unique to that tag. The class can be shared.

HTML is text (think word document with additional info) CSS is the styling.

CSS can be written in a <style> tag.
First the style targets an ID, Class or tag type.e.g.


div { background-color: lightblue;} 

will make any div colour light blue. This selector targets a tag type.

.classy{ background-color: red;} will make any tag class = "classy" red.

#myDiv { background-color: orange;} will make only id = 'myDiv' tag background orange.

Theres a start, start googling stuff and good luck.

2 Likes

In addition to the great info that Steve provided, you can start kicking the tires and building your first page with this article (and video)!

1 Like

Oh, Thanks for sharing this, this kind of tut I am looking for.

2 Likes

This is what happens when you get really drunk at a work Christmas party and answer somebody’s question :grin:

What’s the golden rule… don’t re-invent the wheel. :grin:
I’m surprised it wasn’t full of typos

1 Like

Hey, I’m also learning website design/web development. I can recommend you youtube channel.

There are also some interesting blogs out there that really help me to choose trending and popular programming languages. you can read these blogs for a better understanding.

@kirupa are you able to integrate the forum posting suggestions to Kirupa tutorials with machine learning? I´m in to contribute if that is a possibility :smiley:

2 Likes

Are you thinking of a way to provide “related tutorials” content at the bottom of a tutorial to help someone explore more items?

Yes and perhaps a tutorial suggestion when they type a new post. There might be a tutorial that can answer their question.

2 Likes

Ah! So like a bot that could recommend tutorials in response to some of these “please help” forum posts? Not a bad idea.

@Wayne - I have absolutely no idea how to get started here, so any suggestions? That does sound like a great idea!

really interesting and easy to understand, thanks for sharing

Here are the steps to follow

  1. Define your site’s purpose and strategy
  2. Research the latest web design trends
  3. Choose your platform
  4. Select a template/theme
  5. Decide on your branding
  6. Add in and optimize your content
  7. Publish your website
  8. Analyze and improve
1 Like