It was 9th of November - an evening a bit warmer than the usual ones for this time of the year. At 3Hub - the Headquarters of Coding Girls Plovdiv a group of enthusiasts were coming together for the first part of the course Coding Fundamentals: HTML &CSS. This course is made up of 3 parts - in each one learning more complicated and different ways to create a website, which fulfills the needs and purpose of the creator. The spots for the course filled up quite fast - in less than 24 hours, so many participants were very excited to learn more on the subject.
For this course our instructor is Todor Nikolov - a first year university student. During this part of Coding Fundamentals: HTML & CSS he and Maria Vladimirova were the perfect duo - explaining the material in great detail and by giving simple examples. The lesson began with everyone introducing themselves - there were around 8-10 participants, most of who didn't have any knowledge on the subject.
We quite figuratively jumped straight into the deep after that. Todor started the lesson by explaining what HTML is. HTML stands for Hypertext Markup Language for creating websites and web applications. The HTML elements are the building block of HTML pages. All kinds of information can be presented and recreated via html elements. They are delineated by tags and are written using angle brackets. When starting a new project, the first thing you need to do is download a program, which lets you write code on it. The one that we used during the lesson is SublimeText. Then when creating a page, you need to save it first under the name index.html. That way you ensure yourself that the page can be open by the Internet browsers and you show them what its purpose is.
Then Todor showed us how to start the code in the index page. The first thing that stand out was the <!DOCTYPE html> tag - it tells the browser that you're going to use HTML5, which is the latest version and then continue with <html>. The whole code that we were writing had to between the tags <html> and </html>.Then Todor introduced to us some more common ones and explained to us that different type of information is encrypted in the different tags. For example, some are self-closing, others you must close on your own. There are 6 tags for headings - form <h1> to <h6>, <title> was self-explanatory, <p> stands for paragraph. By adding <a> you could add a link to another webpage and <div> was an empty container, where you could put additional information. We also learned about ordered and unordered lists, article tags and comments. The thing about html comments is that they do not show on the webpage, but you can see them on the source code.
The other thing Todor covered that evening was some uses of CSS. CSS is Cascading Style Sheets and it's used to stylize the text in the source code. In order to do that first, the CSS file must be quoted in a link tag in the HTML file. Then in order to stylize each segment, you must write them down and instruct how they should look - for example what color should the text be or how should it be aligned. It should be noted that the CSS file is only an extension to the HTML file - it never goes on its own.
Before ending the first part of the course, Todor gave us a few links, where anyone can look up different tags, their functions and how they can be used - www.w3schools.com and www.codecademy.com . With that we ended our lesson - a bit tired, but also very excited to take in all of the information. Can't wait for the next one, which will be on the 16th of November. Until then Todor prepared some homework, in order to work on our knowledge and practice, what we've learned.