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 and and finally enabled me to built, very basic website. HTML CSS In this post i am going to share the I learned, resources I followed, which are 100% free to use. TOPICS At the beginning i asked below four 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 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 / ). So lets get started, I am sure you will enjoy the learning. full-stack HTML CSS 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 = https://code.visualstudio.com/download . . SUBLIME = https://www.sublimetext.com/3 :  - 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. HTML 5 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. CSS 3 : - FROM THE INDIVIDUAL SKILLS WHAT ARE THE KEY TOPICS MOST IMPORTANT TO START ? In 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 ? HTML-5 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 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. CSS3 / Basic: 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 : { } 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. CSS 3 / Advance :- 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- You tube videos / Channels. Websites. Name of the Books. 1) You tube Channel Name & my favorite videos : Below are the amazing you-tube channels which i found very useful. :- . Channel Name Traversy media :- HTML crash course; https://www.youtube.com/watch?v=UB1O30fR-EE : - CSS crash course; https://www.youtube.com/watch?v=yfoY53QXEnI&t=7s : - CSS Flex box ; https://www.youtube.com/watch?v=JJSoEo8JSnc :- CSS Grid Layout ; https://www.youtube.com/watch?v=jV8B24rSN5o&t=2s :- ; Channel Name Le Wagon :- Building layouts with flexbox and CSS grids https://www.youtube.com/watch?v=2GxAElWKaAo&list=LLvAlT2J4AWAsoXGpDwEYjLw&index=19&t=1506s :- Build your website with HTML & CSS https://www.youtube.com/watch?v=-9ZheXYOMeM&list=LLvAlT2J4AWAsoXGpDwEYjLw&index=16 2) Websites :- https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://www.w3schools.com/ https://www.w3schools.com/css/default.asp 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 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 ; i am welcoming all of you to join with me on my social media account. Together all we will learn and grow. portfolio-website

Building Your First Website In Under 30 Days

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps