This is the second day of the challenge and I’m feeling good. I started yesterday and I was able to accomplish a lot. I have been putting off finishing my portfolio site and blog. Now, here we are, both are finished (well, I want to add more but it’s in good condition).
Before I talk about the challenge though, I want to share some stuff that I learned today (otherwise, the name of my blog may not make sense…LOL).
So, what did I learn about today? HTML Semantic Elements. I’ve encountered these before, but, I never really thought how important they are. Everyone usually just uses divs, so, why even bother, right?
Really, why should we bother. There are quite a few reasons why.
- Helps with assistive reading
- Allows search engines to identify correct web page content
- Organize your page into logical pieces
Among the three, the first one got me to learning more about Semantic Elements. I never really even thought about it but I believe the web is for everyone and it’s my duty as a developer to make sure that the experience on my site good for everyone without discrimination.
There are many semantic elements available for us to use. I am going to focus on 3 of them.
Nav
The navelement is one of the easy ones to understand. It helps define a set of navigation links on your site. Basically, this is where you would put your navigation bar.
Article
These next two are a bit harder to comprehend. I’ll try to explain it the best I can.
The article tag is used for content that is independent and self contained. It should make sense on it’s own. It usually identified by a heading.
Some content that you can use this tag for are posts, magazines, articles, and blogs.
For more information about this, you can click here.
Section
The section tag is similar to an article in a sense that it typically has a heading. Content in a section tag has specific theme. From what I understand, section is different from an article in a sense that it cannot stand on it’s own. It is a part of a whole.
For example, you can add a map inside a section tag.
Click here for more details and examples.
These are only 3 types of Semantic Elements that could help us better organize our sites. I think that by using these tags, we are not only going to have better site structure, we can also help make ALL visitors to our sites have a better experience.
Day #2
Okay, now to the 2nd day of the #100DaysOfCode challenge.
What I decided to do is to work on the projects that Wes Bos outlined on his free JavaScript30 class. It is a collection of fun, real world apps that teaches you to how to use JavaScript in a much more practical way.
The first app is a Drum Kit. It’s a web page that displays several keyboard keys on the screen. Each key corresponds to a drum sound. When pressed, the key lights up and the sound plays.
The project comes with a starter kit. The HTML and CSS is already set up for you. All you have to do is to code the JS. However, I decided to build everything from scratch. I wanted to do this to practice coding in all 3 technologies.
It took me about 4 hours to finish the project.
I struggled a bit with laying out the site. My main issue was centering the elements vertically and horizontally. I did a bunch of googling and found this awesome resource: Centering in CSS. I used position, top, left, right, and width to make things work.
So, the HTML and CSS took me half the time. The rest was JavaScript.
I struggled a lot with this. There were some stuff that I was not familiar with. So, I had to google a lot of things. I even had to rewatch the videos on JS30 to help guide me on what to do. I kinda felt like I cheated a little bit because some of the stuff I did, I had to walk through with the video.
However, I immediately took that thought out of my mind. I just made sure that I understood what I was doing.
So, that’s it, Day 2 is done. Time to sleep and look forward for the next day.
Here are links to the project if you’re interested.
This is the second day of the challenge and I’m feeling good. I started yesterday and I was able to accomplish a lot. I have been putting off finishing my portfolio site and blog. Now, here we are, both are finished (well, I want to add more but it’s in good condition).
Before I talk about the challenge though, I want to share some stuff that I learned today (otherwise, the name of my blog may not make sense…LOL).
So, what did I learn about today? HTML Semantic Elements. I’ve encountered these before, but, I never really thought how important they are. Everyone usually just uses
divs, so, why even bother, right?Really, why should we bother. There are quite a few reasons why.
Among the three, the first one got me to learning more about Semantic Elements. I never really even thought about it but I believe the web is for everyone and it’s my duty as a developer to make sure that the experience on my site good for everyone without discrimination.
There are many semantic elements available for us to use. I am going to focus on 3 of them.
Nav
The
navelement is one of the easy ones to understand. It helps define a set of navigation links on your site. Basically, this is where you would put your navigation bar.Article
These next two are a bit harder to comprehend. I’ll try to explain it the best I can.
The
articletag is used for content that is independent and self contained. It should make sense on it’s own. It usually identified by a heading.Some content that you can use this tag for are posts, magazines, articles, and blogs.
For more information about this, you can click here.
Section
The
sectiontag is similar to anarticlein a sense that it typically has a heading. Content in asectiontag has specific theme. From what I understand,sectionis different from anarticlein a sense that it cannot stand on it’s own. It is a part of a whole.For example, you can add a map inside a
sectiontag.Click here for more details and examples.
These are only 3 types of Semantic Elements that could help us better organize our sites. I think that by using these tags, we are not only going to have better site structure, we can also help make ALL visitors to our sites have a better experience.
Day #2
Okay, now to the 2nd day of the #100DaysOfCode challenge.
What I decided to do is to work on the projects that Wes Bos outlined on his free JavaScript30 class. It is a collection of fun, real world apps that teaches you to how to use JavaScript in a much more practical way.
The first app is a Drum Kit. It’s a web page that displays several keyboard keys on the screen. Each key corresponds to a drum sound. When pressed, the key lights up and the sound plays.
The project comes with a starter kit. The HTML and CSS is already set up for you. All you have to do is to code the JS. However, I decided to build everything from scratch. I wanted to do this to practice coding in all 3 technologies.
It took me about 4 hours to finish the project.
I struggled a bit with laying out the site. My main issue was centering the elements vertically and horizontally. I did a bunch of googling and found this awesome resource: Centering in CSS. I used position, top, left, right, and width to make things work.
So, the HTML and CSS took me half the time. The rest was JavaScript.
I struggled a lot with this. There were some stuff that I was not familiar with. So, I had to google a lot of things. I even had to rewatch the videos on JS30 to help guide me on what to do. I kinda felt like I cheated a little bit because some of the stuff I did, I had to walk through with the video.
However, I immediately took that thought out of my mind. I just made sure that I understood what I was doing.
So, that’s it, Day 2 is done. Time to sleep and look forward for the next day.
Here are links to the project if you’re interested.