Hi developers! I am Syed Mazhar Ali Raza pursuing BTech in Electronics and Communications from IP University, Delhi. I am very passionate about coding, but I am an absolute beginner. I have spent the last few months learning about various opportunities as a coder. After a lot of research, I chose web development to be my first big goal for 2021.
Motive to write this blog:
I will keep a daily update of what I learned to get closer to my goal and try to be qualified enough to crack any contest, program, etc.
This challenge will make a better myself in the next few months.
DAY 1:
Today I learned the basics of web development by watching roadmap to web dev' videos. Here is what I learned:
Full-stack web development consists of front end and back end development.
Front end development:
The part of a website that the user interacts with directly is termed as the front end. It is also referred to as the ‘client-side’ of the application. It includes everything that users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and navigation menu. HTML, CSS, and JavaScript are the languages used for Front End development
Front end Languages:
- HTML: Used to build skeleton or the body of the website
- CSS: Used for designing or styling the website. It makes it more presentable.
- JAVASCRIPT: Used to add logic to a website, acts as its brain.
Note: Learning all the above languages, 100% won't be ideal. So I will learn 80% HTML, 60% CSS, and 50% javascript. Then work on projects, and if at some instance a requirement of additional info of any language arises, then it will be learned alongside.
Back end development:
Backend Dev' is the server-side of the website. It stores and arranges data and also makes sure everything on the client-side of the website works fine. It is the part of the website that you cannot see and interact with.
Back end technologies:
there are numerous languages and software for backend development, such as python, PHP, CPP, etc... I will focus on:
- Node.JS: Node.js is an open-source runtime environment/platform for executing JavaScript code to write Server-Side scripts.
- MongoDB: MongoDB is a document database with the scalability and flexibility you want with the querying and indexing you need. The data objects are stored as separate documents inside a collection instead of storing them in a traditional relational database's columns and rows.
Firstly, I installed VSCode and grasped a few required basics of it. Also got wise to the fact that we can also use notepad for writing an HTML code, but using an IDE makes it more comfortable and user friendly and comes very handy as you start writing big programs.
DAY 2:
- Today, I made the first move by creating an HTML file then understood the boilerplate code (standardised or the most basic template of HTML code), which consists of:
<!DOCTYPE html> declaration defines to the webpage that this document is an HTML5 document.
<HTML> element is the root element of an HTML page
<head> element contains meta information about the HTML page
<title> element specifies a title for the HTML page (which is shown in the browser's title bar or the page's tab)
<body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Added comments in the code and understood the very basics of Meta tag (included in head tag). It provides information about the webpage and the data is used by the web browser and search engine for SEO (increases web traffic on the website). Some types of metadata are description, keywords, author etc.
Understood basic tags like strong(bold), embedded(italics), division, line break(moving on to the next line), horizontal rule, Heading, paragraph,span etc.
Learned how to add links in HTML using anchor tag and its attribute target="_blank" to open the link in a new tab.
Studied tags for inserting images in a webpage and an amazing website that provides copyright-free images(Also used its attributes like width and height, but styling is never recommended in HTML; it should be performed using CSS).
DAY 3:
- Inserted lists(ordered and unordered) and tables in HTML and types of bullets and numbering that can be used in a list.
- Used Form tag to create a form with various types of entries like text, email, date, number, checkbox, radio, submit, reset, textarea, etc.
- Used Label tag and and also select-option tags to create a dropdown list.
Learned about block and inline elements:
Block elements: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Div, hr, p, etc. are some examples of block elements.
Inline elements: An inline element does not start on a new line, and it only takes up as much width as necessary. <a>, <span>, <select>, etc., are some examples of inline elements.Gained an understanding of ids and classes how they are different from each other.
Learned about HTML entities(used to display reserved characters in HTML) and used a few of them to get the point of it.
The last topic of the HTML course was Semantic Tags:
A semantic tag clearly describes the meaning of specific elements to both the browser and the developer.
Example: Many web sites contain HTML code like: div id="nav" div class="header" div id="footer" to indicate navigation, header, and footer. Rather than defining each element, HTML has predefined tags that clearly defines its contect. Eg: <footer>, <header>, <nav>, <section>, <summary>, etc.
2-3 DAYS:
Got Caught in the deadly trap of procrastination, and doing college assignments. (Really embarrassing T_T).
Since college work is overwhelming these days, I decided to learn at least a little, but never take a break from it.
DAY 4:
Started off by taking a quick glance of all HTML files I made, and then jumped into CSS tutorials.
Learned how HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. Firstly I will concentrate on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific type of element.
For each selector, there are properties inside curly brackets, which simply take the form of words such as color, font-weight or background-color.
A value is given to the property following a colon (NOT an “equals” sign). Semi-colons are used to separate the properties.
Then learned the three ways to insert a styling sheet:
- Inline: An inline style may be used to apply a unique style for a single element.
- Internal: An internal style sheet may be used if one single HTML page has a unique style.
- External: With an external style sheet, you can change the look of an entire website by changing just one file! (.css file)
Then I learned basic font tags in CSS and their use such as font-family, font-size, font-weight.
I further moved to different ways to add colour in CSS which are Hex. Colour code(ex. C35F453), RGB Colour code [ex. rgb(255, 0, 0)] and by name (ex. red, violet).
DAY 5:
firstly, I went through CSS tags like height, width, background, box model, borders, margins, padding, etc.
Then I learned using Google developer's tool which was very fun and helpful. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. By right-clicking on the webpage and choosing to inspect option, one can access the dev tools. I checked out different tabs such as inspect, sources, network, etc.
By far I have learned the most basics of HTML and CSS, so I made the online grocery store web page using all tags that I have learned. It took a lot of time(1-2 hrs) because I was constantly experiencing minor errors, but eventually, I was getting better at it.
Making a project and using all tags learned by far is very helpful.
progress ongoing. Cannot blog because too much of work(took part in an open-source program, college exams, working on a project).
Top comments (8)
Happy new year! You're making some good progress already, and I like your thinking about not needing to know everything 100%.
From experience, I've found it useful to first learn some basics, and then my questions in Google fill in the rest.
There's a lot of frameworks, libraries and tools around, but I think it's a good idea to (mostly) focus on HTML, CSS and JavaScript without external libraries or frameworks.
I'm now doing a daily challenge in another programming language, and I too had an unproductive day yesterday. Those days don't feel as good, but they definitely count as a step forward.
Best of luck, and happy new year!
Thanks a lot for your kind words :) I feel really encouraged!
Awesome post, and happy new year! I think it's important not to get embarrassed by taking a break — you did some awesome work in the first three days!
The web development landscape keeps changing, but it's always good to understand the very basics. It's also super interesting to hear about your journey — I'm super excited to keep following.
Thanks so much for sharing!
Comments like these are so motivating! I will keep updating and try to keep it more interesting and engaging 😄
Happy New Year! This is a really nice way to present your journey keep it up I look forward to reading more.
I wish you best of luck with your goals!
Wishing you a very happy new year too and thank you for your wishes it means a lot to me!
Great explanation
Thank you 😄