Note: I have originally written this post on Coder Bootcamp for absolute beginners and is a part of the free full-stack curriculum. This post guides you on what to learn first to build your first webpage and expects a self-learning approach. It uses handpicked Mozilla documentation references more.
About the project
The foundations project helps you get started with the front-end. You will know about browser technologies and how to build websites with HTML and CSS. It is better to work on a simple project like your resume or your family details. You can check some of the project ideas here.
End goal
You should build web pages with heading, paragraph and list tags and style them using the above rules. Add images to your pages and also link two or more different HTML pages with anchor tags. Get clear understanding of CSS class which is the base for Bootstrap project.
Theory
A little bit of background to understand websites and browser technologies.
Introduction to web and web pages
The World Wide Web is a collection of digital pages where you can browse the pages and its read contents. You can also hop from one page to another. The collection of these digital pages as a set, identified by a root URL is called a website. If it can handle the data dynamically, we call it a web app.
Browsers
Browsers are a piece of software to access the websites using the World Wide Web. As a developer, you are responsible to build those websites and you need to build them in a way browsers can understand. Luckily browsers can understand only three things.
Markup with HTML
The first one is the markup. How to render elements on the webpage? When we write on a white paper, we write some text, we draw figures, diagram etc. If we have to translate the same white paper digitally we need to render the text and diagrams digitally. There are many ways to render elements digitally but we can render for browsers with the help a markup language called HTML. HTML stands for HyperText Markup Language and contains tags to render different kinds of elements like text, images, audio, video etc. Browsers can understand what a page is made up of using HTML.
Styling with CSS
The second thing is the styling of the elements. When we are writing on a paper we add borders, we increase the text size for headings, we make the letters bold to emphasize and sometimes small to de-emphasize and also add colours to bring more appearance. We can do the same thing to the elements of the browser but we need a way to tell the browser what kind of styling we need for an element like font size, font colour etc. That is done with CSS - Cascading Style Sheet. It holds the styling rules for HTML elements.
Interactivity with JS
The third thing is the interactivity of the page. We cannot make any dynamic interactions on the white paper nor change the content dynamically whenever needed based on some user interaction. But we can do that on digital pages i.e. HTML pages. Browsers can understand what interactivity is needed for HTML and CSS elements using a scripting language called JavaScript. Changing the colour of the button when clicked, showing the menu when we hover the mouse of a link is done using JS. We can do a lot more with JS which we will cover in future lessons.
Prerequisites
You need a browser to see the webpages and a code editor to make the webpages. Refer to this post for more details.
Milestones
These are the milestones you need to achieve for this foundations project.
HTML
Draw a layout. Spark your imagination and decide on how your website should look like and what to put inside a page like headings, text and images. Use a pencil/pen and paper to sketch some layouts. Read more.
Create a project folder. Always create a new folder for every project. I recommend you keep all your project folders, software installations in a drive other than the OS drive. Read more about the folder and file structure.
Create HTML files. Open the project folder in VS Code or Sublime Text and create a new file called index.html. It is better to create the files from the editor itself. The HTML file is just like a text file. The text file has .txt as the extension and HTML file has .html as the file extension.
Understand the structure of the HTML. HTML is treated by the browsers as a document and it is generally divided into two major sections. The head block and the body block. Both blocks are created using the head and body tags. We include the meta tags, document title, external, internal styles and scripts in the head block. The content goes into the body block. Read more about the structure and anatomy of tags
-
Learn tags to render these elements.
Links HTML pages with the anchor tag. The heart of the web is to move from one page to the other page. The anchor tag takes us from one page to the other page. The href part takes care of the destination file. Read more
CSS
Style the elements. We will make the HTML elements beautiful with the CSS. Read what CSS can do.
Attach CSS. We can attach the styles to HTML elements in three different ways. Internal - styling rules written inside the style tag with selectors, External - all the styling rules in a separate file and referencing the file in the HTML - and Inline - rules written inside the opening tag of an element. Each has its precedence and advantages. Know how can you attach the CSS.
Select elements and apply styling rules. We need to select the element(s) first to apply the rules. Selecting is very important in CSS. Know how can you select the elements.
ID and Class. Apply the styles by selecting the element specifically with an ID and apply common styles to many elements with a Class. Read how to select with ID and Class.
-
Practice the following rules and use them to style the webpages.
Top comments (0)