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

Travco RV

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really...

Rod, Travco-Rv.com

Dieno Digital Marketing Services
5
2018-04-27T20:16:51+00:00

Rod, Travco-Rv.com

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really takes care of our companies marketing with his expertise and has a lot of great ideas. We are very fortunate to  have him helping us with fresh new ideas.

British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all...

Tara, British Columbia Coalition Of Motorcyclists

Dieno Digital Marketing Services
5
2018-04-27T22:05:28+00:00

Tara, British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all the updates  to our website. Leland is always very responsive and able to answer all of questions or fix any issues in no time at all. We look forward to continuing to expanding and broadening our website with Dieno Digital.

Amplifylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to...

Rob - Amplylife.ca

Dieno Digital Marketing Services
5
2018-05-03T19:49:40+00:00

Rob - Amplylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to bring a high level of creativity, energy, expertise and professionalism to the project for their digital marketing needs. We are so excited for the chance to work more with Leland and Dieno Digital.

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.
5
4
Dieno Digital Marketing Services