1. How to create a payment page with paystack

2. How to create a webpage with HTML

3. How to link 2 HTML pages together

4. How to Create a Form Page with Google Forms

5. How to create a form page with HTML _1

6. How to buy a domain

7. How to buy hosting

8. How to use CPanel

9. How to Install WordPress

10. How to Plan a Website

11. How to create a free website with free domain

Part 1. How to design a website



https://www.youtube.com/watch?v=ttTCHPkH5yQ

Part 2: how to design a website


https://www.youtube.com/watch?v=BRYQRCcrMSM

Web Design Terminologies


Vocabulary for Web Design
Web design often involves overlap between disciplines, so we’ve included vocabulary that deals with branding, composition, color and typography.Web design often involves overlap between disciplines, so we’ve included vocabulary that deals with branding, composition, color and typography.
Knowing how to speak the language of web design will help you ask better questions, communicate more effectively and produce a better final product. You can also notice how these terms are implemented across a wide variety of websites (for better or worse). Because web design is a holistic process, web designers are trained to see the bigger picture and also the details.

Learn more about web terminology in the new ebook:
65 Web Design Terms You Should Know
Download now
Branding Terms
Branding is the communication of an organization’s message, values and experience. Everything from a company’s logo and identifiable design elements to the “gut feeling” people get about an organization driver of the why behind a website. When it comes to web design, you have the opportunity to create experiences that reinforce the company’s brand.

1. Identity: The entire visual representation of your brand, can include logo, color, typography, imagery, voice, etc. Not just a logo.
2. Lettermark/Wordmark/Logotype: A type of logo made with stylized letters (IBM) or words (Coca-Cola)
3. Brandmark: A type of Logo made with a graphical representation (Apple, Target)
4. Icon: A simplified rendering of an object or concept. A logo and an icon are not the same thing.
5. Design System: A repository of reusable digital components that combine to form a website.
6. Brand Guide: A visual and philosophical reference for a brand’s color, personality and voice.
User Experience Terms
User experience encompasses how people interact and engage with a website. User experience influences how we direct users through the site and lead them to specific end goals. It encompasses many elements of design and development including how something looks and works. Make functionality decisions with the end-user in mind, not your own preference or the tools you are using.

7. Persona: Fictional character that represents a primary user of your site/product. Usually, personas are very well-developed because they should represent real people with real motivations.
8. Wireframe: Low-fidelity layout of a site, representation of general block-level content and interactive elements.
9. Mockup: High-fidelity layout of a site, representation of final color, typography, imagery, etc.
10. Prototype: Interactive version of a site, may not be built with final code.
11. CTA: Call to action, usually paired with a button.
12. Conversion: When a user takes a specific desired action.
13. Landing Page: Single page optimized for a specific audience or search engine result.
14. Usability: How real users actually interact with your site, usually tested by observing a series of guided tasks.
User Interface Terms
User interface (UX, UI) includes elements on the page with which the user interacts. Your user interface does impact your user experience, although they aren’t the same thing. Don’t make your users think; Design an intuitive interface that takes advantage of modern patterns.

15. Breadcrumb: Hierarchical content links.
16. Menu: Primary navigation area, sometimes with a dropdown or flyout of sub-menu items.
17. Filter: Pre-defined elements that allow narrowing down of visible content by various taxonomies (taxonomies are a fancy way of saying categories).
18. Search: Open-ended input that queries content and returns a list of results.
19. Slider: A trendy, animated way of displaying information that you probably shouldn’t use. 🙂
Composition Terms
Composition refers to how the content and aesthetics of a website work together. Each element on web page should feel like it belongs within the website layout, not added as an afterthought.

20. Balance: Using similar or complementary design elements to make the composition feel equal.
21. Repetition: Using recurring elements to reinforce patterns or serve as familiar visual cues.
22. Whitespace: How much “breathing room” does each element have?
23. Grid: Underlying structure to a design that determines how everything lays out.
24. Rule of Thirds: A visual concept that states the most pleasing focal points are at the intersection of three rows and columns.
Hierarchy Terms
Hierarchy involves the relative importance of visibility of pieces of information. Visual hierarchy is usually a collection of small details such as typography, color, proximity and balance. Having good hierarchy helps with the scannability of information and helps users prioritize information on the page by importance. Hierarchy also helps direct users through a website. Decisions made about the styling and position of elements have a huge impact on website experience.

25. Scale: How large or small are the elements on the page relative to each other?
26. Proximity/Alignment: Which elements on the page are associated with each other?
27. Focal Point: The place on the page to which we are directing the user’s attention
28. Semantic Markup: Using HTML elements correctly to imply hierarchy and usage within the content.
Typography Terms
Typography is the aesthetic decisions about the arrangement of type. Size, spacing, alignment, column size and relative sizing of type have a big impact on user experience as well as just aesthetics. Typographic choices should be deliberate, both reinforcing big-picture systems and being aesthetically appealing and easy to read/understand.

29. font (typeface): Collection of letters & glyphs/symbols
30. font-family: Which typeface are you using?
31. font-size: How big/small is it?
32. font-weight: How heavy/light is it?
33. font-style: Italic, underline, strike
34. line-height (leading): How much space between lines?
35. letter-spacing (tracking): Adjusting the spacing between groups of letters/blocks of text.
36. kerning: The spacing between individual letters.
37. text-decoration: Is the text underlined or does it have additional styling?
38. serif/sans serif: Serif fonts have an extra decorative stroke or line to the end of letters while a Sans Serif font is without.
Color Terms
Color encompasses aesthetic decisions about the use of color in a composition. Color can be used to evoke emotion, emphasis, divide or group elements; color can create visual unity and balance. Color is usually related to branding. Color choices should be deliberate and used consistently across the entire website.

39. HEX: On websites, the hexadecimal color, a six digit number used to represent color in HTML/CSS.
40. RGB: Additive color model used for screens, red/green/blue light values combining to form colors.
41. CMYK: For printing, subtractive color model used for ink, cyan/magenta/yellow/black ink combining to form colors.
42. Pantone/spot color: Specific custom inks of a certain color. Big brands usually have their own custom Pantone color.
43. Hue: Where is it on the color spectrum?
44. Saturation: How vivid or dull is the color?
45. Contrast: How much does it stand out?
46. Opacity: Solid or transparent?
Imagery Terms
Imagery terms include the visual and graphical elements of a website. Imagery is important for communicating your message and connecting with your audience. However, when imagery is used improperly, it can add extra bulk to a website’s loading time while not doing much for user experience. Use imagery to support your messaging; Use the right image format for the content.

47. Vector: Images that are made out of math (SVG, EPS).
48. Raster: Images that are made out of pixels (JPG, TIFF, PNG, GIF).
49. Resolution: How many pixels a raster images has (e.g. 800×600 or 2400×1200). A higher resolution will typically be a larger size, but higher detail.
50. Compression: Optimization (large/small file size).
51. JPG/JPEG: Best for photography and detailed images.
52. PNG: Best for graphics, simple color, and images with transparency.
53. GIF: Best for low detail graphics or animations.
54. TIFF: Best for print quality, not suited for screen display.
55. SVG: A vector image format suitable for display on the web, best for graphics & logos.
Web Terminology Terms
Web terminology terms encompass general vocabulary when designing for the web. Web designers don’t just know about design, they also understand the technology they’re designing for.

56. Heading: Titles and subtitles, written semantically with h1 – h6 tags. Useful for organizing information into a hierarchy and are utilized by search engines and screen readers.
57. Body Copy/Body Text: The primary written content, usually paragraphs, lists, quotes, etc.
58. Hero: The main image/graphic on a homepage or landing page, usually with a primary call to action.
59. Single-Scroll: A website where a majority of content is contained within a single page
60. Responsive Design: A design that is not fixed, but adapts to the user’s screen size and/or device.
61. Breakpoint: A specific point (e.g. width) where a website’s content/layout will change to fit a different interface.
62. Accessible: Ability of a website to be used by all audiences, including impaired vision, hearing, or motor function, through assistive technology or standard navigation.
63. Front-End: In general, dealing with code that runs in a browser and controls what is seen and interacted with.
64. Back-End: In general, dealing with code that runs on a server and controls the content and logic.
65. CMS: Content management system (like WordPress).

This is our website. Just did it all over again about 2 hours ago. Still improving. I just relaunched it today.

Good morning everyone

https://Performance.com.ng

HEREUNDER LISTED ARE THINGS THAT WE HAVE COVERED SINCE THE BEGINNING OF THIS CLASS

1. How to create web pages -

2. What is the difference between web pages and websites

3. How to create a simple webpage with HTML
<html><head><title><body><H1> <h2> <br> <hr> <img src> <a href>...

4. Using notepad++ code editor to create a simple html webpage/intro to programming

5. How to create a free payment web page with Paystack.

6. How to create a free form page with Google form

7. How to link two web pages together

8. How to create a free website with free domain name

9. How to research and buy domain

10. How to buy hosting

11. How TO Log in and use CPANEL

12. How to install wordpress (Content Management System)

13. How to install wordpress themes to improve appearance of your website

14. How to install wordpress Plug ins : elementor, ninja forms, download monitor, wp statistics.

15. How to create header and footer menu

16. How to create web pages in WordPress : welcome page, about, FAQ page, privacy policy page, terms and conditions page.

17. How to create blog categories

18. How to create blog posts

19. How to create author's profile on your blog post.


Thank you.

- Mayowa Lala


Invite others into the group.




https://www.youtube.com/watch?v=WzwCwZsMbcQ

How to create a webpage with HTMl


https://www.youtube.com/watch?v=inwqYNS1Y38

I learned from my boss : Dr Tope fasua, that if you keep waiting for the perfect system, you'll start nothing. And you'll wait forever. The trick is to start from where you are with what what you have, and keep improving the system. Perfection is the goal. Keep moving. Don't stop.

This lesson has really helped me.


I need critiques and peer review. So let's slug it out there.

If you have been following me since the start of this program. I said I want to make digital skills available for people.

HEREUNDER LISTED ARE THINGS THAT WE HAVE COVERED SINCE THE BEGINNING OF THIS CLASS

1. How to create web pages -

2. What is the difference between web pages and websites

3. How to create a simple webpage with HTML
<html><head><title><body><H1> <h2> <br> <hr> <img src> <a href>...

4. Using notepad++ code editor to create a simple html webpage/intro to programming

5. How to create a free payment web page with Paystack.

6. How to create a free form page with Google form

7. How to link two web pages together

8. How to create a free website with free domain name

9. How to research and buy domain

10. How to buy hosting

11. How TO Log in and use CPANEL

12. How to install wordpress (Content Management System)

13. How to install wordpress themes to improve appearance of your website

14. How to install wordpress Plug ins : elementor, ninja forms, download monitor, wp statistics.

15. How to create header and footer menu

16. How to create web pages in WordPress : welcome page, about, FAQ page, privacy policy page, terms and conditions page.

17. How to create blog categories

18. How to create blog posts

19. How to create author's profile on your blog post.

Now. I have 16 questions ready for you in the assessment and anyone that wins the 16/16 will get a gift of free access into my packaged business programs and materials...


https://forms.gle/kXiLxSTPS1EkFPko7

Enroll in HPTC Website Design & Development Masterclass

A 6weeks Private Coaching Program where you will learn, design and code 3 guided projects in WordPress, HTML5, CSS, Javascript, Ajax

Project 1: E-commerce website
Project 2: Logistics website
Project 3: A Restaurant website.

From anywhere at anytime.