The first “big” website based on HTML, CSS, and JavaScript is behind me. The project was implemented comprehensively from the concept, through implementation, to waiting for the last materials from the client. I would never have guessed that the preparation of materials for a website may take the same or more time than writing the code. Do you have that too?
First webpage as a good summary of what I had learned in HTML, CSS, and JavaScript
Overall, I’m satisfied with the project. This is a nice summary of what I’ve learned about HTML and CSS so far. I used JavaScript on this webpage only for the photo gallery and I didn’t write the code myself, I just downloaded the ready-made version.
Twice I tried to optimize JavaScript code for my needs, but each time it turned out that minor modifications in CSS did the problem to display HTML code. Finally, the JavaScript code didn’t need to be changed. Maybe that’s good because if something works, why bother with it?
I wonder about this more here: “Continuous improvement, it is worth my time?”
The most interesting thing is that there were a lot of photos to insert in the project. Apparently nothing, but each photo in a different size, and the container for photos in a different size. This made me become friends with GIMP. I still can’t perfectly put together one photo out of five, but I have the framing, scaling, and slight retouching in my little finger. All this cutting, and resizing image file is necessary to display images on the webpage just like in the project, using HTML, CSS, and JavaScript
How to manage your learning notes?
This week, in addition to coding, there was also some space to summarize the knowledge I gained so far in webpage building based on HTML, CSS, and JavaScript. A bit of habit, and a bit of a lack of thought over the subject at the beginning, I kept my notes in paper notebooks. Classic, as at school or college. No problem, actually, and some people will even praise it for muscle memory, so great. Apparently so, but …
- I noticed that some tips were saved several times in different places;
- the lack of order in these notes (JavaScript elements mix with HTML intermittent by CSS) makes it difficult to find answers to the questions during the webpage building;
- “Ctrl + F” doesn’t work in the paper notebook;
- frequently-used paper notebooks tired out quickly.
In view of the growing problems with knowledge management, I decided to transfer my notes to the digital world. I didn’t think long about the tool. In fact, I know two good tools for storing knowledge: Evernote and Microsoft OneNote.
A tool from Microsoft, in my opinion, is definitely a better choice. It has all the advantages of Evernote but also allows you to throw links within sections, making searching for information extremely simple. What’s more, the desktop application is much more pleasant to use.
Organizing the knowledge about webpage building using HTML, CSS, and JavaScript, I found a few pages with HTML tags description. I thought it would be nice to post them here because they turn out to be quite useful, and somehow less popular than <div>, <p>, or <section>.
Some HTML 5 useful tags to put on your webpage.
<iframe src=” “></iframe> very often used to embed videos from YouTube;
<video controls width=””> <source src=” ” type=” “></video> allows you to place video material on the webpage.
<audio controls><source src=””></audio> allowing you to place audio material on the webpage.
Copyright and free access to information was the subject of heated debate in 2019, but I don’t really know what it was. Can you cite other webpages on your webpage or not? In any case, should you need to use the elegant HTML citat tag, you will definitely need <blockquote cite=””></blockquote> for this purpose.
The webpage must be responsive. No one doubts that anymore. The challenge is to load the right size photos depending on the size of the user’s screen. It seems obvious that serving high-resolution photos to small screens unnecessarily slows down page loading. Fortunately, HTML offers a <picture> tag where we can specify which files to load depending on the screen size, e.g .:
When mentioning the photos, it is also worth noting that apart from the popular jpg or png format, the wepb format is now available. It is a much lighter format, and the loss of photo quality is acceptable.
These are just a few tags that can help you use on a daily basis. Of course, there are many more tags. In fact, it’s easy to see for yourself how many html tags there are that you don’t use when trying to pass an evaluation exam on LinkedIn ?
This week, it took 17 hours to write the code. Entirely dedicated to creating a webpage. I don’t include the time involved in organizing notes. Next week, I’m going back to learning JavaScript.
