Please Help About web design

programming web dev
1

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

1 Like
2

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
3

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

2 Likes
6

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

1 Like
7

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

2 Likes
9

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.

10

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

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

13

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

2 Likes
14

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

15

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

19

really interesting and easy to understand, thanks for sharing

23

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
26

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.

27

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

You can find a lot of them at:

31
  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
34

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.