Building your first web page with HTML and CSS

web

Getting the HTML elements in place

Ok, let's get writting some HTML. In the following video, I take you through writing your first HTML tags. I'll also talk about using Codepen. Codepen is an online code editor, learning environment, and community for web development. We will be using it a lot, so sign up for an account right now. So, head over to Codepen and make your first pen.

The design we will be working with is a very simple news article page. I created the mock-up in Adobe XD. You can see the preview here.

https://youtu.be/TzelmqDK5B4


Targeting and styling the elements with CSS

In the next video, we style the HTML element with CSS rules. A CSS style rule targets a particular HTML element and applies chosen values to various properties. For example, we could target all <p> elements and the value of red to the paragraph color property.

p {color: red;}

https://youtu.be/7MQsi8OB4oc


Here is a link to the logo used in this demo.

Here is the completed project including all HTML elements and CSS style rules.


Previous
Previous

Sketch to browser: Mapping the web design project process

Next
Next

Writing your first HTML webpage: What are HTML elements and tags?