# Please Help About web design

**URL:** <https://forum.kirupa.com/t/please-help-about-web-design/649853>\
**Category:** web dev\
**Created:** [December 1, 2021, 9:15am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853 "2021-12-01T09:15:41Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Infamaria101](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/infamaria101/32/16125_2.png) [@Infamaria101](https://forum.kirupa.com/u/Infamaria101)\
**Post date:** [December 1, 2021, 9:15am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/1 "2021-12-01T09:15:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [December 1, 2021, 3:00pm UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/2 "2021-12-01T15:00:38Z")

</div>

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.

```auto

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 1, 2021, 8:13pm UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/3 "2021-12-01T20:13:27Z")

</div>

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)!

> **[Building Your First Interactive Web Page](https://www.kirupa.com/html5/building_your_first_web_page.htm)**
>
> If you have never built a web page before and want a friendly introduction to it, this tutorial is for you!

---

<div class="post-metadata">

**Author:** ![Infamaria101](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/infamaria101/32/16125_2.png) [@Infamaria101](https://forum.kirupa.com/u/Infamaria101)\
**Post date:** [December 3, 2021, 6:03am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/6 "2021-12-03T06:03:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [December 4, 2021, 2:11am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/7 "2021-12-04T02:11:35Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![eddparker01](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/eddparker01/32/16610_2.png) [@eddparker01](https://forum.kirupa.com/u/eddparker01)\
**Post date:** [January 20, 2022, 10:55am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/9 "2022-01-20T10:55:11Z")

</div>

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

> **[edureka!](https://www.youtube.com/channel/UCkw4JCwteGrDHIsyIIKo4tQ)**
>
> Thank you for Subscribing! If you have not, Subscribe now!
> 
> We are a live & interactive e-learning platform with the mission of making learning accessible to everyone. We offer instructor-led courses, along with 24/7 on-demand support to achieve...

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.

> **[Web design and Development - Tips to Rebuild Your Website](https://invozone.com/blog/website-design-development-tips-to-rebuild/)**
>
> Thinking about rebuilding your website but can’t decide the time? Read on to discover when to rebuild your website design and development.

---

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [January 20, 2022, 12:28pm UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/10 "2022-01-20T12:28:46Z")

</div>

@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 😃

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 20, 2022, 9:00pm UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/12 "2022-01-20T21:00:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Post date:** [January 21, 2022, 6:11am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/13 "2022-01-21T06:11:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cadehunter](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/cadehunter/32/12826_2.png) [@cadehunter](https://forum.kirupa.com/u/cadehunter)\
**Post date:** [January 21, 2022, 6:31pm UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/14 "2022-01-21T18:31:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 23, 2022, 3:33am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/15 "2022-01-23T03:33:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manthradesign](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/manthradesign/32/18288_2.png) [@manthradesign](https://forum.kirupa.com/u/manthradesign)\
**Post date:** [July 20, 2022, 10:56am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/19 "2022-07-20T10:56:49Z")

</div>

really interesting and easy to understand, thanks for sharing

---

<div class="post-metadata">

**Author:** ![jamescoller](https://avatars.discourse-cdn.com/v4/letter/j/e79b87/32.png) [@jamescoller](https://forum.kirupa.com/u/jamescoller)\
**Post date:** [October 19, 2022, 9:30am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/23 "2022-10-19T09:30:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [June 12, 2023, 5:24pm UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/26 "2023-06-12T17:24:07Z")

</div>

Hello at kirupa, why don’t you launch your own programming courses? Instead of reading books, I’d love to follow courses even if they’re 50+ hrs long. Put them in udemy or maintain the cost to be decent enough to purchase.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 13, 2023, 5:23am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/27 "2023-06-13T05:23:44Z")

</div>

I’d rather create them for free and post them on YouTube! 🙂

You can find a lot of them at:

> **[KIRUPA](https://www.youtube.com/kirupa)**
>
> Do you want to be a better web developer? Do you want to learn how to implement amazing front-end user interfaces? The videos in this channel will take you there...and possibly even further.
> 
> If you like the content and find it useful, please share...

---

<div class="post-metadata">

**Author:** ![merikheti567](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/merikheti567/32/23197_2.png) [@merikheti567](https://forum.kirupa.com/u/merikheti567)\
**Post date:** [September 1, 2023, 11:42am UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/31 "2023-09-01T11:42:03Z")

</div>

1. Understand the key concepts of visual design.
2. Know the basics of HTML.
3. Understand CSS.
4. Learn the foundation of UX design.
5. Familiarize yourself with UI design.
6. Understand the basics of creating layouts.
7. Learn about typography.
8. Put your knowledge into action and build something

---

<div class="post-metadata">

**Author:** ![divine\_eye](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/divine_eye/32/23294_2.png) [@divine\_eye](https://forum.kirupa.com/u/divine_eye)\
**Post date:** [September 11, 2023, 1:28pm UTC](https://forum.kirupa.com/t/please-help-about-web-design/649853/34 "2023-09-11T13:28:20Z")

</div>

Web design is the process of creating and designing the visual layout, user interface, and overall look and feel of websites. Effective web design takes into consideration both the aesthetic aspects of a website and its functionality. Here are some key elements and principles of web design:

1. Layout: The layout of a website refers to how content is arranged on the page. It includes the placement of headers, navigation menus, text, images, and other elements. A well-organized layout enhances user experience.

2. Color Scheme: Choosing an appropriate color scheme is crucial. Colors should be visually appealing and consistent with the brand or purpose of the website. Colors can also convey emotions and guide user attention.

3. Typography: Selecting readable fonts and text sizes is essential. Good typography enhances readability and helps convey the website’s message effectively.

4. Navigation: Easy navigation is key to a user-friendly website. Clear and intuitive menus and links should help users find the information they need quickly and easily.

5. Responsive Design: Websites should be designed to be responsive, meaning they adapt to different screen sizes and devices (e.g., desktops, tablets, smartphones). This ensures a consistent user experience across platforms.

6. Images and Media: High-quality images and multimedia elements can enhance the visual appeal of a website. However, they should be optimized for fast loading times.

7. Whitespace: Whitespace, or negative space, helps in creating a clean and uncluttered design. It improves readability and guides the user’s focus.

8. Consistency: Maintain consistency in design elements like fonts, colors, and navigation throughout the website. This creates a cohesive and professional look.

9. User Experience (UX) Design: UX design focuses on creating a positive experience for users. It involves understanding user behavior and designing with their needs and preferences in mind.

10. Accessibility: Ensure that the website is accessible to all users, including those with disabilities. Use proper HTML markup, alt text for images, and consider factors like keyboard navigation.

11. Loading Speed: Fast loading times are crucial for retaining visitors. Optimize images and minimize unnecessary scripts or large files that could slow down the site.

12. SEO (Search Engine Optimization: Incorporate SEO best practices into the design to improve the website’s visibility on search engines. This includes using relevant keywords, proper meta tags, and structuring content effectively.

13. **Security** : Implement security measures to protect the website from potential threats and vulnerabilities.

14. Testing: Thoroughly test the website on different browsers and devices to ensure compatibility and functionality. Usability testing can help identify and address any issues.

15. Content Management: Consider the content management system (CMS) you’ll use to update and maintain the website. Popular CMS options include WordPress, Drupal, and Joomla.

Web design is an evolving field, and trends change over time. It’s important to stay updated with current design trends and technologies to create modern and effective websites. Additionally, collaborating with a web designer or design team can be valuable for creating a visually appealing and user-friendly website that meets your specific goals and requirements.