Learn HTML, CSS, JavaScript from Scratch while building Flatiron Home page. Part 1: Call to Action
Welcome to part one of this series, if you are yet to check out part 0 the setup kindly follow this link to do so. In this series, we are building the front page of the Flatiron Website.
I have decided to make each section development of the site as a stand-alone tutorial to make it easy to follow for everyone. So in this part, we will be building out the header section I called it call-to-action (CTA).
HTML
Hypertext Markup Language is the standard markup language for creating web pages and web applications. With Cascading Style Sheets and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.Wikipedia
Think of HTML as the language to describe how the structure of our website should look, in architectural terms it will be like the frames and pillars that determine the structure of the house and that’s exactly what HTML is all about. HTML actually have a handful of markups that you will be using repeatedly and because of the advancement in web technology, there are new additional markups added to make creating web elements that are standardised.
The code above describes a simple web page, the DOCTYPE shows this is an HTML 5 document, the head section contains the area where we put things that describe this web page, like the title, any Style or Metadata we need to add and some other code specific to that page can go in there. The Body section is where the actual body of the webpage start and it close with the corresponding closed tag. ```<body> the content </body>``` Some HTML tags are self-closing like the image tag, `<img/>` I will put a link to resources to help you learn more about HTML and if you see a tag you don’t understand just punch it into Google.”
CSS
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
- W3school
And that’s it CSS makes your HTML frame pretty, and the power of CSS is that the same HTML Structure can be styled in millions of ways.
We are not going to touch on JavaScript at this point of the course, but it great you know that JavaScript helps put interactivity into our web app and much more.
So let's dive in =>
Above is the basic structure of our app, we have the DOCTYPE, the head section with a title, a meta tag and the link to the font we will be using for our website that is hosted on Google fonts. We have an h1 tag it is a header tag which also has other siblings like h2, h3,h4, and h5. Before the close of our body tag you see the link to the Javascript codes we will be using on our website, its best practice to put our JS code here so our page is rendered even if the JS it needs is not 100% downloaded yet. So I have added Font Awesome is a good library for free and pro icons for the web. And the index.js actually load all of our CSS for this course and we will also be adding our custom JS there.
Above is the content of our index.js with all our CSS loaded and a console.log to show us that it’s all wired up.
Moving on to the structure of our CTA Section
Into the body of having HTML we have the main tag that wraps the whole section in it the header tag that describes this as a header section in it we have the navigation section that describes the menus and our site logo. Go ahead and type this into your IDE and see the result.
Just at the end of the closing nav tag add the section above and then run npm run start
Server running at http://localhost:62935 — configured port 1234 could not be used. ✨ Built in 1.02s.
You can copy the link to your browser to see your hard work not so pretty.
Now to the fun part of making our code pretty. For this course, we will be using SASS you read more about it and take their short and very apt tutorial.
If you also look at our CSS files you will see a file called reset.css This file was created by CSS Reset by Andy Bell, CSS reset help to remove any surprise default by the browser and gave us almost a clean slate to start from. Poke around and look at what it does. There is no one way of doing CSS you learn by seeing what others do and trying to solve the same problem in your own way and if you are stuck I tell you Google is your friend. There is a lot out there than you can imagine. I have already made some CSS class desitions for this tutorial check out the BEM methodology of naming your classes, good practice.
BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development
This styles basically describe our container tag Main using its class, when selecting a class you use a . and the class name when selecting a tag itself you can just use the tag name like we select the body just as it is. in Sass you don’t need a semicolon nor bracket you just indent all the style bellow the tag it’s describing. you can also set a variable in Sass that you can use throughout your style like $primary-color: white` so anywhere we need a colour white we can just call the variable name cool right. In Sass indentation and nesting of child element under the parent element is very important, so take good note of that.
If you follow everything to this point we should have the result bellow.
If you are stuck at any point kindly check out the Repo on Github the CTA Branch. Takes time to go through the code read up about the new concepts and methodology and try put everything together again, and share your results in the comment box. Have any question or feedback, please drop a comment. Thank you! Looking forward to part 2.
Check out the live version
