Do It Yourself – Tutorials – How to Make Your Own Website Tutorial – Module 5: How To Make Your Web Pages Look Cool

by | Feb 17, 2021 | 0 comments

Do It Yourself – Tutorials – How to Make Your Own Website Tutorial – Module 5: How To Make Your Web Pages Look Cool

by | Feb 17, 2021 | Do It Yourself - Build Your Own Website | 0 comments

Do It Yourself – Website Tutorials



+ Module 5:
http://www.learn-to-code-london.co.uk/blog/2017/02/how-to-make-your-web-pages-look-cool/

+ FREE Full Tutorial:
http://www.learn-to-code-london.co.uk/blog/free-online-coding-tutorials/

+ Learn To Code London:
http://www.learn-to-code-london.co.uk/

This is the fifth module in the How to Make Your Own Website Tutorial.

Last time, we talked about “the secret” that most developers won’t tell you! We saw an example how to discover new HTML tags and plug them into your web pages. In this module, I will show you how to make your web pages look cool!

The Basics Of Web Programming

So far we have learnt the basics of HTML, the most common tags and got a very simple web page up and running locally (on our machine or using CodePen). But there is more to web programming than just HTML, in fact there are 3 fundamental web technologies that work together to bring web pages to life. All 3 are required to create beautiful websites.

1. HTML

HTML provides the structure to our web pages. You can think of HTML as a noun! This is the content we want to display in our web page. We cover this already in previous modules.

2. CSS

Cascading Style Sheets (CSS) provides the styling for our web pages. Think of CSS as a adjective. It describes the noun. CSS is how we want to display our content in our web page. This is what we will focus on in this module.

3. JS

Java Script (JS) is the most advanced out of the 3 technologies and provides the dynamic elements in a web page. Think of JS as a verb which describes action! JS allows our web pages to be more dynamic as opposed to static content. We will cover JS in a future module.

HTML + CSS +JS = Web Page

Introduction to CSS

CSS3

CSS describes the presentation of a web page or more commonly multiple web pages. This separation of data or content from presentation is a very common programming concept that you will find in most languages. It makes sense to have this separation of concerns for a number of reasons.

CSS is a completely different language to HTML with it’s own syntax. We are currently on CSS version 3 which is abbreviated to CSS3.

Why Separate CSS from HTML?

Allows HTML to focus just on the content and leave the formatting and styling to CSS. This helps keep HTML files small and concise.
We can use a single CSS to define the style of a whole web site not just one web page! So CSS allows us to scale up.
A web site maybe made up of dozens or even hundreds of individual web pages, imagine if the the style was defined separately in each web page and then we decided we wanted to change the font size or colour for the whole site? It would be a massive job! But with CSS we would just need to change it in one place.

source

0 Comments

Submit a Comment

What Our Clients Are Saying

JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing...

Dave, JB Consulting

Dieno Digital Marketing Services
5
2018-04-27T01:06:57+00:00

Dave, JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing with him!

Kelicor Logistics

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my...

Colin, Kelicor Logistics Solutions

Dieno Digital Marketing Services
5
2018-04-27T01:07:34+00:00

Colin, Kelicor Logistics Solutions

Leland created my website for my new venture. I found his service to be excellent,was always available to answer my questions and was always prepared to go the extra mile, in order to ensure my website conveyed it's intended message,, And the cherry on top was it was most affordable. Would definitely recommend. Thanks Leland !

McNeney McNeney Spieker LLP

Dieno Digital has been providing our firm with what we like to call the Royal Package in customer service for...

M, McNeney McNeney Spieker LLP

Dieno Digital Marketing Services
5
2018-04-27T01:08:19+00:00

M, McNeney McNeney Spieker LLP

Dieno Digital has been providing our firm with what we like to call the Royal Package in customer service for over 3 years now. The knowledge and skills Leland brings to the table has increased our business and streamlined our social media platform. Our requests are always dealt with in a timely manner and we are always given options and alternatives to better reach potential new clients. We highly recommend Dieno Digital to increase your life social media presence.

Vancity Dietitians

Leland was speedy and efficient in working with our website. Leland knows how picky we can be and he handled...

Raman, Vancity Dietitians

Dieno Digital Marketing Services
5
2018-04-27T01:09:04+00:00

Raman, Vancity Dietitians

Leland was speedy and efficient in working with our website. Leland knows how picky we can be and he handled all change requests with patience! Furthermore, any time we had questions, there was no hesitation for Leland to reply with a thoughtful answer in a timely manner. Thanks for the great work!
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>