| # Day | Topics |
|---|---|
| 01 | Introduction |
| 02 | DOM(Document Object Model) |
| 03 | |
| 04 |
🧡🧡🧡 HAPPY CODING 🧡🧡🧡
Some of the terminologies you may come across in this challenge:
client, server, web developer, web designer, UI, UX,web development, browser, code editor, command lines,Git, GitHub, Version Control, semantic, accessibility, responsiveness, compatibility, request, response, HTML, CSS, JavaScript, viewport, blocking element, non-blocking element,tag, opening tag, closing tag, self closing tag, attribute, style, script, property, value, render, comment, HTTP,path, URL, absolute path, relative path, landing page, single page application, hero image, HTML element, content, SEO, feature image, carousel, sidebar, website, web application
Congratulations on deciding to participate in 30 days of HTML challenge. In this challenge you will learn everything you need to know about HTML, and in general, the foundation of web development. In the end of the challenge, you will get a 30DaysOfHTML challenge completion certificate. In case you need help or if you would like to help others you may join the telegram group.
A 30DaysOfHTML challenge is a complete guide for both beginners and advanced developers. Welcome to 30DaysOfHTM! HTML is the build-block of the web. There is no website without HTML, therefore, to develop a website it requires an HTML.
In this step by step HTML challenge, you will learn HTML, the standard markup language for the web. HTML is used to build the skeleton or outline of any website. The skeleton or outline of the website is styled(beautified) by CSS(Cascading Style Sheet). JavaScript (JS) can make a website interactive and dynamic. HTML, CSS and JS are the core technologies to build websites and these are the skills required to be a web developer. This challenge will focus on HTML but we will use little CSS to make some HTML concepts more clear to readers. A 30DaysOfCSS will be a follow up challenge after 30DaysOfHTML.
Look the following picture to understand the purpose of HTML, CSS and JavaScript on a website.
The image has been taken from medium article, source.
By the end of the challenge:
- You will have a clear understanding of how the web works
- You will be able to develop a static website with HTML and little CSS
- You will know what to do next to become a web developer
The main goal of this challenge is to teach the core building block of the web that is HTML. Therefore, let's get started by understanding some the terminologies in this field such as web development, front end development, back end development, and full-stack.
The minimum requirement to follow challenge:
- Motivation
- Computer
- Internet
Web development is a process of designing, building, testing, and maintaining a website which ranges a simple single page static website to a complex full-stack applications. This field has two broad categories.
- Frontend
- Backend
A front end(client-side) is a website that a user can see and interact with. It can be also called a client-side because it is the part that the user(client) can see and interact. Therefore, anything we see on any website when we navigate on the internet is part of the front end and it includes the colors, fonts, buttons, images, videos, audios and any content on the website. The technologies that uses to build front end part of a website are called front end technologies. The core technologies to build a front end are:
- HTML
- CSS
- JavaScript
There are hundreds of JavaScript that allows developing a dynamic web applications. Currently, the three most popular JavaScript libraries are:
- React
- Vue
- Angular
Backed(Server-side) development refers to the activities that happens behind the scene. Backend development consists of backend programming language and databases. The backend code interacts with frontend and the data base using a backend programming language that could be (Node.js, Python, Ruby, PHP, etc). Look at the following figure to understand the interaction between client. A client send a request to the backend and the backend return the response(The response could be an HTML page, txt, image, or any other data)
It is another buzzword that no one agrees on the definition. You can understand Full-stack web development as a sum of frontend, backend, testing, and including some other technologies. I believe now you have a big picture of web development.
By now you should have clear understanding how the web works based on the information you get on the above two sections. If you want to know more you also read this article.
Tools you need as a web developer
- Motivation
- Computer
- Internet: To access
- Browser: allows to render HTML code to a human readable output(website pages). Examples of browsers(Chrome, Firefox, IE, Safari, Opera, Brave, etc)
- Design Software: allow to create a design or a prototype of the website. Examples of (Figma, Adobe XD, etc)
- Code Editor: allows to write code. For example(Visual Studio Code, Atom, Sublime Text, Bracket, etc)
- Git(Version Control Software): allows to manage different version of our code
Before we start developing a website, it is good to recall the common parts(components) of a website. In the next section, we will cover this.
A website can have a couple of features or several features. There is no guideline that tells what a website should have but most of the time a website has the following common parts(components). For instance, if you look at the first ever created website, it has just one page and several links. However, since 1991 to today, for the last 30 years HTML has been evolving and with only HTML it is possible to develop a decent static website.
Let's see the most common parts(components) of a website:
- Website Logo
- Header/Banner
- Navigation Bar/Menu Bar
- Carousel
- Sections
- Forms
- Buttons
- Links
- Images
- Videos
- Audios
- Social Links
- Footer
If you agree that these are components of a website, then you will create these components to build a website. Actually, once you create a certain feature it can be used in different projects(reusable). Therefore, whenever you create a certain part try to consider maintainability and reusability. You don't have to have all the mentioned above features when you develop a website. There is no strict guidelines what to have on your website.
Now, let's download visual studio code Visual Studio Code. I usually use Google chrome for development and I recommend for everyone.
