Building Your First Website In Under 30 Days

If all of your above questions makes you curious, excited then you should start learning

web-development

right now.

I felt always curios how modern amazing web pages are being created and how modern web applications are being built? All of my curiosity takes me to start learning

HTML

and

CSS

and finally enabled me to built, very basic website.

In this post i am going to share the TOPICS I learned, resources I followed, which are 100% free to use.

At the beginning i asked below four questions to simplify my journey .

I want to develop a fully functional website and a web application, hence i should follow a

full-stack

web developer path. It is upon reader to set your own target and start chasing them. It is completely personal. But here my topic is to share, how to create a basic website ? or at least reach to point where reader can answer to their question , once they see a stunning website and think, "WOW!! How it is being created?", "What are the processes involved ?" (Majorly can be done through

HTML

/

CSS

). So lets get started, I am sure you will enjoy the learning.

Once again it is purely personal, i personally feel like, learning everything collect all the knowledge that comes in my way, hence i do not want to create any boundaries or restrictions . Readers you have the freedom to go any topic and start exploring .

HTML 5 : - html is a markup language and key component to prepare any website. It is the building block to structure any modern web page. Anything we write with html tag under opening (<>) tag , and closing (</>) tag are going to reflect on the web page.

CSS 3 : - CSS is the cascading styling sheet , which enables html page to design , color and give a stunning look through different Css properties like position, Css transition effects, layouts.

In HTML-5 there are combinations of several tags and their names. Most important is to understand HTML document type, set language, Then knowing how to structure the page ?

Name of few usable tags are = 'html', 'header', 'body', 'footer' , 'nav' , 'section', 'aside', 'image' , 'article' , 'div', 'ul','ol','li', 'a','p','h1','h2','h3','h4' . etc.

HTML elements = Through element tags it is easier to design html pages, in other way, any element tags possibly name with a reference, easily target and later with reference name,block elements designs can be upgrade and enhanced. Block elements work like parent-child relation.For example any main elements design or pattern effects its child elements.To modify child element always with respect to its parent element. Aside HTML elements and reference name will help to integrate with CSS & Java Scripts file.

Example code :

<div class="any reference name">

;

<div id="any reference name">

;

In CSS3 / Basic: If you remember on above section, targeting blocks with reference name will come into effect. Any block element can be design with various css properties such as - height, width, fonts, color, back-ground color, margin, padding, font-size, font-weight, font-style, border which are largely common.

Example CSS code : Element with class

<div class="any-reference-name">

.any-reference-name : { }

Example CSS code : Element with id

<div id="any-reference-name">

#any-reference-name : { }

CSS 3 / Advance :- Once I get comfortable with basics, i moved few advance topics such as css transitioning ,hover effect ,css- layout, css-flexbox, css- grid, css-responsiveness, media-query , em-rem units, css vh-unit , css vw-units , css-gradient style etc and many more.

I always prefer books to learn any topic , through book any advance topic can be learned in depth. It works for me,and i am continue reading everyday but for other individuals opinions or options may vary, readers have freedom to choose any mode.

I will include three modes-

1) You tube Channel Name & my favorite videos :

Below are the amazing you-tube channels which i found very useful.

Channel Name :- Traversy media .

Channel Name :- Le Wagon ;

2) Websites :-

3 ) Name of the Books :-

These are the three books below i have found in last one month journey

After month of learning in April -2020 , covered above all topics, finally i had build this very basic "Tribute page of Sir Alfred Nobel." (https://alfrednobeltribute.netlify.app/ ) .

Please remember feedback has significant importance of improvement. Once I made my website, rapidly i shared the link to 5-7 of my close friends and gathered their opinion . Be optimistic about receiving feedback and keep working on how to improve.

I always believe - "My first website will be bad , but 1000th will be great". So i will not stop trying and chase for perfection .

I have included all possible resources that i have benefited, my experiences that worked for me, hope this will work for you too, those who are trying to acquire front-web development skills. If I can do it, you can do it.

Please check my personal portfolio-website ; i am welcoming all of you to join with me on my social media account. Together all we will learn and grow.