Simple Site? WIP

This is what I have learned doing my own little project. I figured that the fastest way to learn is to replicate a site. Also, I have requirement that I can only use vanilla CSS and JS.

So this is the site that I have chosen and here is what I have done so far.

During this project, I didn’t expect that such a simple site would have so much involved.
Getting the basic of HTML/CSS is actually quite a challenge.

The first challenge was to get all the layout alignment correctly, this means getting it responsive as well. Getting the text to grow and shrink, navigation appear and disappear, etc.
Lesson 1: If your HTML market doesn’t look like lego blocks at the end, it becomes a mess down the road.

The second challenge was to target all the styling. When I started, I know CSS at a decent level. such as border, margin, padding, text, position, etc. But after this project, I started seeing a whole new way of organizing CSS and to target individual elements using very few CSS classes.
Lesson 2: Be well verse on how to target element selectively in CSS. Such as using Combination selector, Pseudo Class, Pesudo Element and Attribute Selector.

Third challenge was dealing with large HTML content and CSS files. I had to redo this project a few times to get the organization and styling correctly so that I can manipulate each section as individual objects and not just elements. As the project grows, it becomes harder to navigate.
Lesson 3: Use as little markup as possible. And be as specific as you can with CSS. Don’t bother trying to group similar CSS together and be fancy, is a mess.

Fourth Challenge, with each succeeding section CSS becomes easier. Until it reaches the end, where you have to start implementing effects such as smooth scrolling, onclick events, etc. Once I am at this part and began implementing JS, I noticed that some HTML markup is really hard to target unless I add a lot of ids, and classes (which I wanted to avoid). I had to reorganize the HTML again and change styling as well.
Lesson 4: You will encounter times where you have to redo parts of the project just to make things easier. Sometimes JS manipulation on the element would not work with the CSS.

Fifth Challenge, using vanilla JS to do all the effects was the most exciting part. Each feature is like a project on its own. Smooth Scrolling, Gallery, Expand Divs, Sticky Header, Animation.
Lesson 5: Build your own library to control these feature. Build a consistent system of markup, css, and js that works every time. This project wasn’t set up for this, had to use many repeated code because the consistency of markup prevented me to target needed elements. For example:

This setup is different from...
<div class="container">
   <div class="something here">

<div class="container">
   <div class="more-container">
      <div class="something here">

The extra container would throw you off in the JS portion because you have to account for the extra container. Therefore, I would have to use extra query selector to target children element.

There are more stuff that I can’t think of at the moment. I think I am going to leave this project as is. The next challenge is to make it cross browser compatible. At the moment, the project only works in Chrome and Opera and my phone :frowning: Safari, IE, and Firefox doesn’t work :frowning:
Which means, there are a tone of works ahead. LOL

1 Like