Have you ever thought to start building your first website? Are you trying to acquire a new skills which shows your creativity? or are you feeling curious, how tech developers and entrepreneurs are building modern web apps and changing the world ?
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 4 questions to simplify my journey .
- What I want ?
- What are the skills I need ?
- From the individual skills what are the key topics are most important to start?
- Resources to learn all above topics without spending any money, except my internet bill.
WHAT I WANT ?
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.
WHAT ARE THE SKILLS I NEED ?
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 .
- 5 Prerequisites
- No previous coding experience or technical background / No CS degree.
- An extreme hunger to learn and be curious.
- Ready to stay awake till late night until you finish.
- A mental approach to never give-up.
- Code editor upon your choice to write scripts or code .(you can download for free any famous code editors such as VS CODE / SUBLIME test editor. links are below :-
- VS-CODE
- SUBLIME
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.
FROM THE INDIVIDUAL SKILLS WHAT ARE THE KEY TOPICS MOST IMPORTANT TO START ?
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 upgraded 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 CSS 3 / 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 code : Element with class <div class=”any-reference-name”>
.any-reference-name : { }
Example 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.
Resources to learn
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 videos / Channels.
2) Websites.
3 ) Name of the Books.
SO LETS START OUR JOURNEY
- 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
Building layouts with flexbox and CSS grids
Build your website with HTML & CSS
2.Websites :-
3 ) Name of the Books :-
These are the three books below i have found in last one month journey
- Adrian W. West — Practical Web Design for Absolute Beginners-Apress (2016) .
- Ben Frain — Responsive Web Design with HTML5 and CSS3-Packt Publishing (2015) .
- Benjamin LaGrone — HTML5 and CSS3 Responsive Web Design Cookbook .
After month of learning in April -2020 , covered above all topics, finally i had build this very basic “Tribute page of Sir Alfred Nobel.”
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 perfection.
I always believe- “My first website will be bad , but 1000th will be great”. So i will not stop trying and chase for improvement.
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.
