Simple Web Design for Beginners using HTML & CSS
My objective for this project, is to create a simple website which focuses on design consistency & easy-maintenance. I will only use HTML and CSS on this project hence, there is no focus on additional functionality on the webpage.
You can view my full project on my GitHub account —
https://github.com/elissammi/CosmeticWebsite_YSL
This simple web design is based on the famous Yves Saint Laurent cosmetic brand and all images/video/audio sources solely belongs to the rightful owner.
In this story, I will be explaining my HTML & CSS code. You can use any available text editor to code. For example, Visual Studio Code, Notepad++, and etc.
I am Sammi Chia Li, currently 18 years old in Year 2020, a Foundation student in a University College in Malaysia. This is a blog I wrote to conclude the things I have learnt throughout a course.
Note: I am not a professional, been studying computer-related courses for only half a year now.
Introduction
In this blog, I will be showing you the things I’ve learnt :
- using unordered list <ul> to create a side by side appearance
- using images as icons on the navigation bar
- using <p> as a clickable link with background styling that looks like buttons
Before we start making a website, we must first identify our website’s target audience. Writing down this will help you to keep track of your main focus and goal when coding and styling your webpage.
The target audience of our website is mainly focused on Women all around the world. The Women in this contextual can refer to working women or even women that serve as a housewife to their family.
Our website creates no boundaries between all Women as they are all treated equally when it comes to beauty and enhancing themselves. Women can explore more about lipsticks and women fragrances on our website to help them understand better about the products before purchasing them on one of our branches in Malaysia.
This helps all Women to understand that it is important to enhance their beauty as a form of self-care and self-love.
Linking your HTML file to an external CSS file
<link rel=”stylesheet” href=”header_footer.css”><link rel=”stylesheet” href=”style1.css”>
For each individual webpage, we will be linking it to two CSS file:
- header_footer.css — to style the header & footer of the page
- style1.css — to style the content area of the page
Having lesser CSS files can help in making your website easier to maintain as we will only need to change certain code and the entire webpage changes as well.
Styling the website with a consistence theme
As our target audience is mainly focused on Women, I have chosen a more feminine theme which is on the pink & purple side of shade.
Note: Before deciding on your webpage’s theme color, you must consider the color contrast of your webpage.
To check color contrast, you can use any available Color Contrast Checker. I personally use this website, https://webaim.org/resources/contrastchecker/ to help check my color contrast.
For the header_footer.css :
Declare all using (*) to make sure the font family is consistence throughout the website and apply border-box to all elements.
*{box-sizing: border-box;font-family: Georgia, 'Times New Roman', Times, serif;}
Next, give an id attribute names ‘wrapper’ to a div element that will wrap the <header>, <nav>, <main> and <footer>.
In this wrapper id attribute,
- Put in a background-image using pink marble background image, which can be easily downloaded from google images.
- box-shadow with 10px of shadow thickness at all four sides with a color of #8a0d47. This creates a shadow effect on your webpage.
- set the width to 80% so that your webpage will only use up 80% of your browser size.
#wrapper{background-image: url(image/marblebackground.jpg);box-shadow: 10px 10px 10px 10px #8a0d47;margin: 100px auto 100px auto;min-width: 1300px;max-width: 2000px;width: 80%;}
Lastly, configure the body selector in CSS to put a background color of #f3bccc .
body{background-color: #f3bccc;}
Header of the Website
We will be using unordered list <ul> element to create an logo image and headings of the brand name, ‘Yves Saint Laurent’.
below is the HTML Code:
<header><ul class="side_by_side"><li id="header_logo" ><a href="index.html"><img class="img_border" src="image/ysllogo.jpg" alt="This is a YSL Logo" height="150" width="100"></a></li><li id="header_name"><h1>Yves Saint Laurent</h1></li></ul></header>
To make the image a clickable link to navigate into index.html, we will have to put it as a child element to an anchor element, <a>. Remember to give an alternate (alt) text to every images in order to increase the website’s accessibility.
With the class and id attribute we created, we can now style it with CSS.
For header_footer.css :
#header_name{font-size: 2em;margin: 15px 5px 15px 0px;}#header_logo{margin: 10px 0px;}
For style1.css :
.img_border{border: 5px black solid;}
.side_by_side{display: flex;}
.side_by_side li{margin-left: auto;margin-right: auto;list-style-type: none;padding: 20px;}
.side_by_side a{text-decoration: none;}
It is important to declare img_border as a class attribute so that it can be used widely throughout your webpage. This class gives a border with thickness of 5px and it is a solid black border.
Note: class attribute can be used multiple times on one webpage while the id attribute can only be used once to uniquely identify a HTML element.
Next, the class side_by_side is used to allow the logo and headings to appear side by side in the webpage. In this case, we will be using
display: flex;Under the same class attribute, we have to remove the unordered list style and the text decoration on links.
list-style-type: none;
text-decoration: none;Navigation Bar of the Website
Once again, I will be implementing the same <ul> element to make a horizontal navigation bar.
below is the HTML Code:
<nav><ul class=”nav_links icon_size”><li>
<a href=”index.html”><img src=”image/homeicon.png” alt=”This is a home icon.”> Home</a>
</li><li>
<a href=”lipsticks.html”><img src=”image/lipstickicon.png” alt=”This is a lipstick icon.” > Lipsticks</a>
</li><li>
<a href=”fragrance.html”><img src=”image/fragranceicon.png” alt=”This is a frgrance icon.” > Fragrance</a>
</li><li>
<a href=”locate_us.html”><img src=”image/locationicon.png” alt=”This is a location icon.” > Locate Us</a>
</li><li>
<a href=”help.html”><img src=”image/helpicon.png” alt=”This is a FAQ icon.” > May I Help You?</a>
</li><li>
<a href=”contact_us.html”><img src=”image/telephoneicon.png” alt=”This is a telephone icon.” > Contact Us</a>
</li></ul></nav><hr class=”horizontal_bold”>
Instead of using <script> to link to available icons online, I will show you how to make icon images (.png) into a clickable icon on the navigation bar.
In the <li> element, create an anchor element, <a> having an <img> element as the child element . This will make the text and image both clickable.
For header_footer.css :
nav{padding: 5px 10px;background-color: #AD507C;}
nav li, nav a{font-weight: bold;font-size: 20px;color: #edf0f1;text-decoration: none;padding: 5px;}.nav_links li{display: inline-block;padding: 0px 20px;}a{transition: all 0.3s ease 0s;}.nav_links li a:hover{color: #C7FFF8;}.nav_links li a:visited {color: #FFF4D1;}.icon_size a img{height: 40px;width: 40px;}.horizontal_bold{border:#7D093F solid;}
In order for the list items to appear side by side horizontally, we will use
display: inline-block;a:hover — allows the link the change color when a cursor is pointed onto the link.
a:visited — will change the color of the links when the link has already been visited by a user.
horizontal_bold is a class attribute with solid #7D093F color-border to make the <hr> element looks bolder.
Creating button-like links
Instead of using the <button> element to create a clickable button, we will instead, use the <p> element to create a button-like link.
below is the HTML Code :
<section><div><h2 class="header_background text_center">EXPLORE BY CATEGORY</h2></div><ul class="side_by_side"><li><h3 class="text_center pink_bg">LIPSTICKS</h3><a href="lipsticks.html"><div class="links_style"><img class="img_border img_center" src="image/lipstickcat.PNG" alt="This is YSL lipstick product image."><p class="text_center">Discover More</p></div></a></li><li><h3 class="text_center pink_bg">FRAGRANCES</h3><a href="fragrance.html"><div class="links_style"><img class="img_border img_center" src="image/fragrancecat.PNG" alt="This is YSL fragrance product image."><p class="text_center">Discover More</p></div></a></li></ul></section>
Inside the <li> element, we have a <h3> element followed by an
For style1.css :
.pink_bg{background-color: #ffb0bc;padding: 15px;}.header_background{background-color:#7D093F;color: white;padding: 10px;}.img_center{display: block;margin-left: auto;margin-right: auto;}.text_center{text-align: center;}
In the same css file :
.links_style p{padding: 15px 20px;background-color: #D5CBF6;color: #42219C;border: none;border-radius: 50px;cursor: pointer;transition: all 0.3s ease 0s;font-size: 1.15em;}.links_style p:hover{background-color: #ffcdb3;color: #b10678;}
we will use the border-radius to create a curve shape background that looks like a button.
even though it is a <p> element, we can still make it a clickable link with a curvy background to make it look like a button.
Footer of the website
For the footer, we will be using the <ul> element with display: flex; again to make the <li> items to appear side by side.
Below is the HTML Code :
<footer><ul class="nav_links icon_size"><li>This website is created by Sammi Chia Li <br>YSL Beaute © 2020 | All rights Reserved. <br><p class="font_small">Last update: 21<sup>st</sup> Nov 2020</p></li><li><a href="https://www.instagram.com/yslbeauty/?hl=en" target="_blank"><img src="image/instagramicon.png" alt="This is a instagram icon." ></a><a href="https://www.facebook.com/yslbeautymalaysia/" target="_blank"><img src="image/facebookicon.png" alt="This is a facebook icon." ></a><a href="https://www.youtube.com/user/yslparfums" target="_blank"><img src="image/youtubeicon.png" alt="This is a youtube icon." ></a></li><li><a href="contact_us.html">Contact Us</a> <a href="help.html">FAQ</a> <a href="membership_TC.html">Membership T&Cs</a> <a href="citing.html">Copyright Citation</a> </li></ul></footer>
target = _blank in an anchor element allow users to open the hyperlink in a new tab.
For style1.css :
.font_small{font-size: 0.8em;}
Conclusion
Just by using only HTML & CSS on your webpage, you can still create a good and accessible website with various styling. Try it yourself & play around with various styles.
This is one of the way I create my website, there is of course many more ways to create your own desired design!
Javascript helps with the webpage’s functionality but as a beginner, I have yet to learn Javascript hence, I tried my best to create a webpage without Javascript.
If you take a closer look, I’ve applied a consistent styling to my website which is one of the key in developing a good webpage. It is important to keep your website simple yet consistent so that is it easier to maintain your website.
