Building Your First Responsive Website
So you decided to put in some elbow grease and take the DIY route of building your first website? That is a fantastic opportunity to learn something new, unleash your creativity, and even discover a new digital passion. Things you'll need to build your website: text editor(source code editor) and browser, and to publish your website: hosting plan and a domain. This free html bootstrap template will come in handy as well.
I recommend using Notepad++ for this project, as it is lightweight, free, and reliable. Check it out here: https://notepad-plus-plus.org/ in general any source code editing software is good as long as you feel comfortable working with it.
Let’s start with the basics. You will be using HTML, CSS, and JavaScript technology to build your first website. HTML defines elements of the website, CSS determines how they appear, and JavaScript will be used to enhance and add more user functionality to the design (showing/hiding stuff, animation).
Now, what is this Bootstrap mentioned in the title and how does one pull themselves by it?
Bootstrap is a free and open-source framework directed at responsive, mobile-first front-end web development and it will help you learn and understand quickly basic web development concepts while building a professional-looking and functional website.
There are two methods in building your first website:
First – download the template file, open it in the code editor, then open it in the browser of your choice. Go crazy, have fun!
Remember to check out Google Fonts and add some cool typography styles. Also very important: check out Bootstrap component documentation. Here is the link to buttons examples: https://getbootstrap.com/docs/4.5/components/buttons/ Try out different classes, or even override bootstrap style definitions by adding some inline code to your elements.
Like this:
<a href="# " class="btn btn-outline-dark align-bottom " style="border-radius:0;" >Click me!</a>
style="border-radius:0;" will remove the default rounded edge from the button.
The second method is reading through this article as it explains elements of the template you will be using for your website.
When you open index.html in your text editor you will see doctype. The doctype serves to make the browser render the page in "standards mode". Next is html tag, which signifies the beginning of our HTML document. The content language is here declared.
The beginning of the head section is marked with <head> tag, and the end of the head section is closed off with </head>. The head contains information about your website content that is not directly visible to the users. It is machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
In our example we have declared a character set, and then a viewport. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). Viewport gives the browser instructions on how to control the page's dimensions and scaling. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Then a pretty much self-explanatory website title, after which CSS files are loaded. CSS determines the look of HTML elements, color, size, position… If you copy/paste these links in your browser you can review these files to gain more understanding. Or opening the index.html in your browser and inspecting code, you can see how CSS styles apply to each element.
The last portion of our <head> contains some CSS code for additional styling. This could have been added in a separate file and linked the same way as other style files. But for simplicity, I‘ve kept it here. With CSS code here we have made a carousel slider the full width of the screen (100vw stands for 100% of view width and it refers to the overall width of the screen) and positioned captions of carousel slides.
Now we come to <body> of our website. All elements displayed on your website should be contained between <body></body> tags. Bootstrap features many JavaScript plugins, that enhance user experience, and looking at our example body tag we can see the implementation of Scrollspy.
Scrollspy will automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. Basically, it adds the active class to the menu item linked to the element in view.
Let’s take a look now at the menu. In our example we are dealing with a one-pager website, so all menu links are connected to on-page anchors. Click on each menu item takes us to the designated section of the page.
The menu is wrapped in <nav> tags, it has bootstrap classes that define its look and position. Within the nav tags, div with container class keeps the inner elements within the responsive container, positioned at equal distances from left and right. This is probably the most used bootstrap class.
Let’s break down the rest of the menu structure:
<button>: This is a button element, and it's used for the collapsible navigation menu toggle. When the screen size is small, this button allows users to open and close the navigation menu.
class="navbar-toggler p-0 border-0": These classes style the button to make it look like a hamburger menu icon with no visible borders.
data-toggle="collapse" data-target="#navbarNav": These attributes specify that this button is responsible for toggling the collapse of the navigation menu with the id "navbarNav."
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation": These attributes provide accessibility information for screen readers, indicating that this button controls the visibility of the "navbarNav" menu and providing a label for the button.
<div class="collapse navbar-collapse" id="navbarNav">: This <div> element is the container for the navigation links. It has the collapse class, which means it will initially be hidden and can be expanded when the toggle button is clicked.
<a class="navbar-brand" href="#home">My Website</a>: This is the website's brand or logo link. It's typically placed on the left side of the navbar and serves as a link back to the homepage. In this example, it's named "My Website," and it links to the "home" section of the page.
The code then defines an unordered list (<ul>) with a class of "navbar-nav," which is a list of navigation items.
Each list item (<li>) represents a navigation link with an anchor (<a>) element. Each link corresponds to a section of the website and has a unique href value that links to specific sections of the page.
Now that we understand how our responsive menu is built we can proceed to the next element.
Bootstrap carousel – eye-catching content slider. We see the following classes defining this element: The "carousel" class indicates it's a carousel, and the "slide" specifies the type of animation. The "full-width-carousel" class is custom CSS to make the carousel take up the full width of the screen. Div with class "carousel-inner" wraps all slides and each slide has class "carousel-item". The first item has also the class "active", but this class will be moved across all slides after initiation, it’s all handled by Bootstrap’s CSS and JavaScript.
The next couple of sections are pretty straightforward. "Container" classes are used for placing the content into a responsive wrapper. The "Row" class enables us to build a responsive grid of elements in combination with the "col" classes. "My-3" sets the margin at the vertical, y-axis of the element: and adds space outside to the top and the bottom of the element. Similarly "py-3" adds padding inside the element on the y-axis, creating space inside the element. If we want to affect the x-axis these classes word be mx-3 and px-3, or if we want to add margin or padding on all sides: m-3 and p-3.
The portfolio section is next to take a more detailed look into. Within each column, there is a link (<a>) with an image inside it:
<a class="image-link" href="https://via.placeholder.com/800x600">: This is an anchor element used to create a link. The image-link class is used to create a popup effect with JavaScript. The href attribute specifies the URL that the link points to. At the very bottom of the file, you will see how the popup functionality is initialized. This is the full-size image we wish to display in our gallery.
Inside the anchor element, there is an image:
<img src="https://via.placeholder.com/400x300" class="img-fluid" alt="Portfolio Image 1">: This is an image element – this is our thumbnail or image preview. The img-fluid class makes the image responsive, meaning it scales to fit the width of its container. The alt attribute provides alternative text for the image, which is important for accessibility and SEO.
In summary, we see the use of Bootstrap classes for columns and images ensures that the layout is responsive and adapts to different screen sizes. Each image is wrapped in a link that can be used to view the full-size image.
The contact form will be covered in the next article this one is already too long.