Web Design3
 

Shopping Cart

The Web Design with HTML and CSS for Beginners course provides essential knowledge and skills for designing, publishing and maintaining websites for personal or professional use. No prior knowledge of web design, HTML or CSS is required for this course. Taught by a professional freelance web designer, you will learn how to design websites by building a website with HTML, style it with CSS and add images, video and other media. The course will also explain how to register domain names, buy hosting and use FTP clients to upload your finished site.

 

Skills Required

No previous experience of Web design, HTML, CSS is required. You should have basic computing and Internet knowledge

 

Course level

Beginner 

 

Duration & Cost

Option 1: 
Wednesday & Friday, 6pm to 9pm for 5 weeks: £560.00Shopping Cart

Option 2: 
Saturday, 10am to 1pm for 10 weeks: £560.00 Shopping Cart

 

Course Start Date

October 2017


Certification

Certificate of Completion will be provided after completing the course

 

Course Progression

After completion of this course, participants may wish to extend their knowledge further with these courses:

 

Career Paths

Junior Web Designer

 

Course Details

  1. HTML & CSS: The languages of web design
    • 1. Introducing the HTML5 and CSS3 languages and what they are used for
    • 2. Examining your workspace and the tools you will need to create websites
    • 3. What are elements and how are they used to structure a web page
    • 4. Setting up a new web page
    • 5. Writing your first HTML code to place text on a web page
    • 6. Linking HTML and CSS files together
    • 7. Introducing element selectors
    • 8. Writing your first CSS code to add colour to the text
  2. Fundamental CSS: Styles we can use every day
    • 1. Writing CSS declarations, properties and values
    • 2. Sizing everything with pixels
    • 3. Formatting text for easier reading
    • 4. Widths and heights
    • 5. Implementing background colours
    • 6. Using margins and padding
    • 7. Adding borders
    • 8. Be lazy! Learning the shorthand for quicker coding
  3. Selectors part 1: Harnessing their power
    • 1. Introducing classes - what we use them for
    • 2. Adding classes to elements in HTML
    • 3. Adding styles to classes in CSS
    • 4. Introducing the ID
    • 5. Adding IDs to elements in HTML
    • 6. Adding styles to IDs in CSS
  4. Designing a page part 1: Positioning
    • 1. Introducing the CSS Box Model
    • 2. The CSS reset - why and how we use it
    • 3. Wrapping content inside boxes
    • 4. Styling boxes
    • 5. Introducing Floats
    • 6. Using Floats to create a layout
    • 7. Introducing other position techniques: Fixed, Relative and Absolute
    • 8. How and why we use Fixed, Relative and Absolute positions
  5. Designing a page part 2: Images, figures and video
    • 1. Introducing the image element
    • 2. Placing images on a page with HTML
    • 3. Controlling the image with the max-width property
    • 4. The HTML5 video player
    • 5. Introducing figures
    • 6. Using figures and captions within text
    • 7. The background image - using an image as a background in CSS
    • 8. The background image and ID’s - the killer combo!
  6. Navigation part 1: Links and lists
    • 1. Introducing links and attributes in HTML
    • 2. The inline elements: anchors and spans
    • 3. Turning words into links in HTML
    • 4. Styling links and spans in CSS
    • 5. How to create lists in HTML
    • 6. Styling lists in CSS
  1. Selectors part 2: Nesting
    • 1. The concept of nesting
    • 2. The parent/child relationship
    • 3. What are descendant selectors
    • 4. Selecting individual “children” by element name
    • 5. Selecting individual “children” by class name
    • 6. Keep being lazy! Cut down code with shorthand
  2. Navigation part 2: Creating a menu
    • 1. How we use lists to create navigation menus
    • 2. Creating anchors from the list items
    • 3. The “Nav” element
    • 4. Creating buttons from links
    • 5. Styling the buttons
    • 6. Using floats to position buttons in a menu bar
  3. Pseudo elements: styling tables and creating effects in CSS
    • 1. Introducing pseudo elements
    • 2. Creating button borders in navigation with the “last-child” pseudo element
    • 3. Creating a hover effect with the “hover” pseudo element
    • 4. Creating a table in HTML
    • 5. Styling the table in CSS
    • 6. The “odd, “even” and “nth-child” pseudo elements
    • 7. Using pseudo elements to stripe your table
  4. Designing a page part 3: Putting it together
    • 1. Recapping what we know so far
    • 2. Laying out a page using navigation, images, articles and sidebars
    • 3. Adding a footer
    • 4. Creating multiple pages to form a website
    • 5. Linking all the pages together in the navigation
    • 6. Domains and hosting - how to use them to publish your site

 

Refer A Friend Banner


Website security

NUS NY 728x90 2016 12 15 V1 NC

Opening Hours

Monday
09:00 - 21:00
Tuesday
09:00 - 21:00
Wednesday
09:00 - 21:00
Thursday
09:00 - 21:00
Friday
09:00 - 21:00
Saturday
09:00 - 21:00
Sunday
09:00 - 21:00
Go to top
Join us at Amity College Ltd.